* {
  box-sizing: border-box;
}

html {
  --color-primary: rebeccapurple;
  --color-white: white;
  --color-error: red;
  --color-success: green;

  height: 100%;
}

body {
  height: 100%;
}

.main {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

footer {
  justify-self: flex-end;
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
}

.content {
  max-width: 50rem;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.root-link {
  color: initial;
  text-decoration: none;
}

.main-two-columns {
  display: flex;
  flex-direction: row;
  gap: 20px;

  margin-bottom: 40px;
}

.column-divider {
  border: black 1px solid;
}

.action-button {
  width: 250px;
  font-size: 1rem;
  font-weight: bold;
  padding: 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  text-decoration: none;

  display: block;

  &:hover {
    background-color: color-mix(in oklab, var(--color-primary), white 15%);
  }
}

.lessons-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step {
  padding-bottom: 20px;
  border-bottom: 1px solid black;
  margin-bottom: 20px;
}

.code {
  padding-left: 30px;
  overflow: scroll;
  max-width: calc(100vw - 40px);
}

.hidden {
  display: none;
}

form[data-challenge] > .error {
  margin-top: 10px;
  color: var(--color-error);
}

.quiz-section {
  border: 2px var(--color-primary) solid;
  border-radius: 5px;
  padding: 10px;
}

.submit-challenge {
  height: 2.5rem;

  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  border: none;
  padding: 0px 10px;
  cursor: pointer;

  &:hover {
    background-color: color-mix(in oklab, var(--color-primary), white 15%);
  }

  &:disabled {
    background-color: color-mix(in oklab, var(--color-primary), grey 80%);
    cursor: initial;
  }
}

.quiz-input {
  height: 2.5rem;
  font-size: 1rem;
}

.lesson-last-paragraph {
  margin-bottom: 40px;
}