@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

body {
  width: 100%;
  height: 100vh;
  font-family: "inter", sans-serif;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxlarge);
}

main {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quiz {
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-medium);
}

.quiz__title {
  padding: 0 var(--spacing-large) 0 var(--spacing-large);
  font-size: var(--font-size-xxlarge);
  font-weight: 300;
  text-align: center;
}

.quiz__sub-title {
  padding: 0 var(--spacing-large) 0 var(--spacing-large);
  font-size: var(--font-size-xlarge);
  font-weight: 300;
  text-align: center;
}

.quiz__start-button {
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--spacing-small);
  color: var(--color-primary-white);
  background-color: #171717;
  text-align: center;
  font-size: var(--font-size-large);
}