:root {
    --grey: #6D6E70;
    --salmon: #EA6060;
    --lightBlue: #8ED2C8;
    --blue: #57BEC6;
    --green: #55B184;
    --pink: #E26BA9;
    --lightPink: #E7A7CA;
    --lighLightPink: #F3B1B4;
    --toastedYellow: #EFBF33;
    --lightOrange: #EFB057;


    --headerHmin: 14vh;
    --marginH: 2vw;

    --headerHminMobile: 12vh;
    --marginHMobile: 6vw;
}




/*backgrounds*/
#backgroundNiveis {
    background-color: var(--lightBlue);
}

#projectBackground {
    background-color: var(--green);
}

#explorarBackground {
    background-color: var(--blue);
    transition: background-color 2s ease;
}

#escolasBackground {
    background-color: var(--lighLightPink);
}





/*general*/
@font-face {
    font-family: AuthenticSans130;
    src: url(data/font/AUTHENTIC\ Sans\ ^.otf);
    font-weight: bold;
}

body {
    margin: 0;
    font-family: AuthenticSans130;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

p {
    font-size: calc(14px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
    margin: calc(var(--marginH)/3) 0;
}

h1 {
    font-size: calc(65px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
    margin: 0;
}


li {
    font-size: calc(55px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
    margin: 0;
}


a{
    color: var(--grey);
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--black);
}


h2 {
    font-size: calc(40px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
    margin: 0;
}

h3 {
    font-size: calc(30px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
}

h4 {
    font-size: calc(20px + 0.390625vw);
    text-wrap: pretty;
    color: var(--grey);
    mix-blend-mode: multiply;
}

#main-container {
    position: absolute;
    top: 0;
    width: 100%;
}



header {
    display: flex;
    justify-content: space-between;
    margin: var(--marginH);
    margin-bottom: 0;
    height: min(var(--headerHmin), 500px);
    mix-blend-mode: multiply;
}

.headerLevel {
    width: 100%;
    margin: 0 !important;
}

#headerIndex {
    mix-blend-mode: normal !important;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.menuInside{
    position: absolute;
    margin: var(--marginH);
    right: 0;
}

.menu li {
    list-style-type: none;
    cursor: pointer;
    margin: 0 var(--marginH);
}

.menu a {
    color: var(--grey);
    text-decoration: none;
}

.menuSelect {
    text-decoration: underline;
}


.menuDiv {
    width: 100vw;
    min-height: calc(var(--vh, 1h) * 100);
    position: fixed;
    z-index: 201;
    background-color: var(--lightOrange);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.active {
    transition: opacity 1s;
    top: 0 !important;
    opacity: 1;
    pointer-events: auto;
}

#menuIcon {
    height: calc(6px + 1vw) !important;
    width: auto;
    stroke-width: 5px;
    cursor: pointer;
}

#lastMenuPage {
    color: var(--lightOrange);
}

#closeMenu,
#closeGame {
    height: calc(13px + 1vw) !important;
    width: auto;
}

#closeMenu,
#closeGame {
    stroke-width: 1.6px;
}



main {
    padding: var(--marginH);
}

.menuItems {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - min(var(--headerHmin), 500px) - var(--marginH) * 2);
    width: calc(100vw - var(--marginH)*2);
    margin: 0 var(--marginH);
}

.menuItems li {
    margin-bottom: calc(var(--marginH) / 2);
}

.menuItems li:hover {
    text-decoration: underline;
}

.menuItems a {
    color: var(--grey);
    text-decoration: none;
}

footer {
    margin: var(--marginH);
    width: calc(100vw - var(--marginH) * 2);
}

.support {
    margin-bottom: 4vh;
}


#backgroundIndex .support {
    margin-bottom: 0vh !important;
}


.support span {
    font-family: AuthenticSans130;
    font-size: 23px;
    color: var(--grey);
    mix-blend-mode: multiply;
}

.footerImg {
    display: flex;
    flex-wrap: wrap;

}

.footerImg img {
    height: 3vh;
    min-height: 30px;
    margin-right: 2vw;
    margin-top: 1vh;
    mix-blend-mode: multiply;
}

.footerDiv {
    display: flex;
}

#projectBackground .support {
    background-color: var(--green);
}



#escolasBackground .support {
    background-color: var(--lighLightPink);
}

.overflow-hidden {
    overflow: hidden;
}

svg {
    stroke: #6d6e70;
    mix-blend-mode: multiply;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    right: var(--marginH);
}




/** Index **/
#arrowIndex {
    stroke-linecap: round;
    stroke-linejoin: round;
    width: calc(10px + 1vw) !important;
    position: absolute;
    bottom: 0;
    left: calc(50% - (10px + 1vw) / 2) !important;
    stroke-width: 1.3px;
}

.logoHeaderIndex img {
    width: auto;
    height: 100%;
    cursor: pointer;
    mix-blend-mode: multiply;
}

.logoHeaderIndex {
    height: 100%;
}

.mainLanding {
    height: calc(100vh - min(var(--headerHmin), 500px) - var(--marginH) * 3);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--marginH);
    position: relative;
}

.indexImage {
    height: 100%;
}

.indexImage .indexIllustration {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 10vh;
}

.buttonIndex {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    z-index: 1;
    max-width: 25vw;
    max-height: 25vw;
    width: 12vw;
    filter: drop-shadow(0px 0px 0px #4444);
}

.buttonIndex:hover {
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
}

.landingIntro {
    margin-top: 15vh;
    margin-bottom: 20vh;
    width: 100%;
}

.iconsIntro {
    justify-content: center;
    margin-bottom: 10vh;
}

.iconsIntroTitle {
    margin-bottom: 5vh;
}

.iconsIntroTitle h2 {
    display: flex;
    justify-content: center;
}

.illustrationsIndex {
    display: flex;
    justify-content: space-around
}

.illustrationsIndex img {
    height: 20vw;
    margin-bottom: 5vh;
}

.illustrationsIndex div {
    display: grid;
    justify-items: center;
}




/** Level Menu **/
#levelMain {
    width: calc(100vw - var(--marginH) * 2);
    min-height: calc(100vh - min(var(--headerHmin), 500px) - var(--marginH) * 3);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: var(--marginH);
}

.levelMenu {
    display: flex;
}

.level {
    width: 16vw;
    height: 25vw;
    min-width: 230px;
    min-height: 360px;
    border-radius: 25px;
    filter: drop-shadow(0px 0px 0px #4444);
    transition: filter 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    max-width: 45%;
}

.level:hover {
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
}

.block:hover {
    filter: none;
    cursor: default;
}

.levelTitle {
    padding: 20px 20px 0 20px;
    height: 25%;
}

#levelMain span {
    color: var(--grey);
    mix-blend-mode: multiply;
    font-size: calc(16px + 0.6vw);
    line-height: calc(16px + 0.6vw);
    margin-top: 5px;
}

.levelTitle {
    padding: 20px 10px 0 10px;
}

.level .cover {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 75%;
    position: absolute;
    bottom: 0;
}

.levelFlex {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--marginH);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#alimentosSazonais {
    background-color: var(--blue);
}

#alimentosSazonais .cover {
    background-image: url(data/jogo/levels/alimentosSazonais.png);
}

#alimentosRegionais {
    background-color: var(--toastedYellow);
}

#alimentosRegionais .cover {
    background-image: url(data/jogo/levels/alimentosRegionais.png);
}

#rodadosAlimentos {
    background-color: var(--pink);
}

#rodadosAlimentos .cover {
    background-image: url(data/jogo/levels/rodaAlimentos.png);
}

#alimentacaoEquilibrada {
    background-color: var(--lighLightPink);
}

#alimentacaoEquilibrada .cover {
    background-image: url(data/jogo/levels/alimentacaoEquilibrada.png);
}

#levelMain a {
    text-decoration: none;
}

.block>.blockDiv {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 25px;
}

.underline{
    text-decoration-color:var(--grey);
}

.blockDiv img {
    width: 45px !important;
}

.nonBlock>.blockDiv {
    display: none !important;
}

.nonBlock .playLevel {
    position: absolute;
    bottom: -70px;
    right: -50px;
}

.block .playLevel {
    display: none;
}

.playLevel {
    display: none;
}

.playLevel img {
    width: 200px;
    height: auto;
}

.playLevel img:hover {
    filter: drop-shadow(0px 9px 40px rgba(0, 0, 0, 15));
}

.levelHover span {
    display: none;
}





/** Game **/
#canvas_parent {
    display: flex;
    justify-content: center;
    height: 85vh;
    width: 100%;
}

.gameBody {
    padding: 0 !important;
}

.headerGame {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--marginH);
    mix-blend-mode: multiply;
    height: min(var(--headerHmin), 500px);
}

.headerGameInside {
    position: absolute;
    right: 0;
    top: 0;
    margin: var(--marginH);
    mix-blend-mode: multiply;
}



.homeIcon {
    mix-blend-mode: multiply;
    width: calc(7px + 1.5vw);
}

.menu img {
    mix-blend-mode: multiply;
    width: calc(7px + 1.5vw);
}

.gameMenu {
    display: flex;
}



/** Project **/
#projectInfo {
    background-color: var(--green);
}

#projectInfo .textInfo {
    background-color: var(--green);
}

#projectInfo #textInfoTitle {
    background-color: var(--green);
}

#escolasInfo {
    background-color: var(--lighLightPink);
}

#escolasInfo #textInfoTitle {
    background-color: var(--lighLightPink);
}

#escolasInfo .textInfo {
    background-color: var(--lighLightPink);
}

.mainInfoText {
    display: flex;
    flex-direction: row-reverse
}

.leftInfoText {
    width: 40%;
    margin-top: 5vh;
}

.textInfo {
    width: 100%;
}

.info {
    margin-top: calc(var(--marginH));
}


.textInfoBox {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--marginH));
}

.imageInfo {
    width: 60%;
    display: flex;
    justify-content: center;
}

.imageInfo img {
    position: absolute;
    height: auto;
    width: 70%;
}

#escolasImg {
    width: 35%;
}

#projetoImg {
    width: 30%;
}

#textInfoTitle {
    font-family: AuthenticSans130;
    margin-top: var(--marginH);
    margin-bottom: calc(var(--marginH) / 2);
}

#textInfoTitle img {
    width: 20vw;
    margin-bottom: calc(var(--marginH) /2);
    margin-top: calc(var(--marginH) /2);
}







/*new Explore*/
#videoMain {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--marginH) * 3 - var(--headerHmin));
    max-height: calc(100vh - var(--marginH) * 3 - var(--headerHmin));
    position: relative;
    justify-content: space-between;
}

.arrow {
    display: flex;
    z-index: 200;
    background-color: var(--blue);
}

#arrowLeft {
    width: 1.7vw;
    margin-right: 1vw;
    stroke: #6d6e70;
    mix-blend-mode: multiply;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6px;
}

#arrowRight {
    width: 1.7vw;
    margin-left: 1vw;
    stroke: #6d6e70;
    mix-blend-mode: multiply;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6px;
}

.exploreContainer {
    height: calc(100vh - var(--marginH) * 3 - var(--headerHmin));
    display: flex;
    align-items: center;
}

.videoMain {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--blue);
    gap: calc(var(--marginH)/2);
}

.videoContainer {
    width: 65%;
}

.videoContainer video {
    width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.exploreContainer {
    position: relative;
}

.video_plus_info {
    display: flex;
    justify-content: space-between;
    gap: var(--marginH);
    position: absolute;
    top: 0;
    max-height: calc(100vh - var(--marginH) * 3 - var(--headerHmin));
    height: 100%;
    align-items: center;
}

.videoInfoFlex {
    display: flex;
    height: auto;
    gap: var(--marginH);
}


.exploreVideos {
    width: 90%;
    position: relative;
}

.exploreInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 1s ease;
    width: 35%;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 1em;
}

.exploreInfo p {
    margin: calc(var(--marginH)/2) 0;
}

.exploreInfo p:last-child {
    margin: 0 !important;
}

.infoVideoTitle {
    margin-top: 0.9vw !important;
}

.infoVideop {
    margin-top: 0.9vw !important;
}

.infoVideop {
    align-self: flex-end;
}

.infoVideop h4 {
    margin: calc(var(--marginH)/2) 0;
}

.arrowMobileNew {
    display: none;
}

.videoPage {
    height: calc(100vh - var(--marginH) - var(--marginH)* 6);
    display: flex;
    justify-content: center;
    margin-bottom: var(--marginH);
}

.videoPage video {
    height: 100%;
    width: -webkit-fill-available;
}


@media screen and (max-width:2000px) {
    li {
        font-size: calc(37px + 0.390625vw);
    }

    #mainIndex {
        padding-top: 0 !important;
    }

    .mainLanding {
        height: calc(100vh - min(var(--headerHmin), 500px) - var(--marginH)*2);
    }
}



@media screen and (max-width:1500px) {

    /*index*/
    #arrowIndex {
        width: calc(20px + 1.5vw) !important;
        stroke-width: 1px;
        left: calc(50% - (20px + 1.5vw) / 2) !important;
        
    }

    .indexImage {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .buttonIndex {
        width: 15vw;
        max-width: 15vw;
        max-height: 15vw;
    }

    .landingIntro {
        width: 100%;
    }

    #menuIcon {
        height: calc(8px + 1.5vw) !important;
    }

    #closeMenu,
#closeGame {
    mix-blend-mode: multiply;
        height: calc(10px + 1.5vw) !important;
        margin-left: 1.5vw;
}

    /*general*/
    .menuItems {
        font-size: calc(45px + 0.5vw);
    }




    /*info pages*/
    .textInfo {
        width: 100%;
        margin-bottom: var(--marginHMobile);
    }

    .imageInfo {
        width: 50%;
    }

    .leftInfoText {
        width: 50%;
    }

    #textInfoTitle img {
        width: 25vw;
    }

    .textInfoBox {
        display: flex;
        justify-content: space-between;
    }







    
}





@media screen and (max-width:900px) {
    .buttonIndex {
        width: 35vw;
        max-width: 35vw;
        max-height: 35vw;
    }

    p {
        font-size: calc(14px + 0.390625vw);
        margin: calc(var(--marginHMobile)/4) 0;
    }

    h1 {
        font-size: calc(40px + 0.390625vw);
    }

    li {
        font-size: calc(40px + 0.390625vw);
    }

    h2 {
        font-size: calc(36px + 0.390625vw);
    }

    h3 {
        font-size: calc(20px + 0.390625vw);
    }

    h4 {
        font-size: calc(17px + 0.390625vw);
        margin: calc(var(--marginHMobile)/2) 0 calc(var(--marginHMobile)/4) 0
    }

    .noneMobile {
        display: none;
    }


    .noneMobile {
        display: none;
    }




    /*icons*/
    #menuIcon {
        height: calc(10px + 1.5vw) !important;
    }

    #closeMenu,
    #closeGame {
        height: calc(20px + 1.5vw) !important;
        margin-left: 5vw;
        height: auto;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
    }

    /*index*/
    #arrowIndex {
        width: calc(27px + 1.5vw) !important;
        stroke-width: 1px;

        left: calc(50% - (27px + 1.5vw) / 2) !important;
    }

    .indexImage {
        display: flex;
        align-items: center;
    }

    .landingIntro {
        width: 100%;
        margin-bottom: 10vh;
    }

    .mainLanding {
        height: calc(var(--vh, 1h)*100 - min(var(--headerHminMobile), 500px) - var(--marginHMobile)* 2);
        margin: 0;
    }

    .illustrationsIndex {
        flex-direction: column;
    }

    .illustrationsIndex img {
        height: 50vw;
        margin-bottom: 2vh;
    }

    .illustrationsIndex div {
        margin-bottom: calc(var(--marginHMobile)*2);
    }






    /*general*/
    main {
        padding: var(--marginHMobile);
    }

    footer {
        margin: var(--marginHMobile);
        width: calc(100vw - var(--marginHMobile)*2);
    }

    .footerDiv {
        flex-direction: column;
    }

    .footerImg {
        flex-wrap: wrap;
    }

    .menuItems {
        margin: 0 var(--marginHMobile);
        height: calc(var(--vh, 1h)*100 - min(var(--headerHminMobile), 500px) - var(--marginHMobile) * 2);
        width: calc(100vw - var(--marginHMobile)*2);
    }

    .menuItems li {
        margin-bottom: calc(var(--marginHMobile) / 2);
    }

    #lastMenuPage {
        margin-bottom: 10vh;
    }

    header {
        height: min(var(--headerHminMobile), 200px);
        margin: var(--marginHMobile);
        margin-bottom: 0;
    }

    .headerGame {
        height: min(var(--headerHminMobile), 200px);
        margin: var(--marginHMobile);
        padding: 0;
    }

    .menuDiv {
        display: block;
        height: calc(var(--vh, 1h)*100);
        position: absolute;
        top: calc((var(--vh, 1h)*100) *-1);
        overflow-y: auto;
    }




    /*info Pages*/
    .leftInfoText {
        width: 100%;
    }

    .imageInfo img {
        position: static;
        width: 100%;
    }

    #escolasImg {
        width: 100%;
    }

    #projetoImg {
        width: 80%;
    }

    #textInfoTitle {
        margin-top: var(--marginHMobile);
        margin-bottom: calc(var(--marginHMobile) / 2);
    }

    #textInfoTitle img {
        width: 70vw;
        margin-bottom: calc(var(--marginHMobile) /2);
        margin-top: calc(var(--marginHMobile) /2);
    }

    .info {
        margin-top: calc(var(--marginH) * 3);
    }

    .imageInfo {
        width: 100% !important;
    }


    .textInfoBox {
        flex-direction: column;
        margin-top: var(--marginH);
    }

    .mainInfoText {
        display: flex;
        flex-direction: column;
    }




    /*niveis*/
    .level {
        width: 45%;
        height: 60vw;
        max-height: 300px;
        max-width: 250px;
        gap: var(--marginHMobile);
        box-sizing: border-box;
        min-width: unset;
        min-height: unset;
    }

    #levelMain {

        width: calc(100vw - var(--marginHMobile) * 2);
        min-height: calc(var(--vh, 1h) * 100 - var(--marginHMobile) * 3 - min(var(--headerHminMobile), 500px));
        margin: var(--marginHMobile);
        padding: 0;

    }



    .headerGameInside {
        margin: var(--marginHMobile);
    }

    .menuInside{
        position: absolute;
        margin: var(--marginHMobile);
        right: 0;
        mix-blend-mode: multiply;
    }


    /*new explore*/
    .video_plus_info {
        display: flex;
        flex-direction: column;
        margin-top: var(--marginHMobile);
    }

    .videoContainer {
        width: 100%;
    }

    .exploreInfo {
        width: 100%;
        margin: calc(var(--marginHMobile)/2) 0;
    }

    .exploreContainer {
        align-items: flex-start;
    }


    #arrowLeftMobile {
        width: 7vw;
        stroke-width: 2px;
    }

    #arrowRightMobile {
        width: 7vw;
        stroke-width: 2px;
    }

    .infoVideoTitle {
        margin-bottom: calc(var(--marginHMobile) / 4);

    }

    .infoVideop {
        margin: 0 !important;
    }

    .videoInfoFlex {
        flex-direction: column;
    }

    #videoMain {
        height: calc(var(--vh, 1h)* 100 - var(--marginHMobile)* 3 - var(--headerHminMobile));
        max-height: calc(var(--vh, 1h)* 100 - var(--marginHmobile)* 3 - var(--headerHminMobile));
    }



    .exploreVideos {
        width: 100%;
        position: relative;
        overflow-y: overlay;
        overflow-x: hidden;
        margin-bottom: calc(var(--marginHMobile) + 6vw);
    }

    .arrow {
        display: none;
    }



    #arrowLeftMobile {
        width: 6vw;
        stroke-width: 2px;
    }

    #arrowRightMobile {
        width: 6vw;
        stroke-width: 2px;
    }

    .videoPage {
        height: auto;
        display: block;
        justify-content: center;
        align-items: flex-start;
    }

    .videoPage video {
        height: auto;
        width: 100%;
        margin-bottom: 0;
    }

    .arrowMobileNew{
        width: calc(100% - var(--marginHMobile)* 2);
        height: fit-content;
        display: flex;
        position: absolute;
        bottom: 0;
        align-items: center;
        background-color: var(--blue);
        transition: background-color 1s ease;
        justify-content: space-between;
        padding: var(--marginHMobile) 0;
    }

}

.exploreVideos::-webkit-scrollbar {
    width: 6px;
}

.exploreVideos::-webkit-scrollbar-track {
    background: transparent;
}

.exploreVideos::-webkit-scrollbar-thumb {
    background: rgba(109, 110, 112, .5);
}

.exploreVideos::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.exploreVideos::-webkit-scrollbar-button {
    display: none;
}