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

body{
    font-family:'Outfit',sans-serif;
    background:#05050a;
    color:white;
    overflow-x:hidden;
}

.background-glow{
    position:fixed;
    inset:0;
    z-index:-1;

    background:
    radial-gradient(circle at top left,
    rgba(255,215,0,.18),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(255,140,0,.15),
    transparent 40%);
}

/* HERO */

.hero{
    text-align:center;
    padding:80px 20px;
}

.logo{
    width:170px;
    height:170px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #ffd700;

    padding:5px;

    background:#0d0d16;

    box-shadow:
        0 0 15px #ffd700,
        0 0 30px #ffb300,
        0 0 50px #ff8c00;

    transition:.4s ease;
}

.logo:hover{
    transform:scale(1.05);

    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #ffb300,
        0 0 70px #ff8c00,
        0 0 100px #ffd700;
}

.hero h1{
    margin-top:25px;
    font-size:3rem;
    color:white;

    text-shadow:
        0 0 10px #ffd700,
        0 0 25px #ffb300;
}

.subtitle{
    margin-top:15px;
    color:#cfcfe9;
}

/* EVENT CARDS */

.rules{
    max-width:1000px;
    margin:auto;
    padding:40px 20px;
}

.rule-card{
    background:#0d0d16;

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

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

    transition:.3s;

    box-shadow:
        0 0 20px rgba(255,215,0,.1);
}

.rule-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #ff8c00;
}

.rule-card h3{
    margin-bottom:10px;
    color:#ffd700;
}

/* MENU */

.menu-btn{
    position:fixed;
    top:20px;
    left:20px;

    width:55px;
    height:55px;

    border:none;

    border-radius:15px;

    background:#111118;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
        0 0 15px rgba(255,215,0,.3);

    transition:.3s;
}

.menu-btn:hover{
    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #ff8c00;
}

.sidebar{
    position:fixed;
    top:0;
    left:-300px;

    width:280px;
    height:100vh;

    background:#0b0b14;

    border-right:1px solid rgba(255,215,0,.2);

    transition:.4s;

    z-index:9998;
}

.sidebar.active{
    left:0;
}

.sidebar-header{
    text-align:center;
    padding:30px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-header img{
    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #ffd700;

    box-shadow:
        0 0 15px #ffd700;
}

.sidebar-header h3{
    color:white;
    margin-top:10px;
}

.sidebar a{
    display:block;
    padding:18px 25px;

    color:white;
    text-decoration:none;

    transition:.3s;
}

.sidebar a:hover{
    background:rgba(255,215,0,.15);
    padding-left:35px;
}

/* OVERLAY */

#overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);

    opacity:0;
    pointer-events:none;

    transition:.3s;

    z-index:9997;
}

#overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* MOVIMIENTO AL ABRIR MENU */

.hero,
main{
    transition:.4s ease;
}

body.menu-open .hero,
body.menu-open main{
    margin-left:280px;
}

/* RESPONSIVE */

@media(max-width:768px){

    body.menu-open .hero,
    body.menu-open main{
        margin-left:0;
    }

    .sidebar{
        width:260px;
    }
}