@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
   box-sizing: border-box;
}

body {
   background-image: linear-gradient(315deg, #82e664 0%, #208d11 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   font-family: "Poppins", sans-serif;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   margin: 0;
   width: 100%;
   height: auto;

}

.footer {
   display: flex;
   align-items: center;
   margin-top: auto;
}

.quiz-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-image: linear-gradient(rgb(137, 218, 173), rgb(142, 190, 166));
   border-radius: 10px;
   box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
   overflow: hidden;
   width: 100%;
   max-height: auto;
   padding: 2rem;
}

.quiz-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 4rem;
}

h2 {
   display: flex;
   text-align: center;
   margin: 0;
}

h4 {
   padding: 1rem;
   text-align: center;
   margin: 0;
}

ul {
   display: flex;
   flex-direction: column;
   list-style-type: none;
   padding: 0;
}

ul li {
   font-size: 1.2rem;
   margin: 1rem 0;
}

ul li label {
   cursor: pointer;
}

button {
   display: flex;
   flex-direction: column;
   background-color: #29a324;
   border: none;
   color: white;
   cursor: pointer;
   text-align: center;
   font-family: inherit;
   font-size: 4vh;
   max-width: 100%;
   padding: 1.3rem;
   border: solid 3px black;
   border-radius: 10px;
}

button:hover {
   background-color: #21f043;
}

button:focus {
   background-color: #08ce3a;
   outline: none;
}

.correct-hidden {
   display: none;
}

.wrong-hidden {
   display: none;
}

.alien {
   padding: 8px;
   border-radius: 1000px;
   height: 70px;
   width: 50px;
   align-items: center;
   /* center damn images!!?? In the body container, duh!*/
   /* img rotation */
   -webkit-transform: rotate(5deg);
}

.rotate {
   animation: rotation 3s;
}

@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(359deg);
   }
}

.linear {
   animation-timing-function: linear;
}

.infinite {
   animation-iteration-count: infinite;
}

/* All the above HTML classes here */
.rotate-image {
   animation: rotation 2s linear infinite;
}