@charset "UTF-8";
body {
  color: #212529;
  background-color: #f8f9fa;
}

/*
 * Globals
 */
.btn-secondary {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #212529;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.btn-secondary:hover, .btn-secondary:focus {
  color: #212529;
  background-color: #f8f9fa;
}

.btn-secondary.selected {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .btn-secondary {
    padding: 0.5rem;
  }
}

/*
 * Base structure
 */
.cover-container {
  max-width: 48em;
}

/*
 * Header
 */
.nav-masthead button {
  cursor: pointer;
  padding: 0.25rem;
  color: #212529;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  text-transform: none;
}

.nav-masthead button:hover, .nav-masthead button:focus {
  border-bottom-color: #0071d1;
}

.nav-masthead button + button {
  margin-left: 1rem;
}

.nav-masthead .active {
  border-bottom-color: #212529;
}

.date,
.time,
.countdown {
  color: #0071d1;
}

a {
  color: #212529;
  text-decoration: none;
}

a:hover {
  color: #212529;
  text-decoration: underline;
}

.date-input {
  color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #212529;
  border-radius: 5px;
  color-scheme: light;
}

body,
.btn-secondary,
.date,
.time,
.countdown,
a,
.date-input {
  -webkit-transition: color 750ms ease, background-color 750ms ease, border-bottom 750ms ease, border-bottom-color 750ms ease, border-color 750ms ease;
  transition: color 750ms ease, background-color 750ms ease, border-bottom 750ms ease, border-bottom-color 750ms ease, border-color 750ms ease;
}

.dark {
  color: #f8f9fa;
  background-color: #212529;
}

.dark .btn-secondary {
  color: #f8f9fa;
  background-color: #212529;
  border-color: #f8f9fa;
}

.dark .nav-masthead button {
  color: #f8f9fa;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
}

.dark .nav-masthead button:hover, .dark .nav-masthead button:focus {
  border-bottom-color: #63beff;
}

.dark .nav-masthead button + button {
  margin-left: 1rem;
}

.dark .nav-masthead .active {
  border-bottom-color: #f8f9fa;
}

.dark .date,
.dark .time,
.dark .countdown {
  color: #63beff;
}

.dark a {
  color: #f8f9fa;
}

.dark .date-input {
  color: #f8f9fa;
  background-color: #212529;
  border-color: #f8f9fa;
  color-scheme: dark;
}

.easter-egg-text.🐕 {
  background: radial-gradient(circle, #f85a8f 0%, #c63edf 20%, #48c8da 40%, #4ec952 60%, #d6e931 100%);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 400%;
  -webkit-animation: gradient 1.5s linear infinite alternate;
          animation: gradient 1.5s linear infinite alternate;
}

.easter-egg-text.🧔 {
  background: radial-gradient(circle, #1fd537 0%, #28e942 20%, #f3dd19 40%, #e25a1b 60%, #f30212 80%);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 400%;
  -webkit-animation: gradient 2.5s linear infinite alternate;
          animation: gradient 2.5s linear infinite alternate;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

.easter-egg-text.🦃 {
  background: radial-gradient(circle, #eb8a0c 0%, #e6aa3c 20%, #e9d523 40%, #e25a1b 60%, #cc490c 80%);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 400%;
  -webkit-animation: gradient 2.5s linear infinite alternate;
          animation: gradient 2.5s linear infinite alternate;
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
/*# sourceMappingURL=style.css.map */