@font-face {
  font-family: Auguste;
  src: url('auguste-sans-regular-pro.otf');
}

@font-face {
  font-family: Roobert;
  src: url('Roobert-Regular.ttf');
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: Roobert, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;

  color: #111111;
  background-color: #f6f6f6;
  font-size: 24px;
}

a:visited,
a:-webkit-any-link {
  color: inherit;
}
a:hover {
  cursor: pointer;
  color: #ff53da;
  text-decoration: underline;
}

button:hover {
  box-shadow: 5px 5px 0px #ff53da;
  cursor: pointer;
}

body > * > * {
  max-width: 1200px;
  margin: auto;
  padding: 0 2rem;
}

header {
  background-color: #fff;
}
section {
  margin: 2rem auto;
}
section > h4 {
  margin-bottom: 0.5rem;
}
section > h4 + * {
  margin-top: 0;
}

section:hover {
  background-image: url('/images/dex.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 1.5rem;
}

footer {
  margin-bottom: 2rem;
}

@media only screen and (max-width: 800px) {
  body {
    font-size: 18px;
  }

  body > * > * {
    padding: 0;
  }
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: #111;
  }

  header {
    background-color: #f6f6f6;
  }

  section,
  footer {
    color: #f6f6f6;
  }
}
