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

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    background:#050018;
}

.hero{
    width:100%;
    min-height:100dvh;
    padding:40px 20px 60px;

    background:url("../images/bg.webp") no-repeat center top;
    background-size:cover;

    position:relative;

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

    overflow-x:hidden;
}
.logo{
    width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    transform: translateY(-40px);
}
.overlay{

    position:absolute;
    inset:0;

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

}

.content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:600px;

    text-align:center;
    color:white;

    margin:0 auto;
}

.content h1{

    font-size: 64px;
    margin-top: -80px;
    margin-bottom: 15px;

}

.content p{

    font-size:24px;

    margin-bottom:30px;

}

.menu-buttons{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}


.btn{
    display: block;
    
    width: 450px;
    max-width: calc(100% - 40px);
    padding: 15px 20px;
    border-radius: 50px;
    text-align: center;
    
    background: linear-gradient(135deg, #83023B, #FF00CC);
    color: white;
    text-decoration: none;
    transition: .3s;
}

.btn:hover{
    background: linear-gradient(135deg, #D900D9, #FF33CC);
}