* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}


:root {
    --cor1: #aaed00;
    --cor2: #5a7f05ff;
    --cor3: #c0dd78;
    --cor4: rgb(62, 87, 0);
    --cor5: rgba(0, 0, 0, 0.548);
    --cor6: rgba(255, 255, 255, 0.705); 
    --corletras1: rgb(214, 214, 214);
    --corletras2: rgb(51, 51, 51);

}


::-webkit-scrollbar {
    width: 1.5em;
    background-color: var(--cor3);
}
::-webkit-scrollbar-track {
    background-color: white;
}
::-webkit-scrollbar-thumb {
    background-color: var(--cor1);
    border-radius: 100vw;
}


html, body {
    width: 100%;
    height: 100%;
    font: normal 600 1em "Oswald";
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(45deg, var(--cor2), var(--cor1));
    timeline-scope: --bb;
}


#BUBBLESchamada,
#BUBBLESchamadaB,
#BUBBLESchamadaC {
    pointer-events: none;
}


#aviso {
    width: 90%;
    color: white;
    font-weight: 200;
    font-size: 1em;
    padding: 2%;
    margin-left: 2%;
}


#m3D {
    display: flex;
    width: 100dvw;
    height: 100dvh;
    background: url(midias/Bubbles\ pattern.svg);
    background-attachment: fixed;
    background-size: 5%;
    overflow-x: hidden;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.438));
    pointer-events: none;
}


#m3D model-viewer{
    width: 100%;
    height: 100%;
}


body.carregado #autentico {
    animation: autentico 0.5s ease-in;
}


@keyframes autentico {
    0%      {opacity: 0;}
    100%    {opacity: 1;}
}


body.carregado #refrescante {
    animation: refrescante 1s ease-in;
}


@keyframes refrescante {
    0%      {opacity: 0;}
    100%    {opacity: 1;}
}


body.carregado #limao {
    animation: limao 2s ease-in;
}


@keyframes limao {
    0%      {opacity: 0;}
    100%    {opacity: 1;}
}


#BUBBLESchamada {
    width: 70dvw;
    height: 70dvh;
    position: absolute;
    display: flex;
    top: 5%;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 3%;
    margin-right: 3%;
} 


#BUBBLESchamadaB {
    background-image: url(midias/BubblesLemon2.webp);
    width: 100dvw;
    height: 100dvh;
    background-size: cover;
    background-position: center center;
    box-shadow: 0px -15px 5px var(--cor5),
                0px 15px 5px var(--cor5);
    position: relative;
    z-index: 2;
    view-timeline-name: --bb;
} 


#BUBBLESlogo {
    height: 40dvh;
}


#chamadaB {
    background: linear-gradient(45deg, var(--cor1), var(--cor2));
    position: absolute;
    width: clamp(100px, 25dvw, 300px);
    margin-left: 0%;
    padding-left: 5%;
    padding-top: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: center;
    flex-direction: column;
    border-radius: 0 5px 5px 0;
    box-sizing: border-box;
    box-shadow: 25px 0px 5px var(--cor5);
    animation: cbanim linear both;
    animation-timeline: --bb;
    animation-range: entry 0% exit 50%;
}


@keyframes cbanim {
    0%      {opacity: 0; transform: translate(-50%, -50%);}
    50%     {opacity: 1; transform: translate(0%, -50%);}
}


#garrafa {
    font-family: "Nunito";
    font-weight: 900;
    line-height: 1.2em;
    font-size: 1.5em;
    color: white;
}


#descricao {
    color: white;
    font-size: 1em;
    font-weight: 300;
}


#BUBBLESchamadaC {
    background-image: url(midias/BubblesLemon1.webp);
    width: 100dvw;
    height: 100dvh;
    background-size: cover;
    background-position: bottom left;
    position: relative;
    view-timeline-name: --bb;
    overflow-x: hidden;
} 


#TABELA {
    display: flex;
    background: linear-gradient(45deg, var(--cor1), var(--cor2));
    position: absolute;
    width: 50dvw;
    height: auto;
    padding: 2%;
    border-radius: 10px 0px 0px 10px;
    top: 50%;
    right: 0;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: -25px 0px 5px var(--cor5);
    flex-direction: column;
    justify-content: center;
    animation: tanim linear both;
    animation-timeline: --bb;
    animation-range: entry 0% exit 50%;
}


@keyframes tanim {
    0%      {opacity: 0; transform: translate(50%, -50%);}
    50%     {opacity: 1; transform: translate(0%, -50%);}
}


#tabela {
    width: 80%;
    height: auto;
    margin-right: 0%;
    margin-top: 5%;
    background-color: white;
    display: grid;
    grid: repeat(12, 8%)/ repeat(5, 1fr);
    z-index: 2;
    justify-content: center;
    align-items: center;
    font: normal 600 0.8em "Oswald";
    border-radius: 10px;
}


#cabecalho {
    font-size: 1.4em;
    font-weight: 800;
    grid-area: 1/1/1/-1;
    background-color: white;
    margin-bottom: 5%;
    text-align: center;
    border-radius: 10px;
    border-bottom: rgba(0, 0, 0, 0.733) solid 2px;
}


.nutriA {
    font-size: 1em;
    padding-left: 10%;
}


#nutri1 {
    grid-area: 2/1/2/4;
    background-color: white;
}


#nutri2 {
    grid-area: 3/1/3/4;
    background-color: white;
}


#nutri3 {
    grid-area: 4/1/4/4;
    background-color: white;
}


#nutri4 {
    grid-area: 5/1/5/4;
    background-color: white;
}


#nutri5 {
    grid-area: 6/1/6/4;
    background-color: white;
}


#nutri6 {
    grid-area: 7/1/7/4;
    background-color: white;
}


#nutri7 {
    grid-area: 8/1/8/4;
    background-color: white;
}


#nutri8 {
    grid-area: 9/1/9/4;
    background-color: white;
}


#info1 {
    grid-area: 2/4/3/5;
    background-color: white;
}


#info2 {
    grid-area: 3/4/4/5;
    background-color: white;
}


#info3 {
    grid-area: 4/4/5/5;
    background-color: white;
}


#info4 {
    grid-area: 5/4/6/5;
    background-color: white;
}


#info5 {
    grid-area: 6/4/7/5;
    background-color: white;
}


#info6 {
    grid-area: 7/4/8/5;
    background-color: white;
}


#info7 {
    grid-area: 8/4/9/5;
    background-color: white;
}


#info8 {
    grid-area: 9/4/10/5;
    background-color: white;
}


.infoC,
.infoB {
    text-align: center;
    font-weight: 300;
}


#info1,
#info_1 {
    font-weight: 900;
}


#info_1 {
    grid-area: 2/5/3/6;
    background-color: white;
}


#info_2 {
    grid-area: 3/5/4/6;
    background-color: white;
}


#info_3 {
    grid-area: 4/5/5/5;
    background-color: white;
}


#info_4 {
    grid-area: 5/5/6/6;
    background-color: white;
}


#info_5 {
    grid-area: 6/5/7/6;
    background-color: white;
}


#info_6 {
    grid-area: 7/5/8/6;
    background-color: white;
}


#info_7 {
    grid-area: 8/5/9/6;
    background-color: white;
}


#info_8 {
    grid-area: 9/5/10/6;
    background-color: white;
}


#infoadd {
    grid-area: 10/1/-1/-1;
    padding: 5%;
    font-weight: 300;
    font-size: 0.9em;
}


#autentico,
#refrescante,
#limao {
    font-family: "Nunito";
    font-weight: 900;
    color: white;
    line-height: 1.2em;
}


#autentico {
    font-size: 1.5rem;
}


#refrescante {
    font-size: 2rem;
}


#limao {
    font-size: 3rem;
}


#ingredientes {
    width: 80%;
    height: auto;
    font-size: 0.9rem;
    font-weight: 300;
    text-shadow: 2px 2px 1px var(--cor5);
    color: white;
}


#INGREDIENTES {
    font-size: 1.5rem;
    text-shadow: 2px 2px 1px var(--cor5);
    color: white;
    padding-top: 5%;
}


#vetores {
    position: absolute;
    width: 22%;
    height: 100%;
    display: flex;
    right: 2%;
    padding-right: 4%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}


.bubblesvetores img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    align-items: center;
}


.bubblesvetores {
    height: 15%;
    width: 90%;
    background: linear-gradient(45deg, var(--cor1), var(--cor2));
    padding: 4%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 3px var(--cor5);
    animation: bbvanim linear both;
    animation-timeline: --bb;
    animation-range: entry 0% exit 50%;
}


@keyframes bbvanim {
    0%      {opacity: 0; transform: translateX(-50%);}
    50%     {opacity: 1; transform: translateX(0%);}
}





#RODAPE {
    height: 5dvh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 15px;
}


#RODAPE>#homebotao{
    color: white;
    align-self: center;
}


.f img{
    height: 100%;
    margin-top: 0%;
    text-shadow: 2px 2px 2px var(--cor5);
}


.f {
    margin-left: 10px;
    margin-right: 10px;
    text-shadow: 2px 2px 2px var(--cor5);
}


/*MENU*/
.WMENU {
    background: linear-gradient(45deg, white, var(--cor3));
}


.wmenu1 {
    color: var(--cor4);
}


.wm1 {
    color: var(--cor4);
}


.wm2 {
    color: var(--cor4);
}


.wm1:hover {
    background-color: var(--cor4);
    color: white;
    box-shadow: 5px 5px 5px var(--cor5);
}


.wm2:hover {
    background-color: var(--cor4);
    color: white;
    box-shadow: 5px 5px 5px var(--cor5);
}


.homebotao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px 5px 10px;
    text-decoration: none;
    color: var(--cor4);
    z-index: 2;
}

.homebotao:hover {
    background-color: var(--cor4);
    border-radius: 10px;
    color: white;
    box-shadow: 5px 5px 5px var(--cor5);
    cursor: pointer;
    transition: background-color 0.3s ease-in-out,
                box-shadow 0.4s ease-in-out;
}

/*LISTA DE PROJETOS*/

#listaPROJETOSd a:hover,
#listaPROJETOSm a:hover{
    background-color: var(--cor4);
}

#listaPROJETOSd a,
#listaPROJETOSm a{
    color: white;
}
#listaPROJETOSd li:hover a,
#listaPROJETOSm li:hover a{
    color: white;
}

#listaPROJETOSd.lst{
    background: linear-gradient(45deg, var(--cor2), var(--cor1));
    color: white;
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.185), inset -2px -2px 2px rgba(0, 0, 0, 0.185);
}
#listaPROJETOSm.lst{
    background: linear-gradient(45deg, var(--cor2), var(--cor1));
    color: white;
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.185), inset -2px -2px 2px rgba(0, 0, 0, 0.185);
}
/*LISTA DE PROJETOS*/



/*TELA DE LOADING*/
#center {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
}


#bubbleA {
    position: absolute;
    height: 70%;
    width: auto;
    top: 0;
    right: -20%;
    animation: bbba 1s infinite;
}


@keyframes bbba {
    0%      {transform: translate(0, 0); scale: 0; opacity: 0;}
    100%    {transform: translate(0, -100%); scale: 120%; opacity: 1;}
}


#bubbleB {
    position: absolute;
    height: 30%;
    width: auto;
    top: 50%;
    right: 50%;
    animation: bbbb 1.1s infinite;
}


@keyframes bbbb {
    0%      {transform: translate(0, 0); scale: 0; opacity: 0;}
    100%    {transform: translate(0, -100%); scale: 150%; opacity: 1;}
}


#bubbleC {
    position: absolute;
    height: 20%;
    width: auto;
    bottom: 0;
    right: 40%;
    animation: bbbc 1.2s infinite;
}


@keyframes bbbc {
    0%      {transform: translate(0, 0); scale: 0; opacity: 0;}
    100%    {transform: translate(0, -100%); scale: 120%; opacity: 1;}
}


#bubbleD {
    position: absolute;
    height: 100%;
    width: auto;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#loadingframe {
    background: linear-gradient(45deg, var(--cor1), var(--cor2));
    position: fixed;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease;
}


#loadingframe.paginacarregada {
    opacity: 0;
    pointer-events: none;
}

/*TELA DE LOADING*/



@media (max-width: 520px){


/*MENU HAMBURGER*/
   .wmenu2>svg {
    display: flex;
    fill: var(--cor4);
    }


    .wmenuside>svg {
    display: flex;
    fill: var(--cor2);
    }


    .wmenu2>svg:hover {
    background-color: var(--cor4);
    fill: white;
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .wmenuside>svg:hover {
    background-color: var(--cor2);
    fill: white;
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .wmenuside {
    background: linear-gradient(45deg, white, var(--cor3));
    }


    .wm1 {
    display: none;
    }


    .wm2 {
    display: none;
    }


    .WMENU {
    max-height: 10em;
    }


    .swm1 {
    color: var(--cor4);
    }


    .swm2 {
    color: var(--cor4);
    }


    .swm1:hover {
    background-color: var(--cor4);
    color: white;
    box-shadow: 5px 5px 5px var(--cor5);
    }


    .swm2:hover {
    background-color: var(--cor4);
    color: white;
    box-shadow: 5px 5px 5px var(--cor5);
    }
    /*MENU HAMBURGER*/
    /*MENU*/


    #garrafa {
    font-weight: 900;
    line-height: 1.2em;
    font-size: clamp(0.95rem, 7.5cqi, 1.1rem);
    }


    #descricao {
    font-size: clamp(0.6rem, 5cqi, 0.90rem);
    font-weight: 300;
    }


    #BUBBLESchamada {
    left: 50%;
    transform: translateX(-50%);
    }



}



@media (max-width: 500px){
    body {
    font-size: 0.8em;
}


}



@media (max-width: 680px){
    #TABELA {
    width: 70dvw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 5px 5px 5px var(--cor5);
    animation: tanim linear both;
    animation-timeline: --bb;
    animation-range: entry 0% exit 40%;
}


    #m3D {
    background-size: 15%;
}


@keyframes tanim {
    0%      {opacity: 0; transform: translate(-50%, 0%);}
    50%     {opacity: 1; transform: translate(-50%, -50%);}
}


    #tabela {
    width: 100%;
    }


    #ingredientes {
    width: 100%;
    }


    #BUBBLESlogo {
    width: 100%;
    }


    #vetores {
    width: 30%;
    }


    .bubblesvetores {
    height: 10%;
    width: 100%;
    } 
    
    
}


@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    #vetores {
    width: 40%;
    }


    #TABELA {
    height: 90%;
    }


    #tabela {
    height: 90%;
    font-size: 0.5em;
    }


    #ingredientes {
    width: 100%;
    font-size: 0.7em;
    }


    #INGREDIENTES {
    font-size: 1em;
    padding-top: 2%;
    }

    
    .bubblesvetores {
    height: 25%;
    width: 40%;
    }   

    
}