*, *::before, *::after{
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*color variables*/
:root{
     --hue-neutral: 200;
     --hue-wrong: 0;
     --hue-correct: 145;
}

body{
     --hue: var(--hue-neutral);
     margin: 0;
     padding: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: hsl(var(--hue), 100%, 20%);
}

body.correct{
     --hue: var(--hue-correct);
}

body.wrong{
     --hue: var(--hue-wrong);
}

#container{
     background-color: white;
     width: 800px;
     max-width: 80%;
     border-radius: 5px;
     padding: 10px;
     box-shadow: 0 0 10px 2px;
}

.btn-grid{
     display: grid;
     grid-template-columns: repeat(2, auto);
     gap: 11px;
     margin: 20px 0;
}

.btn{
     --hue: var(--hue-neutral);
     border: 1px solid hsl(var(--hue), 100%, 30%);
     background-color: hsl(var(--hue), 100%, 50%);
     border-radius: 9px;
     border-style: none;
     box-sizing: border-box;
     color: #FFFFFF;
     cursor: pointer;
     flex-shrink: 0;
     font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe   UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
     font-size: 16px;
     font-weight: 500;
     height: 3.5rem;
     padding: 0 1.6rem;
     text-align: center;
     text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
     transition: all .5s;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
}

.btn:hover{
     border-color: rgb(4, 255, 255);
     box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
     transition-duration: .1s;
}

@media (min-width: 768px) {
     .btn {
       padding: 0 2.6rem;
     }
   }

.btn.correct{
     --hue: var(--hue-correct);
     color: black;
}

.btn.wrong{
     --hue: var(--hue-wrong);
}

.start-btn, .next-btn{
     font-size: 1.5rem;
     font-weight: bold;
     padding: 10px 20px;
}

#controls{
     display: flex;
     justify-content: center;
     align-items: center;
}

.hide{
     display: none;
}

#resource {
     position: absolute;
     top: 80%;
}

a{
     color: yellow;
     text-decoration: none;
}

a:hover{
     border-bottom: 1px solid yellowgreen;
}