:root {
    --cor-pri: #e6ebef;
    --cor-extra: #b4cfe6;
    --cor-sec: #7fa7c7;
    --cor-ter: #3f5f78;
    --acc-01: #8b7a6b;
    --acc-02: #3a2817;
    --acc-03: #d9d0b9;
    --fs-title: clamp(1.8rem, 3vw + 0.5rem, 2rem);
    --fs-text: clamp(1rem, 1.5vw + 0.5rem, 1.2rem);
    --size-img: clamp(10rem, 19vw + 0.5rem, 15rem);
    --size-img02: clamp(15rem, 29vw + 0.5rem, 22.5rem);
}

header {
    justify-content: center;
    background-color: var(--cor-ter);
    margin: 0;
    padding: 0.5rem 2rem 0.5rem 2rem;
    position: sticky;
    top: 0;
}


.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    list-style: none;
    color: var(--cor-pri);
}

.nav-links li a {
    font-family: "Fuzzy Bubbles", monospace;
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    padding: 0.5vw 0.75vw 0.5vw 0.75vw;
    text-decoration: underline;
    text-decoration-color: var(--cor-ter);
    color: var(--cor-pri);
    border-radius: 0.5vw;
    transition: 0.25s ease-out;
}

.nav-links li a:hover {
    background-color: var(--cor-sec);
    color: var(--cor-ter);
    border-radius: 0.5vw;
    transition: 0.25s ease-in;
    text-decoration: underline;
    text-decoration-color: var(--cor-ter);
}

.nav-links li a.active {
    background-color: var(--cor-pri);
    color: var(--cor-ter);
    border-radius: 0.5vw;
    text-decoration: underline;
    text-decoration-color: var(--cor-ter);
    transition: 0.25s ease-in;
}