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

body {
    font-family: Arial, sans-serif;

    /* Fundo com imagem + camada escura */
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
                url("https://files.catbox.moe/3xlavt.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #eee;
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.subtitle {
    color: #ccc;
    margin-bottom: 40px;
}

section {
    margin-bottom: 60px;
}

h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.project {
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(6px);
    padding: 20px;
    border-radius: 12px;
    width: 280px;
    transition: 0.3s ease;
}

.project:hover {
    transform: scale(1.05);
}

.project img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.contact a {
    display: inline-block;
    margin: 10px 15px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #aaa;
    padding: 10px 20px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.contact a:hover {
    background: rgba(255,255,255,0.1);
}

footer {
    margin-top: 40px;
    color: #aaa;
    font-size: 0.9rem;
}

/* === Caixas vidro para Sobre e Contato === */

.about,
.contact {
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(6px);
    padding: 30px;
    border-radius: 20px;
    max-width: 800px;
    margin: 0 auto 60px auto;
    transition: 0.3s ease;
}

.about:hover,
.contact:hover {
    transform: scale(1.02);
}

/* === Caixa vidro para header (Eclipsu) === */

header {
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(6px);
    padding: 40px;
    border-radius: 20px;
    max-width: 800px;
    margin: 0 auto 60px auto;
    transition: 0.3s ease;
}

header:hover {
    transform: scale(1.02);
}

/* === Caixa vidro para seção Projetos === */

.portfolio {
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(6px);
    padding: 40px;
    border-radius: 20px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
    transition: 0.3s ease;
}

.portfolio:hover {
    transform: scale(1.01);
}

/* === Créditos silly === */

.credits {
    margin-top: 60px;
    font-size: 0.9rem;
    color: #ccc;
}

.credits p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(28, 28, 28, 0.7);
    backdrop-filter: blur(6px);
    padding: 10px 20px;
    border-radius: 20px;
}

.credit-gif {
    width: 40px;
    height: auto;
}

/* === Programador clicável === */

.credits {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.programador-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #ccc;
    background: rgba(28, 28, 28, 0.7);
    backdrop-filter: blur(6px);
    padding: 10px 20px;
    border-radius: 20px;
    transition: 0.3s ease;
}

.programador-link:hover {
    transform: scale(1.05);
    color: #fff;
}

.credit-gif {
    width: 40px;
}

.credits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* espaço entre texto e cubo */
}

.credit-gif {
    vertical-align: middle;
}

<footer class="credits">

    <a href="https://linktr.ee/Nayhasdied" target="_blank" class="credit-text">
        Programado por Nayhasdied!!!
    </a>

    <a href="https://eclipsu.neocities.org/eu%20n%C3%A3o%20queria" target="_blank">
        <img src="https://files.catbox.moe/292aak.gif" alt="gif silly" class="credit-gif">
    </a>

</footer>

/* ===== Mensagem romântica secreta ===== */

.hidden-message {
    margin-top: 15px;
    font-size: 1rem;
    color: #ffb6c1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hidden-message.show {
    opacity: 1;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.nome-link {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

.nome-link:hover {
    color: #ffffff; /* rosa suave romântico */
}