body{
    padding:0;
    margin:0;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #000;
}

#wrapper{
    display: flex;
    width: 100vw;
    height: 100svh;
    background-color: #000;
    align-items: center;
    justify-content: center;
}

#video-container{
    position: absolute;
    top: 0svh;
    bottom: 0svh;
    left: 0vw;
    right: 0vw;
    opacity: 0;
    animation: video 10s ease forwards;
    animation-delay: 2s;
    overflow: hidden;
}

#bg-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#vignette{
    position: absolute;
    top: 0svh;
    bottom: 0svh;
    left: 0vw;
    right: 0vw;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 1) 100%
    );
}

#container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: reveal 4s ease forwards;
}

#title{
    font-size: 10svh;
    color: #fff;
    font-family: "Libre Barcode 39 Text", system-ui;
    font-weight: 400;
    font-style: normal;
}

#subtitle{
    font-size: 2svh;
    letter-spacing: 2.2svh;
    margin-left: 2.2svh;
    color: #fff;
    margin-top: -0.34svh;
}

#copyright{
    position: absolute;
    bottom: 5px;
}

#beta-button{
    position: absolute;
    display: flex;
    font-size: 2svh;
    width: 18svh;
    max-width: 80vw;
    height: 1svh;
    justify-content: center;
    align-items: center;
    bottom: 20svh;
    padding: 2svh;
    border-radius: 5svh;
    color: #000;
    opacity: 0;
    background-color: #eee;
    animation: moveup 4s ease forwards;
    animation-delay: 0.5s;
    cursor: pointer;
    transition: padding 0.3s ease, margin 0.3s ease, background-color 0.3s ease 0.2s;
}

#beta-button:hover{
    background-color: #fff;
    padding:2.5svh;
    margin-bottom: 0.5svh;
}

#prompt{
    user-select: none;
}

#email-container{
    display: flex;
    flex:1;
    opacity:0;
    gap: 10px;
    display: none;        
    font-size: 2.5svh;
    align-items: center;
    
}

#email-input{
    display: flex;
    flex:1;
    background-color: #eee;
    outline: none;
    border: none;
    transition: background-color 0.3s ease 0.2s;
    font-size: 2.5svh;
}

#beta-button:hover #email-input{
    background-color: #fff;
}

#submit-button{
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

#submit-button:hover{
    opacity: 1;
}

#confirmation{
    opacity: 0;
    display: none;
}

#invalid-message{
    position: absolute;
    bottom: 31svh;
    color: #eee;
    font-size: 2svh;
    opacity: 0;
}

#contact{
    position: absolute;
    bottom: 20px;
    color: #eee;
    align-items: center;
    animation: reveal 4s ease forwards;
    animation-delay: 2s;
    opacity: 0;
}

#contact-email{
    text-decoration: none;    
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #eee;
}

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

@keyframes video{
    from {opacity: 0;}
    to {opacity: 0.2;}
}

@keyframes moveup {
    from {bottom: 20svh; opacity: 0; padding:1svh}
    to {bottom: 35svh; opacity: 1; padding:2svh}
}