:root {
  --outer-margin: min(5vh, 5vw);
  --spacer1: min(5vh, 5vw);

  --total-whitespace-height: calc(var(--outer-margin) + var(--spacer1));
  --total-whitespace-width: calc(var(--outer-margin) * 2);

  --secondaryrow-height: 10vh;

  --hero-max-width: calc(100vw - var(--total-whitespace-width));
  --secondaryrow-width: var(--hero-max-width);

  --hero-max-height: calc(
    100vh - var(--total-whitespace-height) - var(--secondaryrow-height)
  );

  /* All these should be in ms because they are parsed in js */
  --beam-duration: 200ms;
  --beam-fade: 800ms;
  --hero-fadein-duration: 700ms;
  --icon-delay: 100ms;
  --icon-duration: 650ms;
}

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #000000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden; /* Prevents both horizontal and vertical scrolling */
}

#laserCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.wrapper {
  display: flex;
  flex-direction: column;
  padding-top: var(--spacer1);
  gap: var(--spacer1);
}

.hero {
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.hero-img {
  max-height: var(--hero-max-height);
  max-width: var(--hero-max-width);
  border-radius: 3pt;
}

.secondaryrow {
  height: var(--secondaryrow-height);
  width: var(--secondaryrow-width);

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--spacer1);
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.icon {
  height: min(96px, 7vh);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-image {
  opacity: 0;
  animation: fadeIn var(--hero-fadein-duration) ease-in-out forwards;
  animation-play-state: paused;
}

/* slide-in animation for icons */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(
      -80vw
    ); /* Keeps the movement subtle for small icons */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.secondaryrow a {
  display: inline-block; /* Required for transform/movements to work properly on links */
  opacity: 0; /* Keeps them invisible before the 1s delay ends */
  animation: slideInFromLeft var(--icon-duration) ease-out forwards;
  animation-play-state: paused;
}

.secondaryrow a:nth-child(1) {
  animation-delay: var(--icon-delay);
}

.secondaryrow a:nth-child(2) {
  animation-delay: calc(var(--icon-delay) + 400ms);
}