html {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

.border-3 {
  border-width: 3px;
}

@media (min-width: 1440px) {
  .container-max {
    max-width: 1440px;
  }
}

@media (min-width: 1680px) {
  .container-max {
    max-width: 1680px;
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.bg-indigo-gradient {
  background: linear-gradient(60deg, #4c51bf, #313587);
}

.bg-player-gradient {
  background: linear-gradient(0deg, #141516, #18262f);
}

.fade-opacity {
  transition: 0.5s opacity;
}

.dropdown-trigger:checked + .dropdown {
  display: block;
}

.flash {
  -webkit-animation: flash-animation 6s;
  -moz-animation: flash-animation 6s;
  -o-animation: flash-animation 6s;
  animation: flash-animation 6s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes flash-animation {
  0% {
    transform: translateY(-5rem) translateX(-50%);
  }
  10% {
    transform: translateY(1.5rem) translateX(-50%);
  }
  90% {
    transform: translateY(1.5rem) translateX(-50%);
  }
  100% {
    transform: translateY(-5rem) translateX(-50%);
  }
}

.checkbox {
  display: none;
}

.checkbox + div {
  cursor: pointer;
}

.checkbox + div > svg {
  visibility: hidden;
}
.checkbox:checked + div > svg {
  visibility: visible;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
a[type="button"],
a[type="submit"],
a[type="reset"],
button[type="button"],
button[type="submit"],
button[type="reset"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#video-container {
  padding-top: 56.3%;
}

@media (min-width: 768px) {
  #video-container {
    padding-top: 42.2%;
  }
}
