@font-face {
    font-family: 'Scriptorama Markdown JF';
    src: url('../links/fonts/ScriptoramaMarkdownJF.woff2') format('woff2'),
        url('../links/fonts/ScriptoramaMarkdownJF.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@-ms-viewport {
    width: extend-to-zoom 980px;
    min-zoom: 1;
    max-zoom: 1;
}

@-o-viewport {
    width: extend-to-zoom 980px;
    min-zoom: 1;
    max-zoom: 1;
}

@viewport {
    width: extend-to-zoom 980px;
    min-zoom: 1;
    max-zoom: 1;
}

html{
    font-family: 'Scriptorama Markdown JF', Georgia, 'Times New Roman', Times, serif;
    color: #1b1464;
    cursor: url(./../links/media/artes-assets/pc/seta_vermelha.png), auto;
    overflow: scroll;
    /*overflow: hidden;*/
    /*height: -webkit-fill-available;*/
    height: 110vh;
    height: calc(var(--vh) * 110);
    width: 100%;
    -ms-touch-action:pan-y;
        touch-action:pan-y; 
}


html.prevent-scroll{
    overflow: hidden;
}

body{
    overflow: hidden;
    margin: 0;
   
}

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

preloader.loaded.triggered{
    display: none !important
}



capa{
    display: flex;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 333;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    
}



.legenda{
    position: absolute;
    z-index: 111111111111111111111;
    color: red;
    opacity: 0;
}

.legenda.savemode.topo{
    top: 0%;
    right: 2%;
    font-size: 28px;
    opacity: 1;
    margin-block-start: 0;
    margin-block-end: 0;
}

.legenda.savemode.inferior{
    bottom: 0%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 12px;
    opacity: 1;
    
}

#btn-iniciar{
    max-width: initial;
    position: absolute;
    right: 5%;
    top: 17vh;
    width: 28vh;
}

.block{
pointer-events: none;
}

.bubble-container{
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh) * 100);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}


html.tampinha_amarela{
    cursor: url(../links/media/artes-assets/pc/tampinha_icon_amarela.png), auto;
}
html.tampinha_vermelha{
    cursor: url(../links/media/artes-assets/pc/tampinha_icon_vermelha.png), auto;
}
html.tampinha_preta{
    cursor: url(../links/media/artes-assets/pc/tampinha_icon_preta.png), auto;
}
html.tampinha_laranja{
    cursor: url(../links/media/artes-assets/pc/tampinha_icon_laranja.png), auto;
}
html.tampinha_verde{
    cursor: url(../links/media/artes-assets/pc/tampinha_icon_verde.png), auto;
}

body{
    background:url(./../links/media/artes-assets/pc/bg.png) no-repeat;
    background-position: center center, bottom center;
    background-size: cover;
    /*overflow: hidden;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}

body::before{
    
    content: ' ';
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    height: 150px;
    pointer-events: none;
    background: url(../links/media/artes-assets/pc/overlay.png) no-repeat;
    background-position: 0% calc(100% + 1vw);
    background-size: 100% auto;
    z-index: 99999;

}

body.hide-for-print::before{
    opacity: 0;
}

.hide{
    display: none;
}

.disabled:not(html){
    opacity: 0.4;
}

html.disabled *{
    pointer-events: none;
}


section:not(.loaded){
    display: none !important;
}

section#container{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background: url(../links/media/artes-assets/pc/pergaminho.png) no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        max-width: 1920px;
        max-height: 1080px;
        height: 100%;
        position: absolute;
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        
}

.interaction:hover{
    opacity: 0.8;

}

preloader{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100vw;
    height: 100vh;
    z-index: 11111111;
    background-color: white;
}

 

    


h1{
    font-size: clamp(1.7rem,5vh,45px);
}

menu.esq h1{
    font-size: clamp(0.92em,2.5vw,3vh);
    /*font-size: clamp(0.92em,2.5vw,4.8vh);*/
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

h2{
    font-size: clamp(0.9rem,3.3vh,22px);
    font-size: calc(var(--vh) * 3);
    margin-block-start: 0.4rem;
    margin-block-end: 0.4rem;
    color: #0071bc;
}



.ingame.titulo{
    width: 100%;
    max-width: 158%;
    width: 25vw;
    opacity: 1;
    position: absolute;
    /*display: block !important;*/
    top: 1vh;
    left: 5vh;
    z-index: 999;
}

.ingame.titulo * img {
    width: 100%;
}

body {
    min-height: 100vh;
    min-height: calc(var(--vh) * 100);
    /*width: 100%;
    height: 100vh;*/
    /* mobile viewport bug fix */
    height: -moz-available;       
    height: -webkit-fill-available; 
    height: fill-available; 
  }
  
  html {
    height: 100vh;
    height: calc(var(--vh) * 100);
    height: -moz-available;       
    height: -webkit-fill-available; 
    height: fill-available; 
  }

* img{
    width: 7vw;
    max-width: 150px;
    height: auto;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

#container{
    width: calc(90%);
    
    overflow: hidden;
    max-width: 1920px;
    max-height: 1080px;
    
}



.tampinhacontainer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position:absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    pointer-events: none;
    z-index: 0;
    max-width: 57px;
}

.tampinhacontainer.active{
    z-index: 1;
    /*opacity: 0.6;*/
}

img.tampinha{
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

menu.menu-intro-text{
    pointer-events: none;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    margin-top: 20vh;
}

menu.menu-intro-text h1{
    max-width: 70%;
    font-size: clamp(0.92em,2.5vw,4.8vh);
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

img#description{
    width: 128vh;
    max-width: unset;
    height: auto;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

@media (min-width: 900px){

    html.resize-fix{
        height: -webkit-fill-content;
        height: calc(100vh + 10px);
        height: calc((var(--vh) * 100) + 10px);
    }

.tampinhacontainer.tamanho-4{
    width: 12vh;
    width: calc(var(--vh) * 12);
    height: auto;
    min-width: 20px;
    max-width: 50px;
    /*transform: translate(-2vw,-2vw);*/
}
.tampinhacontainer.tamanho-3{
    width: 9vh;
    width: calc(var(--vh) * 9);
    height: auto;
    min-width: 25px;
    max-width: 40px;
    -webkit-transform: translate(-1vw,-1vw);
        -ms-transform: translate(-1vw,-1vw);
            transform: translate(-1vw,-1vw);
}
.tampinhacontainer.tamanho-2{
    width: 8vh;
    width: calc(var(--vh) * 8);
    height: auto;
    min-width: 18px;
    max-width: 30px;
    -webkit-transform: translate(-0.5vw,-0.5vw);
        -ms-transform: translate(-0.5vw,-0.5vw);
            transform: translate(-0.5vw,-0.5vw);
}
.tampinhacontainer.tamanho-1{
    width: 4vh;
    width: calc(var(--vh) * 4);
    height: auto;
    min-width: 10px;
    max-width: 20px;
    -webkit-transform: translate(-0.25vw,-0.25vw);
        -ms-transform: translate(-0.25vw,-0.25vw);
            transform: translate(-0.25vw,-0.25vw);
}

}

.button-container{
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: all;
}

.button-container.active{
    z-index: 3;
}

.button{
    position: absolute;
    width: 2vw;
    height: 2vw;
    background-color: red;
    -webkit-transition: all 0.7 ease-in-out;
    -o-transition: all 0.7 ease-in-out;
    transition: all 0.7 ease-in-out;
    border-radius: 50px;
    color: white;
    text-align: center;
    opacity: 1;
}

.button.left{
    top: calc(50% - 0.5vw);
    left: 0;
    
}
.button.top{
    top: 0;
    left: calc(50% - 0.5vw);
}
.button.right{
    top: calc(50% - 0.5vw);
    right: 0;
}
.button.bottom{
    bottom: 0%;
    left: calc(50% - 0.5vw);
}
.button.delete{
    top: 0%;
    left: 50%;
}
.button-container{
    display: none;
}
.active{
    display: block;
}


tick{
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

tick:hover{
    /*transform: scale(3.0);*/
    /*opacity: 0.7;*/
}

.cor-tampinha{
    width: 7vw;
    height: 7vw;
}

.cores_tampinhas{
    width: 3.5vw;
    max-width: 38px;
    margin-right: 5px;
    pointer-events: all;
}

linha{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

linha.animais{
    width: 18vw;
    /*max-width: 330px;*/
}

linha.animais img {
    width: 16.8vw;
    min-width: 90px;
    max-width: unset;
}

linha.tamanhos{
    width: 17vw;
    /*max-width: 280px;*/
}

linha.cores{
    width: 17vw;
    pointer-events: none;
    /*max-width: 280px;*/
}

section{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: relative;
    
}

menu{
    width: 26%;
    height: 100%;
    margin: 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

menu.dir:hover{
    cursor: url(./../links/media/artes-assets/pc/seta_vermelha.png), auto !important;
}



@media (max-height: 580px){

menu.menu-intro-text{
    zoom: 0.9;
}

}

menu.esq{
    margin-top: 9%;
    width: 15%;
    height: 74%;
    max-width: 240px;
    z-index: 121;
}

menu.dir{
    width: 6%;
    height: 90%;
    margin: 2% 4% 0% 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    z-index: 121;
}

menu.dir .botao{
    margin-left: auto;
    width: 15vw;
    margin-bottom: 2px;
    max-width: 240px !important;
    max-width: inherit;
}

menu.dir #close-button{
    min-width: 7vw;
}

desenho{
    /*width: 75%;*/
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    text-align: center;
    padding: 5%;
    height: 95%;
    margin: 1%;
    z-index: 111;
    /*pointer-events: none;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow :hidden;
    white-space: nowrap;
    -ms-flex-item-align: center;
        align-self: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
  -o-text-overflow: ellipsis;
    
     text-overflow: ellipsis; /* Adds the ... */

}

desenho .canvas-container{
background-color: #fff1dc;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: relative;
pointer-events: all;
overflow:hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */
}

desenho img{

    width: 88vh;
    width: calc(var(--vh) * 88);
    max-width: 100%;
    margin: auto;
    max-height: 88%;
    height: auto;
    z-index: 111;
    pointer-events: none;
    position: relative;

}

desenho img.canvas{
    outline: #fff1dc 30px solid;
    border-width: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

    separador{
        width: 22vw;
    }

    separador img{
        width: auto;
        max-width: 90%;
        min-width: 200px;
    }



.popup {


display: none;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
text-align: center;
background-color: rgba(0,0,0,0.7);
z-index: 999;
}

.popup.active{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}



.popup div {
width: auto;
height: auto;
background-color: wheat;
padding: 2em;
background-image: url(../links/media/artes-assets/pc/pergaminho.png);
background-size: 94%;
background-position: center;
background-repeat: no-repeat;
}

#description.hide-in-mobile{
    margin: auto;
    margin-left: 10%;
    height: auto;
    margin-top: 20%;
    display: block;
    width: 83vh;
    max-width: unset;
}

portrait-warning{
    display: none !important;
}

fullscreen-warning{
    color: white;
    width: 100vw;
    height: 102vh;
    z-index: 9999999999999;
    background-color: #333333;
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
}

fullscreen-warning img{
    position: fixed;
    top:50%;
    left: 50%;
    max-width: unset;
    width: auto;
    height:80vh;
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%);
}

@media (max-width: 900px){


.legenda.savemode.topo{
    right: 2%;
    font-size: 10px;
    top: -10px;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.legenda.savemode.inferior{
    bottom: -2%;
    left: 50%;
    font-size: 5.5px;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

html {
    min-height: calc(100vh + 2px);
    min-height: calc((var(--vh) * 100) + 2px);
    height: -moz-available;       
    height: -webkit-fill-available; 
    height: fill-available; 
    max-width: 100vw;
}

section#container{
    height: calc(90vh);
    height: calc(var(--vh) * 90);
}    



h1{
    font-size: clamp(0.7rem,4.3vh,23px);
}

menu h1{
    font-size: clamp(0.4em,2.5vw,2.8vh);
}

menu.menu-intro-text h1 {
    font-size: calc(var(--vh) * 4);
}

h2{
    /*font-size: clamp(7px,10px,12px);*/
    /*font-size: calc(var(--vw) * 3);*/
    font-size: 0.33em;
    margin-block-start: 0.2rem;
    margin-block-end: 0.2rem;
}

#btn-iniciar {
    top: 14vh;
}

linha.animais img {

    min-width: 40px;
    margin-right: 5px;

}

linha.tamanhos {
    width: 20vw;
    height: 18px;
}

linha.cores{
    width: 25vw;
}

linha:last-of-type{
    opacity: 1;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    min-width: 80px;
    width: 24vw;
}

linha:last-of-type .cores_tampinhas{
    margin-right: 18%;
    margin-bottom: 5%;
}

.dir linha:last-of-type{
    min-width: 80px;
    width: 16vw;
}

separador img {
    width: 131%;
    max-width: unset;
    min-width: 122px;
}

menu.esq {

    margin-left: 0px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-flex-item-align: start;
        align-self: flex-start;
    zoom: 0.85;

}

    menu.dir .botao{
        width: 17vw;    
    }

    separador{
        height: 10px;
        width: 100% !important;
    }

    #description{
        max-width: unset;
        width: 110vh;
        margin-top: 9vh;
        margin-left: 17vh;
    }

    .tampinhacontainer.tamanho-4{
        width: 30px;
        height: auto;
        min-width: unset;
        max-width: unset;
        /*-webkit-transform: translate(-1vw,-1vw);
            -ms-transform: translate(-1vw,-1vw);
                transform: translate(-1vw,-1vw);*/
    }
    .tampinhacontainer.tamanho-3{
        width: 20px;
        height: auto;
        min-width: unset;
        max-width: unset;
        /*-webkit-transform: translate(-2vw,-2vw);
            -ms-transform: translate(-2vw,-2vw);
                transform: translate(-2vw,-2vw);*/
    }
    .tampinhacontainer.tamanho-2{
        width: 15px;
        height: auto;
        min-width: unset;
        max-width: unset;
        /*-webkit-transform: translate(-1.5vw,-1.5vw);
            -ms-transform: translate(-1.5vw,-1.5vw);
                transform: translate(-1.5vw,-1.5vw);*/
    }
    .tampinhacontainer.tamanho-1{
        width: 10px;
        height: auto;
        min-width: unset;
        max-width: unset;
        /*-webkit-transform: translate(-0.7vw,-1.5vw);
            -ms-transform: translate(-0.7vw,-1.5vw);
                transform: translate(-0.7vw,-1.5vw);*/
    }

    .hide-in-mobile{
        display: none !important;
    }

    .tampinhacontainer img{
        position: relative;
        top: calc(var(--vh) * -4);
        left: calc(var(--vw) * -1);
    }

}

@media (max-height: 375px){

    html{
        width: 100vw;
    }


    body::before {
    
        display: none;
    
    }


desenho img.canvas {
    outline: #fff1dc 10px solid;
    
}



}

@media (min-width: 901px)
{

    .hide-in-desktop{
        display: none !important;
    }

    fullscreen-warning{
        display: none !important;
    }

}



@media all and (orientation: portrait) {

    section{
        display: none !important;
    }

    portrait-warning{
        display: block !important;
        position: fixed;
        top: 0%;
        left: 0%;
    }

    portrait-warning img{
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
    }

    fullscreen-warning{
        display: none;
    }

    .bubble-container{
        display: none !important;
    }

    body::before{
        background: unset
    }

}


/*animacao*/

.bubble {
    -webkit-animation: bubbleanimation 0.3s infinite;
            animation: bubbleanimation 0.3s infinite;
    /*display: block  !important;*/
    opacity: 1  !important;
  }
  
  @-webkit-keyframes bubbleanimation {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1)
    }
    75%{
        -webkit-transform: scale(1.2);
                transform: scale(1.2) 
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1)
    }
  }
  
  @keyframes bubbleanimation {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1)
    }
    75%{
        -webkit-transform: scale(1.2);
                transform: scale(1.2) 
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1)
    }
  }

  .bubble{
      position: absolute;
      z-index: 999;
      pointer-events: none;
      display: none;
  }

  .bubble1{
      right: -6%;
      bottom: -50%;
  }

  .bubble1 img{
      width: 12vw;
  }

  .bubble2{
      right: 25%;
      bottom: -50%;
  }

  .bubble2 img{
      width: 9vw;
  }

  .bubble3{
      right: 56%;
      bottom: -50%;
  }

  .bubble3 img{
      width: 5vw;
  }

  .bubble4{
      right: 77%;
      bottom: -50%;
  }

  .bubble4 img{
  }

  .bubble5{
      left: -3%;
      bottom: -50%;
  }

  .bubble5 img{
      width: 10vw;
  }

  .force-hide{
      display: none !important;
  }

  .force-show{
      display: block !important;
  }
  
  .tampinhacontainer.savemode img{
    width: calc(80% - 7px);
    /*width: calc(100% - (var(--vh) * 1.1))  !important;*/
    width: calc(100%)  !important;
    height: auto !important;
    min-width: unset;
    min-height: unset;
    max-height: unset;
    max-width: unset;
    -webkit-transform: translateY(var(--vh) * 1.5);
        -ms-transform: translateY(var(--vh) * 1.5);
            transform: translateY(var(--vh) * 1.5);
}

.tampinhacontainer.tampinha-4.savemode img{
    width: calc((var(--vh) * 0.7) - 11px) !important;
    padding: 15px;
    transform: translate;
    
}

.tampinhacontainer.savemode {
    opacity: 0.3 !important;
}

#browser-warning{
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 99999999999999999;
    position: fixed;
    z-index: 99999999999999999999;
    text-align: center;
    color: white;
}

#browser-warning div{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

#browser-warning h1{
    text-align: center;
    margin: 0;
    width: auto;
}

#browser-warning img{
    width: 100%;
    max-width: 250px;
}

*:not(.editablebox):not(input) {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}