nao mudou nada, olha aqui como ta "/* =========================================================
   MEU CANTINHO
   vintage witchy / old web / indigo
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            #24134b 0%,
            #10091d 35%,
            #06040a 75%,
            #030207 100%
        );

    color: #d8c9e7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =========================================================
   TEXTURA VINTAGE DO FUNDO
========================================================= */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.12;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.025) 4px
        );
}


/* =========================================================
   BRILHO SUTIL NO FUNDO
========================================================= */

body::after {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(100, 60, 150, 0.08),
            transparent 45%
        );
}


/* =========================================================
   PENTAGRAMAS
========================================================= */

.pentagram {
    position: fixed;

    z-index: 0;

    pointer-events: none;

    color: #7650a4;

    opacity: 0.16;

    text-shadow:
        0 0 15px rgba(116, 75, 160, 0.8);

    user-select: none;
}


.pentagram-one {
    top: 8%;

    left: 4%;

    font-size: 100px;

    transform: rotate(-14deg);
}


.pentagram-two {
    right: 4%;

    bottom: 8%;

    font-size: 125px;

    transform: rotate(18deg);
}


.pentagram-three {
    top: 46%;

    right: 10%;

    font-size: 45px;

    opacity: 0.10;
}


/* =========================================================
   ESTRELAS DO FUNDO
========================================================= */

.star {
    position: fixed;

    z-index: 0;

    pointer-events: none;

    color: #a786c9;

    opacity: 0.45;

    text-shadow:
        0 0 8px rgba(169, 130, 207, 0.8);
}


.star-one {
    top: 18%;

    left: 15%;

    font-size: 8px;
}


.star-two {
    top: 32%;

    left: 8%;

    font-size: 7px;
}


.star-three {
    top: 68%;

    right: 17%;

    font-size: 10px;
}


.star-four {
    bottom: 18%;

    left: 22%;

    font-size: 7px;
}


/* =========================================================
   GLITTER DO MOUSE
========================================================= */

.sparkle {
    position: fixed;

    z-index: 9999;

    width: 5px;

    height: 5px;

    pointer-events: none;

    background: #d8bfff;

    transform:
        rotate(45deg);

    box-shadow:
        0 0 4px #d8bfff,
        0 0 9px rgba(170, 120, 230, 0.9),
        0 0 15px rgba(120, 75, 170, 0.6);

    animation:
        sparkle-fade 0.85s ease-out forwards;
}


@keyframes sparkle-fade {

    0% {
        opacity: 1;

        transform:
            translate(0, 0)
            rotate(45deg)
            scale(1);
    }


    100% {
        opacity: 0;

        transform:
            translate(
                calc((var(--random-x) - 0.5) * 45px),
                calc((var(--random-y) - 0.5) * 45px)
            )
            rotate(90deg)
            scale(0);
    }

}


/* =========================================================
   PÁGINA PRINCIPAL
========================================================= */

.page {
    position: relative;

    z-index: 2;

    width: min(
        900px,
        calc(100% - 30px)
    );

    margin: 30px auto 50px;

    background:
        linear-gradient(
            135deg,
            #130c20,
            #08060d
        );

    border: 1px solid #65448a;

    box-shadow:
        0 0 0 5px rgba(18, 10, 30, 0.75),
        0 0 35px rgba(70, 38, 105, 0.35);
}


/* =========================================================
   HEADER
========================================================= */

header {
    position: relative;

    padding: 34px 20px 28px;

    text-align: center;

    border-bottom: 1px solid #604080;

    background:
        radial-gradient(
            circle at center,
            rgba(91, 54, 137, 0.32),
            transparent 65%
        );
}


.header-symbols {
    margin-bottom: 8px;

    color: #ad8bcd;

    font-size: 19px;

    letter-spacing: 9px;

    text-shadow:
        0 0 8px rgba(166, 124, 205, 0.6);
}


h1 {
    margin: 5px 0 6px;

    color: #e4d5f2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        38px,
        7vw,
        58px
    );

    font-weight: normal;

    letter-spacing: 5px;

    line-height: 1;

    text-shadow:
        0 0 8px rgba(188, 150, 224, 0.55),
        0 0 22px rgba(105, 62, 148, 0.35);
}


.subtitle {
    color: #8d749f;

    font-size: 13px;

    font-style: italic;

    letter-spacing: 2px;
}


/* =========================================================
   BADGE 88x31
========================================================= */

.badge-88 {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 88px;

    height: 31px;

    margin: 20px auto 0;

    padding: 3px;

    color: #cdb9df;

    background:
        linear-gradient(
            180deg,
            #2d1b45,
            #160d23
        );

    border: 1px solid #79549c;

    font-family:
        "Courier New",
        monospace;

    font-size: 7px;

    line-height: 1.1;

    text-align: center;

    letter-spacing: 0.4px;

    box-shadow:
        inset 0 1px rgba(255,255,255,0.07),
        0 0 9px rgba(91, 55, 125, 0.25);
}


/* =========================================================
   CONTEÚDO
========================================================= */

.content {
    padding: 14px;
}


/* =========================================================
   LAYOUT — SIDEBAR + PRINCIPAL
========================================================= */

.site-layout {
    display: grid;

    grid-template-columns:
        202px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 0;
}


/* =========================================================
   CAIXAS DA SIDEBAR
========================================================= */

.side-box {
    overflow: hidden;

    border: 1px solid #654387;

    background:
        #0b080f;

    box-shadow:
        inset 0 0 20px rgba(82, 45, 111, 0.15);
}


/* =========================================================
   TÍTULOS DA SIDEBAR
========================================================= */

.side-title {
    padding: 9px 10px;

    color: #e3d3f1;

    background:
        linear-gradient(
            180deg,
            #4d2d72,
            #331d50
        );

    border-bottom: 1px solid #78539b;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 1px;

    text-shadow:
        0 0 6px rgba(200, 164, 228, 0.35);
}


/* =========================================================
   MENU LATERAL
========================================================= */

.side-menu {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 9px;
}


.side-menu a {
    display: block;

    padding: 7px 8px;

    color: #cbb8d8;

    background:
        #100c15;

    border: 1px solid #382640;

    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        padding-left 0.2s ease;
}


.side-menu a:hover {
    padding-left: 12px;

    color: #f0e5f8;

    background:
        #21132f;

    border-color: #79539c;

    box-shadow:
        0 0 8px rgba(111, 69, 146, 0.25);
}


/* =========================================================
   CURRENTLY
========================================================= */

.currently {
    background:
        #0b080f;
}


.currently-item {
    padding: 10px;

    border-bottom: 1px dotted #3b2846;
}


.currently-item:last-child {
    border-bottom: none;
}


.currently-label {
    margin-bottom: 4px;

    color: #d5c2e2;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.currently-value {
    color: #8f7b9e;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   DECORAÇÃO SIDEBAR
========================================================= */

.sidebar-decoration {
    padding: 3px;

    color: #755293;

    font-size: 10px;

    text-align: center;

    letter-spacing: 5px;
}


/* =========================================================
   COLUNA PRINCIPAL
========================================================= */

.main-column {
    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 0;
}


/* =========================================================
   CAIXAS PRINCIPAIS
========================================================= */

.content-box {
    overflow: hidden;

    border: 1px solid #654387;

    background:
        linear-gradient(
            180deg,
            #100c15,
            #09070d
        );

    box-shadow:
        inset 0 0 25px rgba(73, 40, 98, 0.15);
}


/* =========================================================
   TÍTULO DAS CAIXAS
========================================================= */

.box-title {
    padding: 9px 12px;

    color: #e6d7f2;

    background:
        linear-gradient(
            180deg,
            #4d2d72,
            #331d50
        );

    border-bottom: 1px solid #78539b;

    font-size: 15px;

    font-weight: bold;

    letter-spacing: 1px;

    text-shadow:
        0 0 7px rgba(201, 166, 229, 0.35);
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-content {
    display: flex;

    gap: 17px;

    padding: 15px;
}


/* =========================================================
   LUA
========================================================= */

.moon-box {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 123px;

    height: 123px;

    background:
        radial-gradient(
            circle at center,
            #65418b 0%,
            #29173c 42%,
            #100b16 75%
        );

    border: 1px solid #765198;

    box-shadow:
        inset 0 0 22px rgba(171, 116, 221, 0.18);
}


.moon {
    color: #f0e5fa;

    font-size: 58px;

    line-height: 1;

    text-shadow:
        0 0 7px #e8d8ff,
        0 0 20px rgba(177, 126, 226, 0.85),
        0 0 35px rgba(110, 61, 153, 0.65);
}


/* =========================================================
   TEXTO WELCOME
========================================================= */

.welcome-text {
    min-width: 0;

    flex: 1;
}


.welcome-text p {
    margin: 0 0 10px;

    color: #d0c3da;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.7;
}


.welcome-text .signature {
    color: #b59bc7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;
}


/* =========================================================
   DIVISOR
========================================================= */

.welcome-divider {
    padding: 0 15px;

    color: #765291;

    font-size: 10px;

    text-align: center;

    letter-spacing: 2px;
}


.warning {
    padding: 13px 15px 15px;

    color: #786786;

    font-size: 10px;

    font-style: italic;

    text-align: center;
}


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

.links-content {
    padding: 14px;
}


.links-intro {
    margin: 0 0 14px;

    color: #c8b9d2;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
}


/* =========================================================
   GRID DOS LINKS
========================================================= */

.social-grid {
    display: grid;

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

    gap: 8px;
}


/* =========================================================
   CARTÕES SOCIAIS
========================================================= */

.social-card {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 7px;

    color: #cbb6da;

    background:
        #0a080e;

    border: 1px solid #3e294d;

    font-size: 11px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.social-icon {
    color: #9773b7;

    font-size: 11px;
}


.social-card:hover {
    color: #f0e4f9;

    background:
        #20132f;

    border-color: #78519b;

    box-shadow:
        0 0 10px rgba(111, 68, 145, 0.3);

    transform:
        translateY(-1px);
}


.social-card:hover .social-icon {
    color: #d3b5ec;
}


/* =========================================================
   LITTLE THINGS
========================================================= */

.small-box {
    margin-bottom: 0;
}


.little-content {
    padding: 12px 15px 14px;
}


.little-content p {
    margin: 0;

    color: #91809c;

    font-size: 11px;

    line-height: 1.6;

    text-align: center;
}


.tiny-stars {
    margin-top: 10px;

    color: #73518e;

    font-size: 9px;

    text-align: center;

    letter-spacing: 5px;
}


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

footer {
    padding: 18px 15px;

    border-top: 1px solid #3d294d;

    color: #665574;

    font-size: 10px;

    letter-spacing: 1px;

    text-align: center;
}


.footer-symbols {
    margin-bottom: 9px;

    color: #80609b;

    font-size: 11px;

    letter-spacing: 7px;
}


.updated {
    margin-top: 7px;

    color: #4f4059;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================================
   LINKS — ESTILO GERAL
========================================================= */

a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   SELEÇÃO DE TEXTO
========================================================= */

::selection {
    color: #eee2fa;

    background: #4d3270;
}


/* =========================================================
   RESPONSIVO — TABLET
========================================================= */

@media (max-width: 700px) {

    .page {
        width: calc(100% - 20px);

        margin-top: 15px;
    }


    .site-layout {
        grid-template-columns:
            175px
            minmax(0, 1fr);

        gap: 10px;
    }


    .content {
        padding: 10px;
    }


    .welcome-content {
        gap: 12px;
    }


    .moon-box {
        width: 100px;

        height: 100px;
    }


    .moon {
        font-size: 48px;
    }

}


/* =========================================================
   RESPONSIVO — CELULAR
========================================================= */

@media (max-width: 580px) {

    .page {
        width: calc(100% - 12px);

        margin:
            8px auto
            25px;
    }


    header {
        padding:
            28px 12px
            23px;
    }


    h1 {
        font-size: 34px;

        letter-spacing: 3px;
    }


    .subtitle {
        font-size: 11px;

        letter-spacing: 1px;
    }


    .pentagram {
        display: none;
    }


    .site-layout {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .sidebar {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }


    .sidebar-decoration {
        display: none;
    }


    .main-column {
        gap: 12px;
    }


    .welcome-content {
        flex-direction: column;
    }


    .moon-box {
        width: 100%;

        height: 90px;
    }


    .moon {
        font-size: 46px;
    }


    .social-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   RESPONSIVO — CELULAR PEQUENO
========================================================= */

@media (max-width: 390px) {

    .sidebar {
        display: flex;

        flex-direction: column;
    }


    .social-grid {
        grid-template-columns: 1fr;
    }


    h1 {
        font-size: 29px;
    }


    .content {
        padding: 8px;
    }


    .welcome-content {
        padding: 12px;
    }
    
}