:root{

    --fucsia:#ff0099;
    --fucsiaSoft:#ffe3f3;

    --morado:#4c3370;
    --moradoSoft:#efe4ff;

    --texto:#170025;
    --texto2:#4c3370;

    --bg:#f7f7fa;

    --surface:#ffffff;

}

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

body{

    overflow-x:hidden;

    font-family:'Plus Jakarta Sans',sans-serif;

    color:var(--texto);

    background:
    radial-gradient(circle at top left,#ffe8f6 0%,transparent 35%),
    radial-gradient(circle at bottom right,#efe3ff 0%,transparent 35%),
    #ffffff;

    cursor:auto !important;

    
}

/* =========================================================
   LINKS PAGE
========================================================= */


.links{
    position:relative;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem 1.5rem;
    overflow:hidden;
}

/* =========================================================
   BACKGROUND
========================================================= */

.links::before,
.links::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.links::before{
    width:350px;
    height:350px;
    left:-180px;
    top:-180px;

    background:
    radial-gradient(circle,
    rgba(255,0,153,.18),
    transparent 70%);
}

.links::after{
    width:320px;
    height:320px;;
    right:-150px;
    bottom:-150px;

    background:
    radial-gradient(circle,
    rgba(76,51,112,.15),
    transparent 70%);
}
.links-content{

    width:100%;
    max-width:460px;

    position:relative;
    z-index:5;

    text-align:center;

    padding:1rem;

    border-radius:32px;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        0 20px 60px rgba(76,51,112,.12),
        0 0 0 1px rgba(255,255,255,.45) inset;
}

.links-content::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,0,153,.08),
        transparent 35%,
        rgba(123,47,255,.05)
    );

    pointer-events:none;
}
/* =========================================================
   PHOTO
========================================================= */

.profile{

    width:300px;

    display:block;

    margin:-15px auto .8rem;

    max-width:90%;


    object-fit:contain;

    filter:
    drop-shadow(0 20px 45px rgba(76,51,112,.18));

    user-select:none;
    pointer-events:none;
}

/* =========================================================
   TITLE
========================================================= */

.links h1{

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size:3rem;

    font-weight:800;

    margin-bottom:.8rem;

    margin-top:.4rem;

    color:var(--morado);

    line-height:1;
}

.links h1 span{

    background:var(--fucsia);

    -webkit-background-clip:text;
    color:transparent;
}

.subtitle{

    color:var(--texto2);

    line-height:1.7;

    font-size:1rem;

    margin-bottom:2.1rem;
}

/* =========================================================
   BUTTONS
========================================================= */

.links-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-bottom: 2rem;
}

.link-item{

    background:#fff;

    border-radius:18px;

    text-decoration:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.25rem;

    color:inherit;

    border:1px solid rgba(255,20,147,.08);

    box-shadow:
    0 12px 30px rgba(76,51,112,.08);

    backdrop-filter:blur(8px);

    transition:.28s ease;
}

.link-item:hover{

    transform:translateY(-4px) scale(1.02);

    box-shadow:
    0 18px 38px rgba(255,20,147,.16);

    border-color:
    rgba(255,20,147,.25);
}

.link-left{

    display:flex;

    align-items:center;

    gap:1rem;
}

.icon{

    width:54px;

    height:54px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.2rem;

    background:var(--fucsia);

    box-shadow:
        0 12px 24px rgba(255,0,140,.28);

    flex-shrink:0;

    transition:.25s;
}

.link-left strong{

    display:block;

    text-align:left;

    font-size:1.1rem;

    color:var(--fucsia);

    margin-bottom:.25rem;
}

.link-left span{

    display:block;

    text-align:left;

    color:var(--morado);

    font-size:1.1rem;

    font-weight: 500;
}

.link-item>.fa-chevron-right{

    color:var(--morado);

    font-size:1.1rem;

    transition:.25s;
}

.link-item:hover>.fa-chevron-right{

    transform:translateX(6px);
}

.link-item:hover{

    transform:translateY(-6px);

    background:#fff;

    box-shadow:
        0 18px 45px rgba(123,47,255,.18);
}

.link-item:hover .icon{

    transform:scale(1.08);

}

/* =========================================================
   FOOT
========================================================= */

.social{

    margin-top:2rem;

    font-size:1rem;

    color:var(--morado);

    font-weight:800;

    letter-spacing:.5px;
}

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

@media(max-width:600px){

    .links{

        min-height:100dvh;
        padding:1rem 1rem;
    }

    .profile{

        width:180px;

        margin-top:-20px;

        margin:-10px auto .8rem;
    }

    .links h1{

        font-size:2.45rem;
    }

    .subtitle{

        font-size:.95rem;

        margin-bottom:2rem;
    }

    .link-item{

        padding:.95rem 1rem;
    }

    .icon{

        width:44px;

        height:44px;

        font-size:1rem;
    }

    .link-left strong{

        font-size:1rem;
    }

    .link-left span{

        font-size:1rem;

        font-weight: 600;
    }

}

/* =========================================================
   DESKTOP CURSOR
========================================================= */

.links,
.links *{

    cursor:auto !important;
}