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

:root{
    --title:#B1CCFF;
    --bio:#1F7CEE;

    --card1:rgba(75, 146, 233, 0.14);

    --cardText:#B1CCFF;

    /* Cursor config */
    --cursor-size: 54;
    --cursor-color-default: :#B1CCFF;
    --cursor-color-hover: #1F7CEE;
    --cursor-ring-opacity: 0.6;
    --cursor-dot-opacity: 0.7;
}

body{
    min-height:100vh;

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

    padding:40px 40px;

    background: #03060D;

    font-family:Helvetica, Arial, sans-serif;
   
    overflow-x:hidden;

    cursor:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="soft"><feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/></filter></defs><circle cx="24" cy="24" r="8.5" fill="none" stroke="%23B1CCFF" stroke-width="1.2" opacity="0.8" filter="url(%23soft)"/><circle cx="24" cy="24" r="3.5" fill="%23B1CCFF" opacity="0.7"/></svg>') 24 24, auto;
}

/* Disable text and image selection to avoid accidental highlighting on click */
body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img{
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
}

a, button {
    cursor:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="soft"><feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/></filter></defs><circle cx="24" cy="24" r="9" fill="none" stroke="%23B1CCFF" stroke-width="1.3" opacity="0.8" filter="url(%23soft)"/><circle cx="24" cy="24" r="3.5" fill="%23B1CCFF" opacity="0.8"/></svg>') 24 24, auto;
}

.card:hover {
    cursor:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="soft"><feGaussianBlur in="SourceGraphic" stdDeviation="1.2"/></filter></defs><circle cx="24" cy="24" r="10" fill="none" stroke="%2362A9FF" stroke-width="1.5" opacity="0.8" filter="url(%23soft)"/><circle cx="24" cy="24" r="4" fill="%2362A9FF" opacity="0.9"/></svg>') 24 24, auto;
}
/* Анимированный шум */

#noise{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:-1;

    opacity:.75;
    filter: blur(1px);
    mix-blend-mode:normal;

    pointer-events:none;

}

.container{
    width:100%;
    max-width:1200px;
}

.layout{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:56px;
}

.profile{
    width:420px;
    flex-shrink:0;

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

.avatar{
    width:220px;
    height:220px;

    border-radius:32px;
    overflow:hidden;

    margin-bottom:20px;

    /* border:3px solid rgba(31, 124, 238,.25); */

    box-shadow:
        0 24px 60px rgba(0,0,0,.45);
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

h1{
    font-family:Helvetica, Arial, sans-serif;
    font-size:35px;
    font-weight:700;
    line-height:1;

    color:var(--title);

    /* margin-bottom:10px; */

    letter-spacing:-0.04em;
}

.nickname{
    font-family:Helvetica, Arial, sans-serif;
    
    font-size:16px;
    /* line-height:1.7; */

    color:var(--bio);

    /* white-space:pre-line; */
    /* margin-top: 10px; */
    font-weight: bold;
    letter-spacing: 5px;
}
.bio{
    font-family:Moderustic, sans-serif;
    font-size:16px;
    /* line-height:1.7; */

    color:var(--title);

    /* white-space:pre-line; */
    margin-top: 10px;
    font-style:italic;
}

.grid{
    width:100%;
    max-width:600px;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:20px;
}

.card{
    position:relative;
    min-height:170px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:28px;

    border-radius:28px;

    text-decoration:none;

    color:var(--cardText);

    backdrop-filter:blur(14px);

    border:2px solid rgba(255,255,255,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        border-width .25s ease;
}

.card-badge{
    position:absolute;
    top:16px;
    right:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.0);
    color:var(--cardText);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    /* backdrop-filter:blur(12px); */
}

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

    border:2px solid var(--cardText);

    /* box-shadow:
        0 16px 40px rgba(0,0,0,.30); */
}

.card-title{
    font-size:22px;
    font-weight:700;

    margin-bottom:8px;
}

.card-subtitle{
    font-family:Moderustic, sans-serif;
    font-size:15px;
    font-weight: bold;
    font-style: italic;
    opacity:.85;
    color:var(--bio);
    text-shadow: black 1px 1px 15px;
}

.card-footnote{
    position:absolute;
    bottom:-18px;
    left:8px;
    right:8px;
    font-size:10px;
    color:rgba(77, 133, 229, 0.4);
    font-style:italic;
    line-height:1.2;
    text-shadow: none;
}

.card1{
    background:var(--card1);
}

.card2{
    background:var(--card1);
}

.card3{
    background:var(--card1);
}

.card4{
    background:var(--card1);
}

@media (max-width:1150px){

    .layout{
        flex-direction:column;
        gap:40px;
    }

    .profile{
        width:100%;

        align-items:center;
        text-align:center;
    }

    .grid{
        width:100%;
        max-width:680px;

        grid-template-columns:repeat(2,1fr);
    }

    h1{
        font-size:42px;
    }
}

@media (max-width:780px){

    .layout{
        gap:36px;
    }

    .avatar{
        width:190px;
        height:190px;
    }

    .grid{
        max-width:100%;
        gap:18px;
        grid-template-columns:repeat(2,1fr);
    }

    .card{
        min-height:150px;
        padding:24px;
    }

    h1{
        font-size:38px;
    }

    .nickname,
    .bio{
        font-size:15px;
    }

    .card-title{
        font-size:20px;
    }

    .card-subtitle{
        font-size:14px;
    }
}

@media (max-width:520px){

    .layout{
        gap:28px;
    }

    .avatar{
        width:170px;
        height:170px;
    }

    .grid{
        max-width:100%;
        gap:14px;
        grid-template-columns:repeat(2,1fr);
    }

    .card{
        min-height:140px;
        padding:22px;
    }

    h1{
        font-size:34px;
    }

    .nickname,
    .bio{
        font-size:14px;
    }

    .card-title{
        font-size:18px;
    }

    .card-subtitle{
        font-size:13px;
    }
}

@media (max-width:460px){

    .grid{
        grid-template-columns:1fr;
        justify-items:center;
        gap:16px;
    }

    body{
        padding:24px 14px;
    }

    .card{
        width:100%;
        max-width:320px;
        min-height:130px;
        padding:20px;
    }

    h1{
        font-size:32px;
    }

    .nickname,
    .bio{
        font-size:13px;
    }

    .card-title{
        font-size:17px;
    }

    .card-subtitle{
        font-size:12px;
    }
}

@media (max-width:320px){

    body{
        padding:20px 16px;
    }

    .avatar{
        width:150px;
        height:150px;
    }

    .grid{
        gap:12px;
    }

    h1{
        font-size:30px;
    }

    .bio{
        font-size:13px;
    }

    .card{
        width:100%;
        max-width:280px;
        min-height:110px;
        padding:14px;
    }

    .card-title{
        font-size:16px;
    }

    .card-subtitle{
        font-size:12px;
    }
}