/* Reset: https://www.joshwcomeau.com/css/custom-css-reset/ */

/* 1. Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Allow percentage-based heights in the application */
html,
body {
  height: 100%;
}

/* 4. Add accessible line-height and improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Create a root stacking context */
#root,
#__next {
  isolation: isolate;
}

::-webkit-scrollbar {
  display: none;
}

/* Primary Styles */
body {
  color: white;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  font-family: Helvetica, sans-serif;
}

/* Video Background */
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-container video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* CRT Effect */

.refresh {
  float: left;
  width: 200%;
  height: 100px;
  z-index: 8;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0.1;
  position: fixed;
  bottom: 0;
  animation: refresh 8s linear infinite;
  animation-name: refresh;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  transform: translateZ(500px);
  background: repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.08) 0px 4px,
      rgba(0, 255, 0, 0.08) 1px 5px,
      rgba(0, 0, 255, 0.08) 2px 6px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px 1px,
      rgba(0, 0, 0, 0.4) 2px 3px
    );
  opacity: 0;
  pointer-events: none;
  animation: flicker 0.02s infinite;
}

/* Animations */

@keyframes flicker {
  0% {
    opacity: 0.8;
  }
  5% {
    opacity: 0.85;
  }
  10% {
    opacity: 0.9;
  }
  15% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.75;
  }
  25% {
    opacity: 0.8;
  }
  30% {
    opacity: 0.85;
  }
  35% {
    opacity: 0.88;
  }
  40% {
    opacity: 0.82;
  }
  45% {
    opacity: 0.78;
  }
  50% {
    opacity: 0.8;
  }
  55% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.9;
  }
  65% {
    opacity: 0.87;
  }
  70% {
    opacity: 0.83;
  }
  75% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.88;
  }
  90% {
    opacity: 0.86;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes refresh {
  0% {
    bottom: 100%;
  }
  70% {
    bottom: 100%;
  }
  100% {
    bottom: 0px;
  }
}

/* Logo Styles */
#logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

#logo-container img {
  width: 50vw;
  max-width: 300px;
  opacity: 1;
  transition: opacity 0.3s;
}

#logo-container img:hover {
  opacity: 1.2;
}

#contact {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
}

#contact-items {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

#contact-items a {
  color: white;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.3s;
  font-size: 14px;
  letter-spacing: 1px;
}

#contact-items a:hover {
  opacity: 1;
}

.divider {
  color: white;
  opacity: 0.6;
}

@media (max-width: 480px) {
  #contact-items {
    gap: 10px;
  }

  #contact-items a {
    font-size: 12px;
  }
}

/* Remove the specific size overrides for mail and download icons */
.contact-item.mail-icon img,
.contact-item.download-icon img {
  width: 100%;
  max-width: none;
}

/* Add responsive adjustments */
@media (max-width: 768px) {
  .contact-item {
    width: 32px;
    height: 32px;
  }

  #contact {
    bottom: 30px;
    left: 30px;
  }
}

@media (max-width: 480px) {
  .contact-item {
    width: 28px;
    height: 28px;
  }
}

/* Utility Classes */
.white {
  color: rgb(255, 255, 255);
}

.black {
  color: rgb(0, 0, 0);
}