:root {
    --cor-primaria: #2563EB;
    --cor-primaria-clara: #60A5FA;
    --cor-primaria-escura: #1D4ED8;
    --cor-secundaria: #7C3AED;
    --cor-secundaria-clara: #A78BFA;
    --cor-secundaria-escura: #6D28D9;
}

/* NAVBAR ===============================================================================*/
#NavBar {
    width: 100%;
    height: 7%;
    max-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.NavBar-Container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 97% !important;
    height: 60% !important;
    border-radius: 7px;
    background-color: #1d49a8;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transition: 0.3s;
}

.NavBar-Container:hover {
    transform: scale(1.008);
}

.NavBar-Container span {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #eeeeee;
}

/* NAVBAR ===============================================================================*/
* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: monospace;
    font-weight: bold;
    }

body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100svh;
    width: 100svw;
    background:
        radial-gradient(circle at top left, #2563EB55, transparent 45%),
        radial-gradient(circle at bottom right, #7C3AED55, transparent 45%),
        #0F172A;

}

.Container,
.Container div {
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* CASA */
.Casa span {
    font-family: "Rubik Mono One", monospace;
    font-style: normal;
    color: #eeeeee;
    font-weight: bold;
    font-size: clamp(2.15rem, 1.5vw, 4rem);
    text-align: center;
}

.Casa .slogan {
    font-family: monospace;
    font-style: normal;
    color: #eeeeee;

    font-size: 2rem;
    text-align: center;
}

.Casa button {
    width: 200px;
    height: 70px;
    border-radius: 7px;
    box-shadow: var(--cor-secundaria-escura) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    color: #eeeeee;
    font-size: 1.2rem;
    background-color: #00000000;
    transition: 0.4s;
}

.Casa button:hover {
    transform: scale(1.2);
}