*, *::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}




.logo {
    display: flex;
    align-items: center;
    width: 20vw;
    height: 30rem;
    margin-right: auto;
}

.header {
    background: #f4e4dc;
    padding: 2rem;
    display: flex;
    list-style: none;
    height: 10vh;
    width: 110vw;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}



.headerPP1 {
    color: #9b9b9b;
    letter-spacing: 0.3rem;
    text-decoration: none;
   

}

.headerPP2 {
    color: #9b9b9b;
    letter-spacing: 0.3rem;
    text-decoration: none;
    color:red;
    text-decoration: underline;

}

nav {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
}

nav > ul {
    display: flex;
    list-style: none;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
}

body {
    font-size: 2rem;
    background: rgb(237, 225, 225);
    font-family: sans-serif;
  
 
}
/*
body::before, body::after{
    content:"";
    height:100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;
    animation-name:away;
    animation-duration: 1.2s;
    transform-origin: right;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

body::before{
    background: purple;
    animation-delay: 0.3s;
    z-index:1;
   
}

body::after{
    background: pink;
    z-index: 2;
    
}
main{
    width:100%;
    opacity:0;
    animation-fill-mode: forwards;
    animation-name: popup;
    animation-duration:0.8s;
    animation-delay: 1s;
  
}
*/

.inputs{
    display:flex;
    align-items: left;
    justify-content:left;
    flex-direction: column;
    gap:4rem;
    width:100%;
    margin-bottom:4rem;
    flex-wrap:wrap;
}



.inputs > div{
    display:flex;
    align-items:center;
    width:40rem;
    font-size:1.8rem;
    color: #9b9a9a;
    font-weight:800;
}

.filter{
    width:5rem;
    height:5rem;
    margin-right: 2rem;
    appearance:  none;
    -webkit-appearance: none;
    background:lightgray;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.5rem rbga(0,0,0,0.2);
}

.label:hover{
    cursor:pointer;
}

filter:hover{
    cursor:pointer;
}

.filter:checked{
    background: #ff5100;
}

.filter:checked ~ .label{
    text-decoration: underline;
}

.games{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap: 0.5rem;
    align-items: center;
}



.game{
    list-style: none;
    width:25rem;
    height:30rem;
    transition: 0.2s transform;
    flex-grow:1;
}

.game:hover{
    transform: scale(1.02) translateY(-0.7rem);
    cursor:pointer;
}

.game img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/*
@keyframes away{
    from{
        transform: scaleX(1);

    }
    to{
        transform: scaleX(0);
    }
}

@keyframes popup{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }

}

*/
.footer {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    height: 20vh;
    background-color: #F4E4DC;
    padding-top: 3rem;

}

.infoTitle {
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    padding-bottom: 0.4rem;
    text-decoration: underline;
}

.infoText {
    font-size: 1.5rem;
    margin-top: 2rem;
    text-transform: none;
    text-decoration: solid;
}

.shopTitle {
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    padding-bottom: 0.4rem;
    text-decoration: underline;
}

.shopTextOne {
    display: block;
    font-size: 2rem;
    margin-top: 2rem;
    text-transform: none;
    text-decoration: solid;
    text-decoration: none;
    color: black;
}

.shopTextSecond {
    display: block;
    font-size: 2rem;
    margin-top: 2rem;
    text-transform: none;
    text-decoration: solid;
    text-decoration: none;
    color: red;
}