/* TAGS */

html {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url("./images/background.png");
  background-repeat: repeat;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

table {
  width: 100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  font-size: 0.8em;
  padding: 0.5em;
}

a {
  color: blue;
}

/* CLASSES */

div.main_div {
  background-color: whitesmoke;
  border: 2px solid black;
  padding: 1em;
  overflow: hidden;
}

.page_title {
  font-size: 2em;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 1em;
}

a.page_section {
  color: black;
  text-decoration: none;
  background-color: #a1d8d2;
}
a.page_section:hover {
  background-color: #ffb7d2;
  animation-name: letter_spread;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* ANIMATION */

@keyframes letter_spread {
  0% {letter-spacing: normal;}
  100% {letter-spacing: 8px;}
}

/* LARGE SCREENS */

@media (min-width: 900px) {
  html {
    font-size: 20px;
  }

  body {
    margin: 2em;
  }

  div.main_div {
    max-width: 1000px;
    padding: 2em;
    margin: auto;
  }
}