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

body{
height:100vh;
background:rgb(10, 10, 10);
font-family:'Montserrat',sans-serif;
overflow:hidden;
}


/* Mittiger Name */

.center-name{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

font-size:22px;
font-weight:200;

color:#7f7f7f;

letter-spacing:1px;
}


/* Menübereich */

.menu-container{

position:fixed;

bottom:50px;
right:50px;

display:flex;
align-items:center;
gap:30px;
}
/* Start unsichtbar */

.center-name,

.menu-container{

    opacity:0;

    animation:fadeIn 2s ease forwards;

    animation-delay:1s;

}

/* Einblendung */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* Menüpunkte */

.menu-items{

display:flex;
gap:25px;

opacity:0;

transform:translateX(50px);

transition:1s;
pointer-events:none;

}


.menu-items.active{

opacity:1;

transform:translateX(0);

pointer-events:auto;

}


.menu-items a{

text-decoration:none;
color:#9c9c9c;

font-size:10px;

letter-spacing:1px;

transition:.4s;
}

.menu-items a:hover{

color:white;

}


/* Hamburger */

.menu-button{

display:flex;
flex-direction:column;

gap:3px;

cursor:pointer;
}

.menu-button span{

width: 20px;
height:2px;

background:#bdbdbd;

transition:.4s;
}

.menu-button:hover span{

background:white;
width:35px;
}