@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
/* CONFIGURAÇÃO PADRÃO: 1080p */

/* RESETANDO */
*
{
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}

/* CORPO GERAL */ 
body
{
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100vh;
                /*  13rem */ 
    padding: 0 clamp(5rem, 10.833vw, 15rem);

    font-family: 'Roboto Condensed', sans-serif;
    color: var(--cor-txt-main);
    background-color: var(--cor-bg);
}

/* BOTÃO DE TEMA */
.btn-tema
{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1.3rem;
    top: 1rem;
    border: clamp(2px, 0.156vw, 0.156vw) solid var(--cor-txt-main);
    box-shadow: clamp(3px, 0.208vw, 0.208vw) clamp(3px, 0.208vw, 0.208vw) var(--cor-txt-main);
    background: none;
    width: clamp(2.1rem, 2.5vw, 2.5vw);
    height: clamp(2.1rem, 2.5vw, 2.5vw);
    cursor: pointer;
}

.btn-tema > i 
{
            /* 35px */
    font-size: clamp(1.3rem, 1.823vw, 1.823vw);
    color: var(--cor-txt-main);
}
.btn-tema .fa-sun { display: none; }
.btn-tema.dark
{
    box-shadow: clamp(3px, 0.208vw, 0.208vw) clamp(3px, 0.208vw, 0.208vw) var(--cor-txt-sec);
    border: clamp(2px, 0.156vw, 0.156vw) solid var(--cor-txt-sec);
    background: none;
}
.btn-tema .fa-solid.fa-sun { color: #bebebe; }
#btn-tema-click 
{
    transform: translate(4px, 4px);  
    box-shadow: none;
}


/* HEADER */
header
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0 1.5rem 0;
    gap: 0.5vw;
    width: 100%;
}

header h1
{
                   /* 40px    75px  */
    font-size: clamp(2.5rem, 3.906vw, 3.7vw);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -3%;
    text-wrap: nowrap;
}
                        
header p 
{ 
                    /* 14.4px  24px  */
    font-size: clamp(.9rem, 1.25vw, 1.25vw);
    text-transform: uppercase; 
}

header #header-info
{
    font-weight: 400;
    color: var(--cor-txt-sec);
}

header .titulo-e-redes
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.083vw;
    width: 100%;
}

.titulo-e-redes .linhas
{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: clamp(11px, 1.146vw, 23px);
}

.titulo-e-redes .linhas hr
{
    height: clamp(5px, 0.417vw, 9px);
    background-color: var(--cor-txt-main);
}

.titulo-e-redes .redes
{
    display: flex;
    gap: 1rem;
}

.titulo-e-redes .redes > a
{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #752cf1;
    width: clamp(2.5rem, 2.917vw, 2.917vw);
    height: clamp(2.5rem, 2.917vw, 2.917vw);
    box-shadow: clamp(3px, 0.26vw, 0.26vw) clamp(3px, 0.26vw, 0.26vw) var(--cor-txt-main);
    color: var(--cor-bg);
}

.titulo-e-redes .redes > a > i 
{
    font-size: clamp(1.9rem, 2.188vw, 2.188vw);
    /* font-size: 2.188vw; */
    color: #eaeaea;
}
.titulo-e-redes .redes > a .fa-youtube 
{ 
    font-size: clamp(1.7rem, 1.927vw, 1.927vw); 
    /* font-size: 1.927vw;  */
}

header #header-desc { font-weight: 500; }


/* NAV */
nav
{
    width: 100%;
    display: flex;
    gap: clamp(.7rem, 2vw, 2vw);
    margin: clamp(.8rem, 1.25vw, 1.5rem) 0 clamp(.5rem, 0.75vw, .9rem) 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav > a
{
    flex-grow: 1;
    border: clamp(2px, 0.156vw, 0.156vw) solid var(--cor-txt-main);
    box-shadow: clamp(3px, 0.208vw, 0.208vw) clamp(3px, 0.208vw, 0.208vw) var(--cor-txt-main);
                        /* .6 */
    padding: clamp(.4rem, 0.5vw, .7rem) 0;
    text-align: center;

    color: var(--cor-txt-main);
    font-weight: 500;
    text-transform: capitalize;
    font-size: clamp(1rem, 1.302vw, 1.302vw);
}
#pagina-atual
{ 
    transform: translate(4px, 4px); 
    box-shadow: none; 
}
#link-rede-click
{
    transform: translate(4px, 4px);
    box-shadow: none;
}


/* CORPO PRINCIPAL */
main { flex-grow: 1; }
#main-tela-inicial 
{
    height: 44vh;
    background-color: #fff;
    background-image: url(../img/desenho.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}



/* FOOTER */
footer
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    /* position: absolute;
    bottom: 0; */
    padding: 1.5rem 0;
}

footer .sessao-1, footer .sessao-2
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

footer .sessao-1 { align-items: flex-start;}

footer p
{
    color: var(--cor-txt-sec);
}

footer a
{
    color: var(--cor-colorida);
    text-decoration: underline;
}
footer p, footer a
{
    font-size: clamp(0.875rem, 1.042vw, 1.042vw);
    font-weight: 400;
    text-transform: uppercase;
}






/* RESPONSIVIDADE */
/* Telas extra largas */
@media (min-aspect-ratio: 21/9) 
{
    header { padding: 2.5rem 0 1.5rem 0; }
    #main-tela-inicial { background-position: top 39% center; }
}

/* tablets pequenos */
@media (max-width: 884px) 
{ 
    nav a { width: calc(50% - .7rem); }

    footer 
    { 
        flex-direction: column; 
        justify-content: center;
        align-items: flex-end;
        gap: .5rem;
    }
    footer .sessao-1 { align-items: flex-end; } 
    footer p { text-align: right; }
}

/* Dispositivos menores */
@media (max-width: 767px) 
{
    body { padding: 0 clamp(2.5rem, 2.5vw, 2.5vw); }

    .btn-tema { right: .9rem; top: .5rem; }
    header { padding: 3rem 0 1.3rem 0; }
    .titulo-e-redes .redes 
    { 
        flex-direction: column;
        gap: .5rem; 
    } 

    header #header-info { margin-bottom: -1rem; }
    header #header-desc 
    { 
        margin-top: -1.3rem;
        width: 70%;
        text-align: center;
    }

    footer { padding: 1rem 0; }
}

/* Mobile */
@media (max-width: 480px) 
{
    body { padding: 0 clamp(1.5rem, 2.5vw, 2.5vw); }

    .btn-tema 
    {
        width: clamp(2rem, 2.5vw, 3.2rem);
        height: clamp(2rem, 2.5vw, 3.2rem);
    }

    .titulo-e-redes .linhas { display: none; }

    header p { font-size: clamp(.8rem, 1.25vw, 1.625rem); }
    header #header-desc { width: 60%; }
    header h1 { font-size: clamp(2.4rem, 3.906vw, 5rem); }
    nav > a { font-size: clamp(.9rem, 1.302vw, 1.688rem); }

    footer p, footer a { font-size: clamp(0.75rem, 1.042vw, 1.042vw); }
}

@media (max-width: 357px)
{
    body { padding: 0 clamp(1.1rem, 2.5vw, 2.5vw); }

    header h1 { font-size: clamp(2.123rem, 3.906vw, 5rem); }
    header p { font-size: clamp(.7rem, 1.25vw, 1.625rem); }
}