/* ===========================
   FEOBY
   FULLSCREEN DARK RED DESIGN
=========================== */


:root {

    --background:#050000;

    --glass:rgba(255,255,255,.06);

    --logo-glow:0;

}



/* ===========================
   RESET
=========================== */


* {

    margin:0;
    padding:0;

    box-sizing:border-box;

    user-select:none;

    -webkit-tap-highlight-color:transparent;

}



html,
body {


    width:100%;

    height:100%;


    overflow:hidden;

    position:fixed;


}




body {


    width:100vw;

    height:100vh;


    overflow:hidden;


    font-family:"Poppins",sans-serif;


    color:white;


    background:#050000;


    touch-action:none;


}







/* ===========================
   BACKGROUND
=========================== */


.background {


    position:fixed;

    inset:0;


    background:

    url("images/background.jpg")

    center/cover no-repeat;



    transform:scale(1.08);


    z-index:0;


}







/* ===========================
   OVERLAY
=========================== */


.overlay {


    position:fixed;

    inset:0;


    background:

    linear-gradient(

        rgba(0,0,0,.85),

        rgba(50,0,0,.90)

    );


    backdrop-filter:blur(5px);


    z-index:1;


}








/* ===========================
   PARTICLES
=========================== */


.particles {


    position:fixed;


    inset:0;


    overflow:hidden;


    pointer-events:none;


    z-index:2;


}



.particle {


    position:absolute;


    border-radius:50%;


    background:

    rgba(255,60,40,.75);



    box-shadow:

    0 0 8px rgba(255,0,0,.8),

    0 0 20px rgba(180,0,0,.5);


}








/* ===========================
   CURSOR LIGHT
=========================== */


.cursor-light {


    position:fixed;


    width:220px;

    height:220px;


    border-radius:50%;


    pointer-events:none;


    background:


    radial-gradient(

        circle,

        rgba(255,40,40,.13),

        rgba(120,0,0,.04),

        transparent 70%

    );


    filter:blur(35px);


    z-index:3;


}







/* ===========================
   MAIN CONTENT
=========================== */


.hero {


    width:100%;


    height:100vh;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;



    position:relative;


    z-index:10;


}








/* ===========================
   LOGO
=========================== */


.logo-area {


    position:relative;


    width:min(520px,75vw);


    display:flex;


    justify-content:center;


    align-items:center;


    animation:

    floatingLogo 8s ease-in-out infinite;


}



.logo {


    width:100%;


    position:relative;


    z-index:12;



    filter:


    drop-shadow(

        0 0 calc(15px + (var(--logo-glow) * 45px))

        rgba(255,20,20,.8)

    );


}





.logo-aura {


    position:absolute;


    inset:-90px;


    pointer-events:none;


    z-index:11;



    background:


    radial-gradient(

        circle,

        rgba(

        255,

        0,

        0,

        calc(.15 + var(--logo-glow) * .35)

        ),


        transparent 65%

    );



    filter:

    blur(

    calc(40px + var(--logo-glow) * 30px)

    );


}






@keyframes floatingLogo {


    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-12px);

    }


}








/* ===========================
   BUTTONS
=========================== */


.buttons {


    margin-top:35px;


    width:min(450px,90vw);



    display:flex;


    flex-direction:column;


    gap:15px;


    z-index:20;


}





.button {


    height:62px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:14px;



    color:white;


    text-decoration:none;


    font-size:17px;


    font-weight:600;



    background:

    var(--glass);



    border:

    1px solid rgba(255,255,255,.12);



    border-radius:18px;



    backdrop-filter:blur(15px);



    overflow:hidden;



    transition:.25s ease;



}



.button i {


    font-size:23px;

}



.button:hover {


    transform:scale(1.04);



    background:

    rgba(120,0,0,.35);



    box-shadow:


    0 0 35px rgba(255,0,0,.45);


}








.button::before {


    content:"";


    position:absolute;


    left:-120%;


    width:60%;


    height:100%;



    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );



    transform:skewX(-20deg);


}



.button:hover::before {


    animation:

    reflection .7s ease;


}




@keyframes reflection {


    from {

        left:-120%;

    }


    to {

        left:140%;

    }


}








/* ===========================
   FOOTER
=========================== */


footer {


    position:fixed;


    bottom:15px;


    width:100%;


    display:flex;


    justify-content:center;


    z-index:30;


}




.impressum {


    display:flex;


    align-items:center;


    gap:8px;


    padding:8px 15px;



    color:#888;


    text-decoration:none;


    border-radius:12px;


}



.impressum:hover {


    color:white;


    background:

    rgba(120,0,0,.25);


}








/* ===========================
   MOBILE
=========================== */


@media(max-width:600px){



    .logo-area {

        width:70vw;

    }




    .buttons {


        width:85vw;


        margin-top:25px;


        gap:12px;


    }





    .button {


        height:55px;


        font-size:15px;


    }




    footer {


        bottom:8px;

    }



}