*{
    box-sizing: border-box;
  font-size: small;
}


.tube-border{
    background-image: url("../img/awge-border.png") ;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0; 
    pointer-events: none;
}

.effect {
    position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  background-size: 100% 100%;
    top: 0;
    left: 0; 
    pointer-events: none;
}

.distortion{
    background-image: url("../img/rvb-b58867-compressed-1344a5.jpg") ;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0; 
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .4;
    animation: 2s ease-in-out 1s infinite alternate distort;

}

@keyframes distort {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(1%);
  }
}


body{
    width: 97vw;
    height: 100vh;
    overflow: hidden;
}

.background{
  position: fixed;
  right: 0;
  bottom: -70vh;
  min-width: 100%;
  min-height: 100%;

}


    
.video-background {
    position: fixed; /* Fixes the container to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hides the video parts that overflow the container */
    z-index: -1000; /* Pushes the video behind all other content */
}

.video-background video {
    position: absolute; /* Positions the video relative to its container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the video element perfectly */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* **Key property**: scales video to cover container and crops evenly */
    width: auto;
    height: auto;
}



.newsletter{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
    position: relative;
    font-family: "Press Start 2P", system-ui;
    color: white;
    display: grid;
    align-items: center;
    gap: 5px;
    bottom: -70vh;
}


@media screen and (min-width: 1600px) {
    
    .newsletter{
        margin-top: 13vh;
    }

}


@media screen and (orientation:portrait) {
    
    #logo{
        width: 50%;
        padding-top: 18vh;
        padding-bottom: 15vh;
        }

    .newsletter{
    width: 50%;
    }
}

@media screen and (max-width: 1200px) and (orientation: landscape){
    
    .newsletter{
    width: 60%;
    }
    

    #logo{
    width: 30%;
    padding-top: 18vh;
    padding-bottom: 15vh;    }

}


@media screen and (max-width: 500px) {
    
    .newsletter{
    width: 70%;

}

}

#mail{
    margin: 0 auto;
    text-align: center;
}

#form{
    background-color: rgb(0, 0, 0);
    color: white;
    font-family: "Press Start 2P", system-ui;
    padding: 5px;
}

#send{
    width: 30%;
    margin: 0 auto;
    background-color: rgb(0, 0, 0);
    color: white;
    font-family: "Press Start 2P", system-ui;
    padding: 5px;
}

#logo{
    padding-top: 18vh;
    padding-bottom: 15vh;
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto;
}