@import url(../fonts/lato.css);
@import url(../fonts/montserrat.css);
@import url(../fonts/oswald.css);

@import url(normalize.min.css);
@import url(colors.css);

:root {
  --font-fallbacks: 'Candara', 'Segoe UI', system-ui, sans-serif;
  --font-lato: 'Lato', var(--font-fallbacks);
  --font-montserrat: 'Montserrat', var(--font-fallbacks);
  --font-oswald: 'Oswald', var(--font-fallbacks);

  --text-shadow: 0.05em 0.05em 0.04em;
}

html {
  background-color: var(--color-raspberry-6);
  color: var(--color-raspberry-1);
  height: 100%;
}

body {
  font-family: var(--font-lato);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  height: 100%;
}

body > svg {
  width: 0;
  height: 0;
  position: absolute;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-raspberry-2);
  text-shadow: var(--text-shadow) rgb(0 0 0 / 30%);
  text-align: center;
  line-height: 1;
}

h1 {
  font-size: 4em;
  text-transform: uppercase;
}

h2 {
  font-size: 2em;
  color: var(--color-raspberry-4);
  text-transform: lowercase;
}

.video-hero {
  aspect-ratio: 1920/1080;
  filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 30%));
}

.video-hero .video-container {
  clip-path: url(#logo-clip);
  transform: translateZ(0);
}

.video-hero a,
.video-hero .video-container,
.video-hero video {
  display: block;
  width: 100%;
  position: relative;
}

.link-tooltip {
  color: var(--color-raspberry-1);
  font-size: 1.7em;
  line-height: 1;
  text-decoration: none;
  text-shadow: var(--text-shadow) rgb(0 0 0 / 0.3);
  position: absolute;
  top: 8.4%;
  left: 28.3%;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  backdrop-filter: saturate(0) brightness(0.4);
  padding: 1ch;
  border-radius: 50%;
  aspect-ratio: 1;
  display: none;
  align-items: center;
}

@media (pointer: fine) {
  .link-tooltip {
    display: flex;
  }
}

.video-hero a:hover .link-tooltip,
.video-hero a:focus .link-tooltip,
.video-hero a:active .link-tooltip {
  opacity: 1;
}

.reel {
  margin: 0 0.5ch;
  display: none;
}

.reel svg {
  width: 100%;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}

@media screen and (min-width: 768px) {
  .reel {
    display: inline-flex;
    animation: rotate 15s infinite linear;
    width: 1em;
    align-items: center;
    position: relative;
    top: .5ex;
  }
}

.intro {
  text-align: center;
}

a:link {
  color: var(--color-raspberry-3);
  transition: color 0.1s linear;
}

a:hover,
a:visited,
a:visited:hover {
  color: var(--color-raspberry-1);
}