body {
    background-color: black;
    transition: filter 0.5s ease;
}

.site-invert > *:not(header, .imagem-hero) {
    opacity: 0;
    animation: revealPage 2s ease forwards;
}

@keyframes revealPage {
    to {
        opacity: 1;
    }
}


html, body{
    margin: 0;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    background: black;
}



.site-invert {
    transition: filter 0.5s ease,
                background-color 0.5s ease;
}

.site-invert.light-mode {
    filter: invert(1);
}

/* site inteiro */
.site-wrapper{
    display: flex;
    flex-direction: row-reverse;

    justify-content: center;
    align-items: center;

    position: relative;

    width: 160vw;
    height: 100vh;


    transition: filter 0.6s ease fowards,
    background-color 0.6s ease;

}


.site-wrapper.light-mode{
    filter: invert(1);
}

/* cada "tela" */



.hero {
    width: 100vw;
    height: 100vh;



    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: 0;
    top: 0;
}

/* LOGO HERO */

.imagem-hero {
    position: absolute;
    top: 45%;
    left: 5%;
    z-index: 99;
    width: 30%;

}

.imagem-hero img { 
    width: 100%;
    height: auto;
    user-select: none;
    transition: filter 0.5s ease;
}



.hero-right {

    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    right: 0;


    display: flex;
    justify-content: center;
    align-items: center;

}

.hero-redes {
    width: 40%;
    height: 80%;



    position: absolute;
    bottom: 5%;
    right: 10%;

    gap: 2%;

    padding-top: 8%;

    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;

}


.redes-titulo {
    position: absolute;

    text-align: center;

    width: 100%;


    padding: 0;
}

.redes-titulo h3{

    position: relative;
    color: white;
    font-size: clamp(0.7rem, 5vw, 6rem);
    text-align: center;



    width: 100%;
    height: 100%;

    font-family:    'Stack Sans Headline', sans-serif;
}


.redes-item {

    box-shadow: 0px 0px 8px white;

    background-color: rgba(255, 255, 255, 0.896);
    border-radius: 10px;

    display: flex;
    justify-content: start;
    align-items: center;

    height: 90%;

    padding: 0 5%;

    gap: 7%;

    opacity: 0;
    transform: translateX(60vw);

    transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}


.redes-item.show{
    opacity: 1;
    transform: translateX(0);
}

.redes-item:hover {
    transform: scale(1.03);
}


.redes-item p{
    font-size: clamp(0.7rem, 5vh, 6rem);
    font-family: 'Stack Sans Headline', sans-serif;
    color: black;

    transition: all 0.3s ease;
}

.redes-item:hover p{
    font-size: clamp(0.8rem, 6vh, 7rem);
}


.redes-item img{
    width: 10%;

    transition: all 0.3s ease;
}

.redes-item:hover img{
    width: 12%;
}

.page{
    width: 60vw;
    height: 100vh;

    flex-shrink: 0;

    position: relative;

}


.form {
    position: absolute;
    left: -60vw;
    top: 0;

}

.form-center {
    width: 100%;
    height: 100vh;
    z-index: 999999999;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 80vh;

    position: absolute;
    left: 5%;
    bottom: 2%;
}


.form-title {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 10%;

    text-align: center;


}

.form-title h3 {
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(0.7rem, 3.5vw, 6rem);

    color: white;
}


#form-expositor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;

    width: 100%;
    height: 70%;

    position: absolute;
    top: 15%;

    border-radius: 20px;

    padding: 5%;
    background-color: rgba(108, 108, 108, 0.158);
}

.input {
    border-radius: 20px;
    padding: 0 5%;
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(0.4rem, 2vw, 3rem);

    width: 100%;
    
}


#form-expositor button{
    border-radius: 20px;
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(0.4rem, 2vw, 3rem);
    transition: all 0.3s ease;
}

#form-expositor button:hover {
    transform: scale(1.03);
}




.error {
    position: absolute;
    background-color: rgb(0, 0, 0);
    z-index: 9999999;
    left: 0;
    top: 0;

    text-shadow: 0 0 10px aqua;

    color: aqua;



    width: 100%;
    height: 15%;

    border-radius: 20px;

    text-align: center;

    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(0.7rem, 3.5vw, 6rem);
    font-weight: 900;

    opacity: 0;
    transition: all 0.15s ease;
    
}

.error.show {
    opacity: 1;
    animation: pop 0.2s ease;
}

@keyframes pop {
    0% { transform: scale(0.98); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}



footer {

    display: none;

    width: 100vw;
    height: 20vh;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5vh;
}

.footer-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    flex-direction: column;
}

.footer-item h2{
    font-size: 100%;
    color: white;
    text-align: center;
    position: absolute;
}

.footer-item p{

    font-weight: 900;
    font-size: 140%;
    color: white;
}

.footer-item i{
    color: white;
    font-size: 200%;
    margin: 10px;
    transition: transform 0.2s ease;
}

.footer-item i:hover {
    transform: scale(1.2);
}

.footer-item img{
    width: 100%;
    transition: transform 0.3s ease;
}

.footer-item img:hover {
    transform: scale(1.05);
}



























































@media (max-width:768px){

    
   
body {
    background-color: black;
    transition: filter 0.5s ease;
}

body > *:not(header) {
    opacity: 1;
    animation: none;
}

@keyframes revealPage {
    to {
        opacity: 1;
    }
}


html, body{
    margin: 0;
    width: 100%;
    height: auto;
    background: black;
}

.site-invert {
    transition: filter 0.5s ease,
                background-color 0.5s ease;
}

.site-invert.light-mode {
    filter: invert(1);
}

/* site inteiro */
.site-wrapper{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    position: relative;

    width: 100vw;
    height: auto;


    transition: filter 0.6s ease fowards,
    background-color 0.6s ease;

}


.site-wrapper.light-mode{
    filter: invert(1);
}

/* cada "tela" */



.hero {
    width: 100vw;
    height: calc(var(--hero-height) * 2);



    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
    left: auto;
    top: auto;

}

/* LOGO HERO */

.imagem-hero {

    height: calc(var(--hero-height) / 1);
    position: relative;
    top: auto;
    left: auto;
    z-index: 99;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;


}

.imagem-hero img { 
    height: auto;
    user-select: none;
    transition: filter 0.5s ease;
    width: 73%;
    height: auto;
    user-select: none;

    top: 46%;
    left: 12.5%;
    position: absolute;
}



.hero-right {

    width: 100%;
    height: calc(var(--hero-height) / 1);

    position: relative;
    top: auto;
    right: auto;


    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-redes {
    width: 100%;
    height: 80%;



    position: relative;
    bottom: 0%;
    right: 0%;

    gap: 2%;

    padding-top: 0%;

    display: grid;
    grid-template-rows: 3fr 4fr 4fr 4fr 4fr;

}


.redes-titulo {
    position: relative;

    text-align: center;

    width: 100%;

    padding: 0;
}

.redes-titulo h3{

    position: relative;
    color: white;
    font-size: clamp(0.7rem, 12vw, 13rem);
    text-align: center;

    text-shadow: 0 0 10px white;

    width: 100%;
    height: 100%;

    font-family:    'Stack Sans Headline', sans-serif;
}


.redes-item {

    box-shadow: 0px 0px 8px white;

    background-color: rgba(255, 255, 255, 0.896);
    border-radius: 10px;

    display: flex;
    justify-content: start;
    align-items: center;

    height: 90%;

    padding: 0 5%;

    gap: 7%;

    opacity: 0;
    transform: translateX(60vw);

    transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}


.redes-item.show{
    opacity: 1;
    transform: translateX(0);
}

.redes-item:hover {
    transform: scale(1.03);
}


.redes-item p{
    font-size: clamp(0.7rem, 5vh, 6rem);
    font-family: 'Stack Sans Headline', sans-serif;
    color: black;

    transition: none;
}

.redes-item:hover p{
    font-size: clamp(0.7rem, 5vh, 6rem);
}


.redes-item img{
    width: 10%;

    transition: none;
}

.redes-item:hover img{
    width: 10%;

}

#expo-button img{
    transform: rotate(-90deg);
}

.page{
    width: 100vw;
    height: calc(var(--hero-height) / 1);

    flex-shrink: 0;

    position: relative;

}


.form {
    position: relative;
    left: auto;
    top: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.form-center {
    width: 100%;
    height: calc(var(--hero-height) / 1);
    z-index: 9;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    position: relative;
    left: auto;
    bottom: auto;

}


.form-title {
    position: relative;
    top: 0;
    left: 0%;
    width: 100%;
    height: calc(var(--hero-height) / 5);
    margin-bottom: calc(var(--hero-height) / 10);

    text-align: center;

}

.form-title h3 {
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(2.6rem, 7vw, 7rem);

    text-shadow: 0 0 10px white;

    color: white;
}


#form-expositor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2%;

    width: 100%;
    height: 100%;

    position: relative;
    top: auto;

    border-radius: 20px;

    padding: 5%;
    background-color: rgba(108, 108, 108, 0.158);

}

.input {
    border-radius: 20px;
    padding: 0 5%;
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(2rem, 5vw, 6rem);

    width: 100%;
    
    color: black;
}


#form-expositor button{
    border-radius: 20px;
    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(2rem, 5vw, 6rem);
    transition: all 0.3s ease;
}

#form-expositor button:hover {
    transform: none;
}




.error {
    position: absolute;
    background-color: rgb(255, 255, 255);
    z-index: 9999999;
    

    display: flex;
    justify-content: center;
    align-items: center;

    top: var(--btn-top);
    left: var(--btn-left);

    width: var(--btn-width);
    height: var(--btn-height);

    
    border-radius: 20px;
    padding: 0 5%;

    text-align: center;

    font-family:  'Stack Sans Headline', sans-serif;
    font-size: clamp(2rem, 5vw, 6rem);
    font-weight: 900;

    text-shadow: 0 0 10px rgb(255, 0, 0);

    color: rgb(255, 0, 0);

    opacity: 0;
    transition: opacity 0.15s ease;
    
    pointer-events: none;
    
}

.error.show {
    opacity: 1;
    animation: pop 0.2s ease;
    pointer-events: none;
}

@keyframes pop {
    0% { transform: scale(0.98); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}



footer {

    width: 100vw;
    height: calc(var(--hero-height) / 5);
    display: grid;
    justify-content: space-around;
    align-items: center;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;


    margin-bottom: 30px;

}

.foota {
    grid-column: 1;
    grid-row: 1;
}

.footb {
    grid-column: 1;
    grid-row: 2;
}

.footc {
    grid-column: 2;
    grid-row: 1 / 3;
}


.footer-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.footer-item h2{
    font-size: 10px;
    color: white;
    text-align: center;
    position: relative;
}

.footer-item p{

    font-weight: 900;
    font-size: 20px;
    color: white;

    text-wrap: wrap;

    text-align: center;
}

.footer-item i{
    color: white;
    font-size: 200%;
    margin: 10px;
    transition: transform 0.2s ease;
}

.footer-item i:hover {
    transform: scale(1.2);
}

.footer-item img{
    width: 65%;
    transition: transform 0.3s ease;
}

.footer-item img:hover {
    transform: scale(1.05);
}

}