@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, #4f63c0 0%, #5ddaeb 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(83, 143, 199), rgb(124, 199, 218));
   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: #48bfe4;
   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: #658adb;
}

button:focus {
   background-color: #596cd6;
   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;
}