@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap");
:root {
  --ardjet-background-color: 37, 25, 25; /* #1f1919 */
  --ardjet-foreground-color: 255, 165, 0; /* #ffa500 aka orange */
  --primary-animation-duration: 10s;
  --secondary-animation-duration: 9s;
}
body {
  margin:0;
  padding:0;
  background-color: rgb(var(--ardjet-background-color));
  color: rgb(var(--ardjet-foreground-color));
  font-family: "Oxanium",sans-serif;
}
#logo {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: url("/static/ardjet_logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70vmin;
}
#video {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  filter: blur(6px);
  opacity: 0;
  transition: opacity 1s;
}
.opaque {
  opacity: 1 !important;
}
#text-container {
  opacity: 0;
  transition: opacity 1s;
}
.textrow {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: rgb(var(--ardjet-background-color));
  background: rgb(var(--ardjet-foreground-color));
  mix-blend-mode: screen;
}
#textrow-primary {
  font-size: 4em;
  font-weight: bold;
}
#textrow-secondary {
  font-size: 1.2em;
}
.textcontent {
  display: inline-block;
  box-sizing: border-box;
  padding: 0em 5vw;
  min-width: 50vw;
  animation: sidescroll var(--primary-animation-duration) linear infinite;
}
.textcontent-secondary {
  animation-delay: calc( - var(--secondary-animation-duration) / 2);
  animation-duration: var(--secondary-animation-duration);
  padding: 0.5em 5vw;
}
@keyframes sidescroll {
  to {
    transform: translateX(-100%);
  }
}