:root {
  --mobile-width: 768px;
  --tablet-width: 1200px;
  --background: white;
  --backdrop: #f5f5f7;
  --text-color: black;
  --red: #ff97a3;
  --blue: #9ad9ff;
  --green: #19a786;

  --header-height: 80px;
  --color-transition-duration: 0.4s;
}

.dark {
  --background: black;
  --backdrop: #202124;
  --text-color: white;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Roboto';
  background-color: var(--backdrop);
  color: var(--text-color);

  transition: background-color var(--color-transition-duration) ease-in-out,
    border-color var(--color-transition-duration) ease-in-out,
    color var(--color-transition-duration) ease-in-out,
    font-family var(--color-transition-duration) ease-in-out;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.card {
  height: fit-content;
  padding: 2.25rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--background);
  transition: all 0.2s ease, background-color var(--color-transition-duration) ease-in-out;
}

.card h1 {
  margin-top: 0;
  text-align: center;
}

@media (min-width: var(--mobile-width)) {
  .card {
    padding: 2.25rem 2rem;
  }
}

/* Nunito regular */
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Nunito-Regular.woff') format('woff'),
    url('/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Overpass regular */
@font-face {
  font-family: 'Overpass';
  src: url('/fonts/Overpass-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Roboto regular */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto-Regular.woff') format('woff'),
    url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto-Bold.woff') format('woff'), url('/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
