:root{
    --bg:#eef0ec;
    --text:#151515;
    --muted:#555;
    --yt:#e37ad5;
    --x:#cfc4ff;
}

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

body{
    min-height:100vh;
    background-color:var(--bg);

    background-image:
        repeating-radial-gradient(
            circle at 20% 20%,
            transparent 0 8px,
            rgba(0,0,0,0.03) 8px 10px
        );
        
    font-family: Inter, system-ui, sans-serif;
    color:var(--text);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.container{
    max-width:650px;
    width:100%;
    text-align:center;
}

h1{
    font-size:clamp(3rem,8vw,5rem);
    font-weight:900;
    margin-bottom:30px;
    letter-spacing:-2px;
}

.profile-pic{
    width:160px;
    height:160px;
    border-radius:50%;
    border:4px solid #111;
    object-fit:cover;
    margin-bottom:30px;
}

.profile-pic-placeholder{
    width:160px;
    height:160px;
    border-radius:50%;
    border:4px solid #111;
    margin:0 auto 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ddd;
    font-size:0.95rem;
    color:#666;
}

.tagline{
    font-size:1.7rem;
    margin-bottom:18px;
}

.age{
    font-size:1.5rem;
    color:var(--muted);
    margin-bottom:35px;
}

ul{
    list-style-position:inside;
    text-align:left;
    max-width:520px;
    margin:0 auto;
}

li{
    margin:18px 0;
    line-height:1.6;
    font-size:1.15rem;
}

.socials{
    margin-top:45px;
    display:flex;
    justify-content:center;
    gap:22px;
}

.social{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:2rem;
    font-weight:700;
    color:black;
    border:3px solid black;
    transition:.2s ease;
}

.social:hover{
    transform:translateY(-4px);
}

.youtube{
    background:var(--yt);
}

.twitter{
    background:var(--x);
}

.footer-text{
    margin-top:45px;
    font-size:1.5rem;
}

@media (max-width:600px){

    h1{
        font-size:3rem;
    }

    .profile-pic,
    .profile-pic-placeholder{
        width:130px;
        height:130px;
    }

    li{
        font-size:1rem;
    }

    .social{
        width:75px;
        height:75px;
    }
}

body::before,
body::after{
    content:"";
    position:fixed;
    inset:-100px;
    pointer-events:none;
    z-index:-2;
}

body::before{
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0 60px,
            rgba(0,0,0,0.025) 60px 66px
        );
    animation:bgFloat1 40s linear infinite;
}

body::after{
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 80px,
            rgba(0,0,0,0.015) 80px 86px
        );
    animation:bgFloat2 55s linear infinite;
}

@keyframes bgFloat1{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(120px,60px);
    }
}

@keyframes bgFloat2{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(-100px,80px);
    }
}

.cursor-dot{
    position:fixed;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#111;

    pointer-events:none;
    z-index:9999;

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

.cursor-frame{
    position:fixed;
    pointer-events:none;
    z-index:9998;

    opacity:0;
    transition:
        width .2s ease,
        height .2s ease,
        opacity .2s ease;
}

.cursor-frame.active{
    opacity:1;
}

.corner{
    position:absolute;
    width:12px;
    height:12px;
}

.corner:nth-child(1){
    top:0;
    left:0;
    border-top:2px solid #111;
    border-left:2px solid #111;
}

.corner:nth-child(2){
    top:0;
    right:0;
    border-top:2px solid #111;
    border-right:2px solid #111;
}

.corner:nth-child(3){
    bottom:0;
    left:0;
    border-bottom:2px solid #111;
    border-left:2px solid #111;
}

.corner:nth-child(4){
    bottom:0;
    right:0;
    border-bottom:2px solid #111;
    border-right:2px solid #111;
}

body{
    cursor:none;
}

a,
li,
h1,
.tagline,
.footer-text{
    cursor:none;
}