* {
    box-sizing: border-box;
}


body {

    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: Arial, Helvetica, sans-serif;

    color: white;

    overflow-x: hidden;

    background: #000;

}


/* Background */

#background {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;


    background-image:
        linear-gradient(
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.70)
        ),
        url("background.jpg");


    background-size: cover;

    background-position: center;


    filter: blur(12px);

    transform: scale(1.1);


    z-index: -1;

}


/* Click to Enter */

#enter {

    position: fixed;

    inset: 0;


    background: black;


    display: flex;

    justify-content: center;

    align-items: center;


    cursor: pointer;


    z-index: 10;


    transition: opacity 1s ease;

}



#enter h1 {

    font-size: 36px;

    letter-spacing: 3px;


    animation: pulse 2s infinite;

}



#enter.fade-out {

    opacity: 0;

    pointer-events: none;

}



@keyframes pulse {

    50% {

        opacity: .45;

    }

}





/* Main card */

.container {

    position: relative;

    z-index: 2;


    width: 430px;

    max-width: 90vw;


    padding: 35px;


    background:
        rgba(255,255,255,.08);


    backdrop-filter: blur(15px);


    border-radius: 25px;


    text-align: center;


    box-shadow:
        0 0 50px rgba(0,0,0,.6);



    opacity: 0;


    transform: translateY(40px);


    transition: opacity 2s ease, transform 2s ease;

}



.container.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Logo */

.logo {

    width: 180px;

    height: 180px;


    object-fit: cover;


    border-radius: 50%;


    filter:
        drop-shadow(0 0 25px purple);


    animation: float 5s ease-in-out infinite;

}



@keyframes float {

    50% {

        transform: translateY(-15px);

    }

}




h2 {

    font-size: 34px;

    margin: 20px 0;

}





/* YouTube */

.youtube-box {

    background:
        rgba(0,0,0,.35);


    padding: 15px;


    border-radius: 18px;


    margin-bottom: 25px;

}



.youtube-box h3 {

    margin-top: 0;

}



.youtube-box iframe {

    width: 100%;


    height: 230px;


    border-radius: 12px;

}





/* Buttons */

.buttons {

    display: flex;


    flex-direction: column;


    gap: 12px;

}



.buttons a {

    padding: 15px;


    color: white;


    text-decoration: none;


    background:
        rgba(255,255,255,.1);


    border:
        1px solid rgba(255,255,255,.25);



    border-radius: 15px;


    transition: .3s ease;

}



.buttons a:hover {

    transform: scale(1.05);


    background:
        rgba(255,255,255,.25);


    box-shadow:
        0 0 25px purple;

}