/* Preliminary CSS */

/* Fonts */

@font-face {
  font-family: "Rubik-Italic";
  src: url("../assets/fonts/static/Rubik-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik-Medium";
  src: url("../assets/fonts/static/Rubik-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik-Regular";
  src: url("../assets/fonts/static/Rubik-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik-Italic-VariableFont_wght";
  src: url("../assets/fonts/Rubik-Italic-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: "Rubik-VariableFont_wght";
  src: url("../assets/fonts/Rubik-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* COLORS */
  --White: hsl(0, 100%, 100%);
  --Black: hsl(0, 0%, 0%);
  --Gray-500: hsl(219, 13%, 44%);
  --Gray-50: hsl(220, 38%, 97%);
  --Blue-950: hsl(214, 24%, 23%);
  --Blue-900: hsl(216, 25%, 25%);
  --Blue-850: hsl(215, 27%, 32%);
  --Blue-500: hsl(223, 100%, 59%);
  --Blue-300: hsl(216, 47%, 78%);
  --Blue-100: hsl(220, 50%, 95%);
  --Blue-50: hsl(225, 100%, 96%);
  --Green-500: hsl(151, 68%, 52%);
  --Green-100: hsl(151, 88%, 94%);
  --Purple-600: hsl(277, 91%, 56%);
  --Purple-100: hsl(278, 100%, 95%);
  --Orange-400: hsl(22, 100%, 60%);
  --Orange-50: hsl(27, 100%, 96%);
  --Red-500: hsl(0, 82%, 63%);

  /* FONTS */
  --Italic: "Rubik-Italic", serif;
  --Medium: "Rubik-Medium", serif;
  --Regular: "Rubik-Regular", serif;
  --Italic-VariableFont_wght: "Rubik-Italic-VariableFont_wght", serif;
  --VariableFont_wght: "Rubik-VariableFont_wght", serif;
}

/* Normalize CSS */
html {
  box-sizing: border-box;
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  border: none;
  background-color: var(--White);
  color: var(--Blue-900);
}

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

ul,
ol {
  list-style: none;
}

/* Main CSS */

body {
  background-image: url(../assets/images/pattern-background-mobile-light.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--Gray-50);
  color: var(--Blue-900);
  font-family: var(--Medium);
  padding: 16px 24px 87px 24px;
  margin: 0 auto;
  height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding-top: 32px;
  margin: 0 auto;
}

/* Navbar */

/* Logo container */

.logo-container {
  display: flex;
  align-items: center;
  gap: 16px;
  visibility: hidden; /* This is for hiding the logo container, however to keep the slot for it. */
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.html {
  background-color: var(--Orange-50);
}

.css {
  background-color: var(--Green-100);
}

.js {
  background-color: var(--Blue-50);
}

.access {
  background-color: var(--Purple-100);
}

.logo-image {
  width: 29px;
  height: 29px;
}

.logo-text {
  font-size: 18px;
  line-height: 100%;
}

/* Light and Dark mode container */

.light-dark-mode {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.sun-icon,
.moon-icon {
  width: 16px;
  height: 16px;
}

.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 20px;
  padding: 4px;
  background-color: var(--Purple-600);
  border-radius: 999px;
}

.sun-toggle,
.moon-toggle {
  width: 12px;
  height: 12px;
  background-color: var(--White);
  border-radius: 999px;
  transition: all 0.3s ease-in-out;
}

.sun-toggle {
  visibility: visible;
} /* This is for controling the sun toggle. */

.moon-toggle {
  visibility: hidden;
} /* This is for controling the sun toggle. */

/* Welcome */

.welcome-container {
  display: flex; /*switch this for flex*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* Quiz menu */

.quiz-menu-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.header {
  font-family: var(--VariableFont_wght);
  font-weight: 300;
  font-size: 40px;
  line-height: 100%;
}

.strong-header {
  font-family: var(--Medium);
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
}

.header-text {
  font-family: var(--Italic);
  font-size: 14px;
  color: var(--Gray-500);
  line-height: 1.5;
}

/* Subject container */

.subjects-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.html-logo-container,
.css-logo-container,
.js-logo-container,
.access-logo-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
}

/* Main quiz */

.main-quiz-container {
  display: none; /*switch this for flex*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* Quiz question */

.quiz-question-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.question-text {
  font-size: 20px;
  line-height: 120%;
  padding-bottom: 8px;
}

.progress-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

progress::-webkit-progress-bar {
  background-color: var(--White);
  padding: 4px;
  height: 16px;
  border-radius: 999px;
}
progress::-webkit-progress-value {
  background-color: var(--Purple-600);
  height: 8px;
  border-radius: 999px;
}

/* Quiz answer */

.quiz-answers-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.answer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
}

.answer-text-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.variants {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  background-color: var(--Gray-50);
  border-radius: 6px;
  font-size: 18px;
  color: var(--Gray-500);
}

.answer-text {
  font-size: 18px;
  line-height: 1;
  color: var(--Blue-900);
}

.correct-incorrect {
  width: 32px;
  visibility: hidden; /* make visibility unset */
}

/* Submit answer button */

.submit-answer-button {
  padding: 19px;
  background-color: var(--Purple-600);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--White);
}

/* Error message */

.error-message-container {
  visibility: hidden; /* make visibility unset */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.error-icon {
  width: 32px;
}

.error-text {
  font-size: 18px;
  line-height: 1;
  color: var(--Red-500);
}

/* Final result */

.final-result-container {
  display: none; /*switch this for flex*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* Result */

.result-score {
  font-family: var(--VariableFont_wght);
  font-weight: 300;
  font-size: 40px;
  line-height: 100%;
  width: 100%;
}

.strong {
  font-weight: 500;
  line-height: 1.2;
}

.result-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.score-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background-color: var(--White);
  border-radius: 12px;
  padding: 32px 0px;
}

.score {
  font-weight: 500;
  font-size: 88px;
  line-height: 100%;
}

.out-of-nmb-text {
  font-size: 18px;
  line-height: 100%;
  color: var(--Gray-500);
}

.play-again-btn {
  font-size: 18px;
  line-height: 100%;
  background-color: var(--Purple-600);
  color: var(--White);
  border-radius: 12px;
  padding: 19px 0px;
}

/* Light/Dark mode toggler */

.dark-button {
  background-color: var(--Blue-850);
  color: var(--White);
}

.header-text-dark {
  color: var(--Blue-300);
}

.progress::-webkit-progress-bar {
  background-color: var(--Blue-850);
}

.answer-text-dark {
  color: var(--White);
}

.error-text-dark {
  color: var(--White);
}

.score-container-dark {
  background-color: var(--Blue-850);
}

.out-of-nmb-text-dark {
  color: var(--Blue-300);
}

/* Tablet size */

@media only screen and (min-width: 577px) and (max-width: 1024px) {
  /* Main CSS */

  body {
    background-image: url(../assets/images/pattern-background-tablet-light.svg);
    padding: 40px 64px 52px 64px;
  }

  header {
    padding-bottom: 49px;
  }

  main {
    gap: 64px;
    padding-top: 0px;
  }

  /* Navbar */

  /* Logo container */

  .logo-container {
    gap: 24px;
  }

  .logo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }

  .logo-image {
    width: 40px;
    height: 40px;
  }

  .logo-text {
    font-size: 28px;
  }

  /* Light and Dark mode container */

  .light-dark-mode {
    gap: 16px;
  }

  .sun-icon,
  .moon-icon {
    width: 24px;
    height: 24px;
  }

  .toggle-container {
    width: 48px;
    height: 28px;
  }

  .sun-toggle,
  .moon-toggle {
    width: 20px;
    height: 20px;
  }

  /* Welcome */

  .welcome-container {
    gap: 64px;
  }

  /* Quiz menu */

  .header {
    font-size: 64px;
  }

  .strong-header {
    line-height: 1.125;
  }

  .header-text {
    font-size: 20px;
    line-height: 1.5;
  }

  /* Subject container */

  .subjects-container {
    gap: 24px;
  }

  .html-logo-container,
  .css-logo-container,
  .js-logo-container,
  .access-logo-container {
    gap: 32px;
    border-radius: 24px;
  }

  /* Quiz question */

  .quiz-question-container {
    gap: 24px;
  }

  .question-text {
    font-size: 36px;
    padding-bottom: 16px;
    line-height: 1.1945;
  }

  /* Quiz answer */

  .quiz-answers-container {
    margin-top: -24px;
    gap: 24px;
  }

  .answer-container {
    border-radius: 24px;
  }

  .answer-text-container {
    gap: 32px;
  }

  .variants {
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 28px;
  }

  .answer-text {
    font-size: 28px;
  }

  .correct-incorrect {
    width: 40px;
  }

  /* Submit answer button */

  .submit-answer-button {
    margin: 8px 0px;
    padding: 32px;
    border-radius: 24px;
    font-size: 28px;
  }

  /* Error message */

  .error-icon {
    width: 40px;
  }

  .error-text {
    font-size: 24px;
    line-height: 1.5;
  }

  /* Final result */

  .final-result-container {
    gap: 64px;
  }

  /* Result */

  .result-score {
    font-size: 64px;
  }

  .strong {
    line-height: 1.125;
  }

  .result-container {
    gap: 32px;
  }

  .score-container {
    gap: 40px;
    border-radius: 24px;
    padding: 48px 0px;
  }

  .score {
    font-size: 144px;
    margin-bottom: -24px;
  }

  .out-of-nmb-text {
    font-size: 24px;
    line-height: 1.5;
  }

  .play-again-btn {
    font-size: 28px;
    border-radius: 24px;
    padding: 32px 0px;
  }
}

/* Desktop size */

@media only screen and (min-width: 1025px) {
  /* Main CSS */

  body {
    background-image: url(../assets/images/pattern-background-desktop-light.svg);
    padding: 83px 140px 148px 140px;
  }

  header {
    padding-bottom: 85px;
  }

  main {
    gap: 64px;
    padding-top: 0px;
  }

  /* Navbar */

  /* Logo container */

  .logo-container {
    gap: 24px;
  }

  .logo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }

  .logo-image {
    width: 40px;
    height: 40px;
  }

  .logo-text {
    font-size: 28px;
  }

  /* Light and Dark mode container */

  .light-dark-mode {
    gap: 16px;
  }

  .sun-icon,
  .moon-icon {
    width: 24px;
    height: 24px;
  }

  .toggle-container {
    width: 48px;
    height: 28px;
  }

  .sun-toggle,
  .moon-toggle {
    width: 20px;
    height: 20px;
  }

  /* Welcome */

  .welcome-container {
    display: grid;
    grid-template-columns: 40.0863% 1fr;
    column-gap: 128px;
  }

  /* Quiz menu */

  .quiz-menu-header {
    align-self: flex-start;
    gap: 48px;
  }

  .header {
    font-size: 64px;
  }

  .strong-header {
    line-height: 1.125;
  }

  .header-text {
    font-size: 20px;
    line-height: 1.5;
  }

  /* Subject container */

  .subjects-container {
    gap: 16px;
  }

  .html-logo-container,
  .css-logo-container,
  .js-logo-container,
  .access-logo-container {
    gap: 32px;
    padding: 24px;
    border-radius: 24px;
  }

  /* Main quiz */

  .main-quiz-container {
    display: none; /*switch this for grid*/
    grid-template-columns: 40.0863% 1fr;
    column-gap: 128px;
  }

  /* Quiz question */

  .quiz-question-container {
    align-self: flex-start;
    gap: 24px;
  }

  .question-text {
    font-size: 36px;
    padding-bottom: 0px;
    line-height: 1.1945;
  }

  /* Quiz answer */

  .quiz-answers-container {
    gap: 16px;
  }

  .answer-container {
    padding: 24px;
    border-radius: 24px;
  }

  .answer-text-container {
    gap: 32px;
  }

  .variants {
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 28px;
  }

  .answer-text {
    font-size: 28px;
  }

  .correct-incorrect {
    width: 40px;
  }

  /* Submit answer button */

  .submit-answer-button {
    margin: 16px 0px;
    padding: 32px;
    border-radius: 24px;
    font-size: 28px;
  }

  /* Error message */

  .error-icon {
    width: 40px;
  }

  .error-text {
    font-size: 24px;
    line-height: 1.5;
  }

  /* Final result */

  .final-result-container {
    display: none; /*switch this for flex*/
    grid-template-columns: 38.7932% 1fr;
    column-gap: 143px;
  }

  /* Result */

  .result-score {
    align-self: flex-start;
    font-size: 64px;
  }

  .strong {
    line-height: 1.125;
  }

  .result-container {
    gap: 32px;
  }

  .score-container {
    gap: 40px;
    border-radius: 24px;
    padding: 48px 0px;
  }

  .score {
    font-size: 144px;
    margin-bottom: -24px;
  }

  .out-of-nmb-text {
    font-size: 24px;
    line-height: 1.5;
  }

  .play-again-btn {
    font-size: 28px;
    border-radius: 24px;
    padding: 32px 0px;
  }
}

/* Interaction */

.html-logo-container:hover,
.css-logo-container:hover,
.js-logo-container:hover,
.access-logo-container:hover {
  outline: 3px solid var(--Purple-600);
  cursor: pointer;
}

.html-logo-container:focus,
.css-logo-container:focus,
.js-logo-container:focus,
.access-logo-container:focus {
  outline: 3px solid var(--Purple-600);
}

.answer-container:not(.effects-disabled):hover {
  outline: 3px solid var(--Purple-600);
  cursor: pointer;
}

.answer-container:not(.effects-disabled):hover .variants {
  background-color: var(--Purple-600);
  color: var(--White);
}

.answer-container:not(.effects-disabled):focus {
  outline: 3px solid var(--Purple-600);
}

.answer-container:not(.effects-disabled):focus .variants {
  background-color: var(--Purple-600);
  color: var(--White);
}

.correct-answer-outline {
  outline: 3px solid var(--Green-500);
}

.correct-answer-background {
  background-color: var(--Green-500);
  color: var(--White);
}

.incorrect-answer-outline {
  outline: 3px solid var(--Red-500);
}

.incorrect-answer-background {
  background-color: var(--Red-500);
  color: var(--White);
}

.submit-answer-button:hover {
  opacity: 50%;
  transition: all 0.3s ease-in-out;
}

.submit-answer-button:focus {
  outline: 3px solid var(--Blue-950);
}