:root{
 --black:#0d0d0d;
 --purple:#6a0dad;
 --purple2:#8a2be2;
 --gold:#d4af37;
 --gold2:#ffd700;
 --white:#fff;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    min-height:100%;
}
body{
    font-family:Arial,sans-serif;
    min-height:100vh;
    background:linear-gradient(135deg,var(--black),var(--purple));
    color:var(--white);
    line-height:1.6;
}
nav{
    background:#000;
    padding:15px 20px;
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 18px;
}
.logo{
    font-size:24px;
    font-weight:800;
    letter-spacing:2px;
    color:#fff;
}
.logo span{
    color:var(--purple);
    text-shadow:0 0 10px var(--purple);
}
.nav-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.nav-menu-btn{
    display:none;
}
.nav-links{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-left:auto;
}
nav a{
    color:var(--gold2);
    text-decoration:none;
    font-weight:bold;
    white-space:nowrap;
}
nav a:hover{
    color:white
}
.container{
    max-width:1100px;
    margin:auto;
    padding:40px 20px
}
h1{
    font-size:clamp(2rem, 6vw, 3.5rem);
    line-height:1.15;
}
h2{
    font-size:clamp(1.6rem, 5vw, 2.4rem);
    line-height:1.2;
    margin-bottom:20px;
}
h1,h2{
    color:var(--gold2)
}
.hero{
    text-align:center;
    padding:70px 20px
}
.card{
    background:rgba(0,0,0,.45);
    border:2px solid var(--gold);
    padding:20px;
    border-radius:8px;
    margin:15px 0;
    overflow-wrap:anywhere;
}
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    align-items:start;
}
.gallery img{
    width:100%;
    height:auto;
    border:3px solid var(--gold);
    border-radius:8px
}
footer{
    text-align:center;
    padding:20px;
    margin-top:40px;
    border-top:2px solid var(--gold)
}
.profile{
    width:min(280px, 75vw);
    height:min(280px, 75vw);
    border-radius:50%;
    object-fit:cover;
    border:6px solid #ffd700;
    padding:5px;
    background:linear-gradient(45deg,#ffd700,#8a2be2);
    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #8a2be2;
    margin-bottom:25px;
}
H3{
    color: green;
}

.profile2{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #ffd700;
    padding:5px;
    background:linear-gradient(45deg,#ffd700,#8a2be2);
    box-shadow:
        0 0 20px #ffd700,
        0 0 40px #8a2be2;
    margin-bottom:25px;
}

.contact-info p{
    font-size:1.1rem;
    margin:15px 0;
}

.contact-info a{
    color:#ffd700;
    text-decoration:none;
}

.contact-info a:hover{
    color:white;
}

.isa{
    color: rgb(7, 231, 48);
}
.tes{
    color: blue;
}
.gol{
    color: goldenrod;
}

@media (max-width:700px){
    nav{
        justify-content:space-between;
        flex-wrap:nowrap;
        padding:12px 14px;
        min-height:56px;
    }

    .logo{
        font-size:20px;
    }

    .nav-menu-btn{
        width:40px;
        height:36px;
        border:1px solid rgba(255,215,0,.5);
        border-radius:6px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        cursor:pointer;
        background:rgba(255,215,0,.08);
        margin-left:auto;
    }

    .nav-menu-btn span{
        width:20px;
        height:2px;
        background:var(--gold2);
        border-radius:2px;
        transition:.25s ease;
    }

    .nav-links{
        position:fixed;
        top:0;
        left:0;
        width:min(280px, 78vw);
        height:100vh;
        padding:72px 22px 24px;
        background:#050505;
        border-right:2px solid var(--gold);
        box-shadow:12px 0 30px rgba(0,0,0,.45);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:8px;
        transform:translateX(-105%);
        transition:transform .25s ease;
        z-index:20;
    }

    .nav-links a{
        font-size:1rem;
        padding:12px 10px;
        border-bottom:1px solid rgba(255,215,0,.2);
    }

    .nav-toggle:checked ~ .nav-links{
        transform:translateX(0);
    }

    .nav-toggle:checked + .nav-menu-btn{
        position:fixed;
        top:12px;
        right:14px;
        z-index:30;
    }

    .nav-toggle:checked + .nav-menu-btn span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .nav-toggle:checked + .nav-menu-btn span:nth-child(2){
        opacity:0;
    }

    .nav-toggle:checked + .nav-menu-btn span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .container{
        padding:28px 14px;
    }

    .hero{
        padding:42px 10px;
    }

    .hero p{
        font-size:1rem;
    }

    .card{
        padding:16px;
    }

    .gallery{
        grid-template-columns:1fr;
        gap:16px;
    }

    footer{
        margin-top:24px;
        padding:16px 12px;
        font-size:.9rem;
    }
}

@media (max-width:420px){
    .profile{
        width:min(220px, 72vw);
        height:min(220px, 72vw);
        border-width:4px;
        box-shadow:
            0 0 14px #ffd700,
            0 0 28px #8a2be2;
    }

    .profile2{
        width:86px;
        height:86px;
        border-width:4px;
    }
}