* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    
@font-face {
    font-family: monasans-semiexp-bold; 
    src: url(fonts/MonaSans-Bold.otf);
    }
    
  @font-face {
    font-family: monasans-semiexp-regular; 
    src: url(fonts/MonaSansSemiExpanded-BoldItalic.otf);
    }

    body {
      font-family: Arial, sans-serif;
      background: #1a1a1a;
      color: white;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .bg-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;   /* fills the screen without distortion */
      z-index: -1;         /* keep it behind everything else */
    }

    .banner-container {
      position: relative;
      width: 100vw;
      height: clamp(60px, 10vw, 120px);
      overflow: hidden;
      margin: 20px calc(-50vw + 50%);
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6), 0 6px 20px 0 rgba(0,0,0,0.58);
    }

    .noise-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /*background-color: white;  Replace later */
      background-image: url("img/bg-noise-1.png");
      background-size: cover;
      background-position: center;
      animation: hueCycle 8s linear infinite;
      z-index: 1;
      
    }
@keyframes hueCycle {
  0%   { -webkit-filter: hue-rotate(0deg) brightness(2.1); filter: hue-rotate(0deg) brightness(2.1); }
  100% { -webkit-filter: hue-rotate(360deg) brightness(2.1); filter: hue-rotate(360deg) brightness(2.1); }
}


    .track-wrapper {
      display: flex;
      width: 200%;
      animation: scrollLeft 20s linear infinite;
      will-change: transform;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 10;
    }

    .icons-track {
      display: flex;
      width: 50%;
      height: 100%;
      align-items: center;
    }

    .icon-item {
      flex-shrink: 0;
      width: clamp(60px, 8vw, 100px);
      height: clamp(60px, 8vw, 100px);
      margin: 0 clamp(8px, 1vw, 10px);
      background: transparent;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(16px, 3vw, 32px);
      transition: transform 0.3s ease;
    }

    .icon-item:hover {
      transform: scale(1.2);
    }

    .icon-item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 50%;
    }

    @keyframes scrollLeft {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    @media (max-width: 768px) {
      .icon-item {
        width: clamp(30px, 8vw, 60px);
        height: clamp(30px, 8vw, 60px);
      }
    }
input::placeholder {
  font-family:  monasans-semiexp-bold;
}
  
input[type=email] {
  margin: 20px;
  width: auto;
  color: white;
  border: 1px solid #ff9933;
  border-radius: 2px;
  background-color: black;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6), 0 6px 20px 0 rgba(0,0,0,0.58);
}  

button{
  font-family: monasans-semiexp-regular;
  padding: 8px 10px;
  border-radius: 3px;
  background-color: #ff9933;
  color: black;
  border: 2px solid Black;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6), 0 6px 20px 0 rgba(0,0,0,0.58);
  }
  
  a:link {
  padding: 8px 10px;
  font-family: monasans-semiexp-regular;
  color: #ff9933;
}

a:visited {
  color: #696969;
}