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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

:root {
  --light-color: #c4c4c4;
  --dark-color: #161616;
  --white-color: #f7f7f7;
}

body {
  background-color: var(--dark-color);
  color: var(--white-color);
}

.nav {
  padding: 1rem;
  width: calc(100vw - 2rem);
  background-color: var(--dark-color);
  color: var(--light-color);
  min-height: 15vh;
}

.nav-header {
  font-weight: bolder;
  font-size: 1.5rem;
  margin: 1rem;
}

.nav-list {
  display: flex;
  list-style: none;
  justify-content: flex-end;
}

.nav-links {
  position: relative;
  color: var(--light-color);
  text-decoration: none;
  padding: 7px 1rem;
  font-size: 1.2rem;
}

.nav .active {
  font-weight: bold;
}

.nav-links:hover,
.nav-links:active,
.nav-links:focus {
  outline: none;
  color: var(--white-color);
  font-weight: bold;
}

.nav-links::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1px;
  background: var(--white-color);
  transition: 0.4s ease-out;
}

.nav-links:hover::after,
.nav-links:focus::after {
  left: 0;
  width: 100%;
}

main {
  max-width: 70vw;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.header {
  margin: 1rem auto;
  padding: 1rem 0;
}

.description {
  margin-bottom: 1rem;
}

.container {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quiz-container {
  padding: 1rem 0;
}

.container p {
  padding: 1rem 0;
}

label {
  margin: 1rem;
}

input[type="radio"] {
  margin: 0 0.6rem 0.5rem;
  padding: 1rem;
}

button {
  transition: all 100ms ease-in-out;
}

button:hover,
button:active,
button:focus {
  border: 2px solid var(--white-color);
  background-color: var(--black-color);
  outline: none;
  box-shadow: 0 0 5px var(--white-color);
  color: inherit;
  border-radius: 10px;
}

button {
  font-size: 1rem;
  padding: 1rem;
  margin: 2rem auto;
  width: 40%;
  background-color: var(--white-color);
  color: var(--dark-color);
}

.output {
  margin: 1rem auto;
  font-size: 1.4rem;
}

footer {
  max-width: 60vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.copyright {
  margin: 0.5rem auto;
  padding: 0.5rem;
  font-size: 1.2rem;
}

.footer-list {
  margin: auto;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.links {
  padding: 2rem;
}

.icon {
  transition: filter 300ms linear, height 600ms ease-in-out,
    height 600ms ease-in-out;
}

.links:hover,
.links:focus {
  outline: none;
}

.icon:hover,
.icon:active,
.icon:focus {
  filter: invert(100%) sepia(3%) saturate(63%) hue-rotate(62deg)
    brightness(115%) contrast(94%);
  height: 30px;
  width: 30px;
}