* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  max-width: 720px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: rgb(24, 24, 24);
  color: rgb(242, 242, 242);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

header, h1, h2, h3 {
  text-align: center;
}

table {
  width: 100%;
}

table, th, td {
  border: 1px solid grey;
  border-collapse: collapse;
}

#flashcards-mode-contolers {
  text-align: center;
}

#flashcard {
  text-align: center;
  border: 1px solid white;
  padding: 1em;

  #flashcard-word {
    font-size: 2em;
  }

  button {
    cursor: pointer;
    font-size: 2em;
  }
}

#letter {
  text-align: center;
  font-size: 4em;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

footer {
  text-align: center;
}