* {
    font-family: 'Maven Pro', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, #E0EAFC, #CFDEF3);
    height: 100%;
    width: 100%;
}

header {
    justify-content: center;
    text-align: center;
}

h1 {
    margin: 6vh 0 5vh 0;
    font-size: 5vh;
    color: rgb(67, 71, 77);
}

p {
    padding: 0 35vh 3vh 35vh;
    font-size: 2vh;
    transition: .4s ease-in-out;
}

div {
    justify-content: center;
    align-items: center;
}

div.plate > div {
    height: 15vh;
    width: 15vh;
    margin: 1vh;
    background: transparent url(cupcakes/plate.png) no-repeat;
    background-size: contain;
}

#board {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.plate {
    display: flex;
    flex-direction: row; 
    justify-content: center;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    margin: 3vh;
    padding: 1vh;
    font-size: 2.5vh;
    border: 1px solid rgba(135, 48, 189, 0.8);
    color: rgba(135, 48, 189, 0.8);
    font-weight: bold;
}

button:hover {
    font-size: 3vh;
    color: rgba(89, 11, 138, 0.8);
    border: 1.5px solid rgba(89, 11, 138, 0.8);
    transition: .2s ease-in-out;
}

.hidden {
    display: none;
    transition: .4s ease-in-out;
}
  
div.hidden {
    transition: .4s ease-in-out;
}

img {
    display: flex;
    height: 12vh;
    width: 12vh;
    margin: 1.5vh;
    background: transparent;
    background-size: contain;
}

div#secretCode > div {
    height: 15vh;
    width: 15vh;
    margin: 1vh;
    background: transparent url(cupcakes/plate-gray.png) no-repeat;
    background-size: contain;
}

#rulesBtn {
    position: absolute;
    right: 10vh;
}

div.plate > div.green {
    height: 15vh;
    width: 15vh;
    margin: 1vh;
    background: transparent url(cupcakes/plate-green.png) no-repeat;
    background-size: contain;
}

div.plate > div.yellow {
    height: 15vh;
    width: 15vh;
    margin: 1vh;
    background: transparent url(cupcakes/plate-yellow.png) no-repeat;
    background-size: contain;
}

div.plate > div.red {
    height: 15vh;
    width: 15vh;
    margin: 1vh;
    background: transparent url(cupcakes/plate-red.png) no-repeat;
    background-size: contain;
}

#guessBtns {
    display: flex;
    justify-content: center;
    gap: 3.5vh;
    height: 10vh;
}

#submit {
    justify-content: center;
    margin: 1.5vh auto;
}

#playAgain {
    justify-content: center;
    margin: 1.5vh auto;
}

#winner {
    justify-content: center;
    text-align: center;
    margin: 2vh auto;
    font-size: 4vh;
}

#options {
    display: flex;
    flex-direction: row;
}