:root
{
    --link: rgb(104, 6, 174);
    --link2: rgb(148, 2, 123);
     /*modo claro*/
    --textoClaro: rgba(5, 1, 31, 0.495);
    --fundoClaro: rgba(255, 255, 85, 0.733);
    --cabecalioClaro: rgb(255, 153, 0);
    --rodapeClaro: rgb(177, 175, 196);
    --blocoAzulClaro: rgb(92, 116, 252);
    --bordaAzulClaro: rgb(49, 69, 187);
    --blocoVermelhoClaro: rgb(251, 59, 116);
    --bordaVermelhoClaro: rgb(205, 34, 86);
    --blocoVerdeClaro: rgb(16, 226, 114);
    --bordaVerdeClaro:rgb(11, 176, 88);
    --blocoAmareloClaro: rgb(248, 226, 61);
    --bordaAmareloClaro: rgb(235, 168, 12);
    --blocoRoxoClaro: rgb(203, 48, 217);
    --bordaRoxoClaro: rgb(152, 12, 165);
    --blocoLaranjaClaro: rgb(251, 133, 59);
    --bordaLaranjaClaro: rgb(231, 98, 16);
    --blocoCinzaClaro: rgb(116, 116, 116);
    --bordaCinzaClaro: rgb(80, 80, 80);
    --botaoClaro: rgb(8, 216, 199);
    --botaoClaroHover: rgb(103, 250, 237);
    --bgClaro: url(bgLight.png);
    /*modo dark*/
    --textoDark: rgba(245, 244, 255, 0.495);
    --fundoDark: rgba(16, 11, 31, 0.895);
    --cabecalioDark: rgb(202, 3, 0);
    --rodapeDark: rgb(83, 48, 47);
    --blocoAzulDark:rgb(0, 26, 173);
    --bordaAzulDark:rgb(7, 23, 116);
    --blocoVermelhoDark: rgb(133, 0, 40);
    --bordaVermelhoDark: rgb(97, 4, 32);
    --blocoVerdeDark: rgb(0, 124, 41);
    --bordaVerdeDark: rgb(3, 89, 32);
    --blocoAmareloDark: rgb(226, 178, 3);
    --bordaAmareloDark: rgb(201, 126, 6);
    --blocoRoxoDark:rgb(117, 6, 80);
    --bordaRoxoDark:rgb(88, 4, 60);
    --blocoLaranjaDark: rgb(147, 57, 1);
    --bordaLaranjaDark: rgb(105, 43, 5);
    --blocoCinzaDark: rgb(67, 67, 67);
    --bordaCinzaDark: rgb(42, 42, 42);
    --botaoDark: rgb(8, 146, 134);
    --botaoDarkHover:rgb(97, 179, 172);
    --bgDark: url(bgDark.png);
}
.lightMode
{
    --texto: var(--textoClaro);
    --fundo: var(--fundoClaro);
    --cabecalio: var(--cabecalioClaro);
    --rodape: var(--rodapeClaro);
    --botao: var(--botaoClaro);
    --botaoHover: var(--botaoClaroHover);
    --blocoAzul: var(--blocoAzulClaro);
    --blocoVermelho: var(--blocoVermelhoClaro);
    --blocoVerde: var(--blocoVerdeClaro);
    --blocoAmarelo: var(--blocoAmareloClaro);
    --blocoRoxo: var(--blocoRoxoClaro);
    --blocoLaranja: var(--blocoLaranjaClaro);
    --blocoCinza: var(--blocoCinzaClaro);
    --bordaAzul: var(--bordaAzulClaro);
    --bordaVermelho: var(--bordaVermelhoClaro);
    --bordaVerde: var(--bordaVerdeClaro);
    --bordaAmarelo: var(--bordaAmareloClaro);
    --bordaRoxo: var(--bordaRoxoClaro);
    --bordaLaranja: var(--bordaLaranjaClaro);
    --bordaCinza: var(--bordaCinzaClaro);
    --bg: var(--bgClaro);
}
.darkMode
{
    --texto: var(--textoDark);
    --fundo: var(--fundoDark);
    --cabecalio: var(--cabecalioDark);
    --rodape: var(--rodapeDark);
    --botao: var(--botaoDark);
    --botaoHover: var(--botaoDarkHover);
    --blocoAzul: var(--blocoAzulDark);
    --blocoVermelho: var(--blocoVermelhoDark);
    --blocoVerde: var(--blocoVerdeDark);
    --blocoAmarelo: var(--blocoAmareloDark);
    --blocoRoxo: var(--blocoRoxoDark);
    --blocoLaranja: var(--blocoLaranjaDark);
    --blocoCinza: var(--blocoCinzaDark);
    --bordaAzul: var(--bordaAzulDark);
    --bordaVermelho: var(--bordaVermelhoDark);
    --bordaVerde: var(--bordaVerdeDark);
    --bordaAmarelo: var(--bordaAmareloDark);
    --bordaRoxo: var(--bordaRoxoDark);
    --bordaLaranja: var(--bordaLaranjaDark);
    --bordaCinza: var(--bordaCinzaDark);
    --bg: var(--bgDark);
}
body
{
    border:0px;
    margin:0%
}
.texto
{
color: var(--texto);
background-color: transparent !important;
size: 1.5rem;
}
main
{
    display: flex;
}
.cabecalio
{
    display: flex;
    background-color: var(--cabecalio);
    height: 96px;
    justify-content: center;
    gap: 0px 32px;
}
nav
{
display: flex;
flex-flow: row wrap;
}
.linkNav
{
    display: flex;
    width: 36px;
    flex-flow: row-reverse wrap;
}
.botaoLink
{
    width: 40px;
    align-self: center;
    flex-shrink: 1;
    flex-grow: 0;
}
.botaoTitulo
{
    width: 80px;
    height: 80px;
    align-self: center;
}
.imagem
{
    justify-self: center;
    max-width: 256px;
}
button
{
    width: 64px;
    min-height: 32px;
    border-radius: 8px;
    background-color: var(--botao);
    border: none;
    align-self: center;
}
button:hover
{
    background-color: var(--botaoHover);
}
.rodape
{
    display: flex;
    background-color: var(--rodape);
    height: 96px;
    align-items: center;
    justify-content: center;
    gap: 0px 32px;
}
.conteudo
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: stretch;
    flex-flow: column nowrap;
    gap: 32px 32px;
    background-image: var(--bg);
}
.divSobre
{
    display: flex;
    flex-flow: row wrap;
    gap: 32px 32px;
    justify-content: center;
    align-items: stretch;
}
.divIntroducao
{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    gap: 32px 32px;
}
.textoTitulo
{
    justify-self: center;
    max-width: 1024px;
    align-self: center;
}
.textoVisaoGeral
{
    justify-self: center;
    max-width: 1024px;
    align-self: center;
}
.textoApresentacao
{
    max-width: 1024px;
    align-self: center;
    flex-wrap:wrap;
}
section
{
    border-radius:8px;
    text-shadow: none;
    align-items: center;
    gap: 64px 64px;
}
.secSobre
{
    display: flex;
    flex-direction: column;
    max-width: 512px;
    min-height: 128px;
    gap: 8px 8px;
    align-items: center;
}
.textoSobre
{
    align-self: center;
    justify-self: center;
}
.link
{
    color: var(--link);
    background-color: transparent !important;
}
.link2
{
    color: var(--link2);
    background-color: transparent !important;
}
#blocoAzul
{
    background-color: var(--blocoAzul);
    border: 4px solid var(--bordaAzul);
}
#blocoVermelho
{
    background-color: var(--blocoVermelho);
    border: 4px solid var(--bordaVermelho);
}
#blocoVerde
{
    background-color: var(--blocoVerde);
    border: 4px solid var(--bordaVerde);
}
#blocoAmarelo
{
    background-color: var(--blocoAmarelo);
    border: 4px solid var(--bordaAmarelo);
}
#blocoRoxo
{
    background-color: var(--blocoRoxo);
    border: 4px solid var(--bordaRoxo);
}
#blocoLaranja
{
    background-color: var(--blocoLaranja);
    border: 4px solid var(--bordaLaranja);
}
#blocoCinza
{
    background-color: var(--blocoCinza);
    border: 4px solid var(--bordaCinza);
}