@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  line-height: 1.5em;
  font-weight: 400;

  --col-white: #ffffff;
  --col-green: #65baaf;
  --col-darkblue: #415364;

  color-scheme: light dark;

  /* Light mode defaults */
  color: var(--col-darkblue);
  background-color: var(--col-white);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: var(--col-green);
  text-decoration: none;
  transition: filter 0.3s ease-in-out;

  &:hover {
    filter: brightness(1.2);
  }
}

body {
  margin: 2em auto;
  min-width: 320px;
  min-height: 100vh;
  max-width: 1280px;
}

h1 {
  color: var(--col-darkblue);
  font-size: 2.5em;
  line-height: 1.1;
  &:first-child {
    margin-top: 0;
  }
}

h2 {
  color: var(--col-green);
}

#dbc-app {
  position: relative;
  max-width: 1280px;
  margin: 2rem auto;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
  }
}

.dbc-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 6em;
  will-change: filter;
  transition: filter 300ms;
  cursor: pointer;

  &:hover {
    filter: drop-shadow(0 0 2em #415364aa);
  }
}


@keyframes logo-spin {
  from {
    transform: rotate(-45deg);
  }
  25% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(405deg);
  }
  to {
    transform: rotate(-1125deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dbc-logo {
    animation: logo-spin infinite 10s ease-in-out;
  }
}