html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #F4ECD6;
}

h1 {
    margin: 0.5rem;
    margin-top: 1rem;
}

p {
    margin: 0.5rem;
}


/*BANNER*/
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    padding-left: 8rem;
    padding-top: 4rem;
    color: #310A31;
    font-size: 5rem;
    font-family: "Bungee Inline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.banner #bannerCard1 {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: -1;
    left: -5rem;
    top: 2rem;
    transform: rotate(25deg);
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    background: repeating-linear-gradient(0deg, #7890D6, #7890D6 1rem, #A7CAB1 1rem, #A7CAB1 2rem);
}

.banner #bannerCard2 {
    display: block;
    position: relative;
    z-index: -2;
    left: -8.5rem;
    top: -5.5rem;
    transform: rotate(-30deg);
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    background: repeating-linear-gradient(0deg, #7890D6, #7890D6 1rem, #A7CAB1 1rem, #A7CAB1 2rem);
}

/* MENU */
.menu {
    font-size: 2rem;
    text-align: center;
    color: #310A31;
}

.levelSelector {
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-bottom: 1rem;
}

.levelSelector input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.levelSelector label {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 2rem;
    margin: 2rem;
    height: 3rem;
    width: 3rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border: solid 2px #310A31;
    border-radius: 0.5rem;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.levelSelector label:hover {
    color: white;
}

.levelSelector input[type="radio"]:focus+label {
    box-shadow: inset 0.1rem 0.1rem 10px black;
}

.levelSelector input[type="radio"]:checked+label {
    color: white;
    box-shadow: inset 0.1rem 0.1rem 10px black;
}

.playButton {
    height: 3rem;
    width: 6rem;
    font-size: 2rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.playButton:hover {
    color: white;
}

.playRelaxMode {
    height: rem;
    width: 17rem;
    font-size: 2rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.playRelaxMode:hover {
    color: white;
}

/* COUNTERS */

.counters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2rem;
}

/*level counter*/
#levelCounter {
    font-family: "Bungee Inline", sans-serif;
    font-size: 1.5rem;
    color: #310A31;
    margin: 0 1rem 0 1rem;
}

/*chrono*/

.chrono {
    display: flex;
    margin-top: 0.5rem;
    height: 2rem;
    width: 50vw;
    background-color: transparent;
    border-radius: 1rem;
    border: solid 4px #310A31;
}

.chrono #timeBar {
    position: relative;
    align-items: start;
    height: 2rem;
    width: 100%;
    border-radius: 0.8rem;
    background-color: #2E6D2E;
}

/*movement counters*/

.counters #movementsCounter {
    font-family: "Bungee Inline", sans-serif;
    color: #310A31;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin: 0 1rem 0 1rem;
}

/*MEMORY BOARDGAME*/

#board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 70vw;
}

.card {
    display: flex;
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0.5rem;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform ease-in-out 0.3s;
}

.card .face {
    position: absolute;
    display: flex;
    width: 5rem;
    height: 5rem;
    justify-content: center;
    align-items: center;
    line-height: 20rem;
    font-size: 2rem;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.back {
    background: repeating-linear-gradient(0deg, #7890D6, #7890D6 1rem, #A7CAB1 1rem, #A7CAB1 2rem);
}

.front {
    transform: rotateY(180deg);
    background-color: white;
}

.card.flipped {
    transform: rotateY(180deg);
}

.guessed {
    pointer-events: none;
    animation-name: correct;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.missed {
    animation-name: wrong;
    animation-duration: 400ms;
    animation-iteration-count: 1;
}


/*LOST*/
.lost {
    font-size: 2rem;
    color: #310A31;
    text-align: center;
}

.retryButton {
    height: 3rem;
    width: 7rem;
    font-size: 2rem;
    margin: 1rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.retryButton:hover {
    color: white;
}

/*WIN*/
.win {
    font-size: 2rem;
    text-align: center;
    color: #310A31;
}

.nextLevelButton {
    height: 3rem;
    width: 12rem;
    margin: 1rem;
    font-size: 2rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.nextLevelButton:hover {
    color: white;
}

.restartButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 1rem;
    text-align: center;
    height: 2rem;
    width: 5rem;
    font-size: 1rem;
    color: #310A31;
    cursor: pointer;
    background-color: #7890D6;
    border-radius: 0.5rem;
    border: solid 2px #310A31;
    box-shadow: 0.1rem 0.1rem 10px black;
}

.restartButton:hover {
    color: white;
}

/* ANIMATIONS */

@keyframes correct {
    0% {
        transform: rotateY(180deg);
    }

    50% {
        transform: rotateY(180deg) scale(1.3);
    }

    100% {
        transform: rotateY(180deg) scale(0);
    }
}


@keyframes wrong {
    0% {
        transform: rotateY(180deg) rotate(0deg);
    }

    25% {
        transform: rotateY(180deg) rotate(5deg);
    }

    50% {
        transform: rotateY(180deg) rotate(0eg);
    }

    75% {
        transform: rotateY(180deg) rotate(-5deg);
    }

    100% {
        transform: rotateY(180deg) rotate(0deg);
    }
}

/* SOUND */
.sound {
    display: none;
}


/* RESPONSIVE */

@media screen and (max-width: 600px) and (min-width: 300px){
    
    html {
        font-size: 10px;
    }

    #board {
        width: 90vw;
    }
  }

  @media screen and (max-width: 300px) {
    
    html {
        font-size: 8px;
    }

    #board {
        width: 90vw;
    }
  }