*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:sans-serif;
}

/* Background Video */

#bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
}

/* Dark Overlay */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(1px);
    z-index:-2;
}

/* Main Layout */

.container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-55%);

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Logo */

.logo{
    width:360px;
    height:auto;
    margin-bottom:20px;

    filter:
        brightness(2)
        drop-shadow(0 0 12px rgba(255,255,255,.45))
        drop-shadow(0 0 35px rgba(255,255,255,.25))
        drop-shadow(0 0 70px rgba(255,255,255,.15));

    animation:
        logoFloat 6s ease-in-out infinite,
        pulseGlow 4s ease-in-out infinite;
}

/* Buttons */

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:110px;
}

.buttons a{
    display:block;
}

.buttons img{
    width:220px;
    cursor:pointer;
    transition:transform .35s ease, filter .35s ease;

    filter:
        brightness(1.08)
        drop-shadow(0 0 12px rgba(255,255,255,.35))
        drop-shadow(0 0 28px rgba(255,255,255,.18));

    animation:
        buttonFloat 5s ease-in-out infinite,
        pulseGlow 4s ease-in-out infinite;
}

/* Different timing for each button */

.buttons a:nth-child(1) img{
    animation-delay:0s;
}

.buttons a:nth-child(2) img{
    animation-delay:1.2s;
}

.buttons a:nth-child(3) img{
    animation-delay:2.4s;
}

/* Hover */

.buttons img:hover{

    transform:
        translateY(-8px)
        scale(1.08);

    filter:
        brightness(1.45)
        drop-shadow(0 0 18px rgba(255,255,255,.85))
        drop-shadow(0 0 45px rgba(255,255,255,.45))
        drop-shadow(0 0 70px rgba(255,255,255,.25));
}

/* Animations */

@keyframes logoFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

}

@keyframes buttonFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-5px);
    }

}

@keyframes pulseGlow{

    0%,100%{

        filter:
            brightness(1)
            drop-shadow(0 0 12px rgba(255,255,255,.35))
            drop-shadow(0 0 28px rgba(255,255,255,.18));

    }

    50%{

        filter:
            brightness(1.25)
            drop-shadow(0 0 20px rgba(255,255,255,.75))
            drop-shadow(0 0 50px rgba(255,255,255,.35));

    }

}

/* Mobile */

/* Mobile */

@media (max-width:900px){

    .container{
        width:100%;
        padding:0 20px;
    }

    .logo{
        width:200px;   /* was 180px */
        margin-bottom:35px;
    }

    .buttons{
        flex-direction:column;
        gap:30px;
    }

    .buttons img{
        width:220px;   /* was 200px */
    }

}