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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


/* ================= HEADER ================= */

header{
    background:linear-gradient(
        135deg,
        #e0157a,
        #ff4fa3
    );

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    position:sticky;
    top:0;

    z-index:1000;

    padding:20px 20px 0;
}


.logo{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:14px;

    text-decoration:none;
}


.logo img{
    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #ffd700;
}


.logo-text{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.logo-text > span{
    font-size:40px;

    font-weight:700;

    color:#ffd700;

    letter-spacing:1px;

    text-shadow:
        0 1px 2px rgba(0,0,0,.25);
}


.logo-text > span b{
    color:#ffffff;
}


.insta-link{
    display:flex;

    align-items:center;

    gap:6px;

    text-decoration:none;

    color:#ffd700;

    font-size:15px;

    font-weight:600;

    transition:.3s;
}


.insta-link:hover{
    color:#ffffff;
}


.insta-icon{
    width:20px;
    height:20px;

    flex-shrink:0;

    color:#ffd700;
}


/* ================= NAV ================= */

.menu{
    width:calc(100% + 40px);

    margin:0 -20px;

    background:#111;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    padding:8px 10px;
}


.menu a{
    display:inline-flex;

    align-items:center;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

    white-space:nowrap;

    margin:3px 12px;
}


.menu a.active{
    color:#ffd700;
}


.menu a:hover{
    color:#ff4fa3;
}


.nav-icon{
    width:13px;
    height:13px;

    flex-shrink:0;

    margin-right:4px;
}


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

footer{
    background:#fbdce7;

    text-align:center;

    padding:20px;
}


footer p{
    font-size:15px;

    color:#6b0f2b;
}


footer a{
    color:#e0157a;

    text-decoration:none;

    font-weight:600;
}


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

@media (max-width:768px){

    header{
        padding:14px 12px 0;
    }


    .logo{
        gap:10px;

        margin-bottom:10px;
    }


    .logo img{
        width:82px;
        height:82px;
    }


    .logo-text{
        gap:5px;
    }


    .logo-text > span{
        font-size:29px;
    }


    .insta-link{
        font-size:13px;
    }


    .insta-icon{
        width:18px;
        height:18px;
    }


    .menu{
        width:calc(100% + 24px);

        margin:0 -12px;

        padding:6px 8px;
    }


    .menu a{
        font-size:12px;

        margin:3px 7px;
    }


    .nav-icon{
        width:12px;
        height:12px;
    }

}