body{
    background:
    linear-gradient(
        135deg,
        #07111f 0%,
        #101c2f 50%,
        #07111f 100%
    );
    font-family:'Libre Baskerville', serif;
    color:#ffffff;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 15px;
    overflow-x:hidden;
}

/* =========================
   CONTAINER
========================= */

.container{
    width:100%;
    max-width:460px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:34px;
    padding:38px 28px;
    box-shadow:
    0 25px 60px rgba(0,0,0,.35);
    position:relative;
    overflow:hidden;
}

.container::before{
    content:'';
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(199,154,58,.15);
    top:-120px;
    right:-120px;
    z-index:0;
}

.container::after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(240,207,114,.08);
    bottom:-90px;
    left:-90px;
    z-index:0;
}

.container > *{
    position:relative;
    z-index:2;
}

/* =========================
   LOGO
========================= */

.logo-img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    background:#ffffff;
    padding:10px;
    box-shadow:
    0 20px 40px rgba(0,0,0,.35);
    animation:floatLogo 5s ease-in-out infinite;
}

/* =========================
   NAME BOX
========================= */

.name{
    margin-top:12px;
    padding:16px 18px;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
}

.golden-base{
    color:#f0cf72;
}

.golden1{
    letter-spacing:.06em;
    line-height:1.6;
}

/* =========================
   TITLES
========================= */

h4{
    margin-top:24px;
    margin-bottom:16px;
    font-size:15px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#f0cf72;
}

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

.links-container{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.link{
    width:100%;
    padding:16px 20px !important;
    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)
    ) !important;

    border:1px solid rgba(240,207,114,.20) !important;

    color:#ffffff !important;

    font-size:15px;
    font-weight:700;
    letter-spacing:.04em;

    transition:.3s ease;
    backdrop-filter:blur(12px);
}

.link:hover{
    transform:translateY(-3px);
    background:
    linear-gradient(
        135deg,
        #c79a3a,
        #f0cf72
    ) !important;

    color:#07111f !important;

    box-shadow:
    0 18px 38px rgba(199,154,58,.30);
}

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

.bottom{
    margin-top:30px;
    text-align:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}

.bottom p{
    margin:0;
    font-size:13px;
    color:rgba(255,255,255,.70);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes floatLogo{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:640px){

    body{
        padding:20px 12px;
    }

    .container{
        padding:30px 22px;
        border-radius:28px;
    }

    .logo-img{
        width:130px;
        height:130px;
    }

    .link{
        padding:15px 16px !important;
        font-size:14px;
    }

    h4{
        font-size:13px;
    }

}

@media(max-width:420px){

    .container{
        padding:26px 18px;
    }

    .logo-img{
        width:115px;
        height:115px;
    }

    .golden1{
        font-size:16px !important;
    }

}