@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

body, html {
    height:99.9vh;
    overflow: hidden;
	margin:0;padding:0;border:0;
	background:#0000FF;
}
div {
	margin:0;padding:0;border:0;
	font-family: 'Pinyon Script', cursive;
	font-size:4vmax;
	color:#00FF00;
	
}
* {
    -webkit-tap-highlight-color: transparent;
}
.paisagem {
	/*max-height:30vh;*/
	max-width:25vw;
	width:fit-content;

	/*height:fit-content;*/

}
.retrato {
	/*width:fit-content;*/
	object-fit: contain;
	max-height:35vh;
	/*max-width:35vw;*/

	height:fit-content;
}
.retrato_destaque {
	/*width:fit-content;*/
	object-fit: contain;
	max-height:47vh;
	/*max-width:35vw;*/

	height:fit-content;
}
.imagem_animacao{
	-webkit-transition: all .9s;
    -moz-transition: all .9s;
    -ms-transition: all .9s;
    -o-transition: all .9s;
    transition: all .9s;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 2.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
#video-flutuante {
    position: fixed;
    top: 5px;
    right: 5px;
    width: 25vw;
    aspect-ratio: 16 / 9;
    z-index: 99999;
    background: #000;
    border: 1px solid #ccc;
}

/* ------------------------------------------------------------------
   Somente mobile. O canvas já nasce mais largo que a tela no celular:
   .retrato/.retrato_destaque limitam só a altura, e em tela vertical
   35vh/47vh viram uma largura enorme; posicionada em left até 66%, a
   imagem passa da borda direita e estica o layout viewport do Android.
   Desktop não entra aqui e continua como está em produção.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    /* box-sizing é essencial aqui: #painel_poema tem width:100vw E
       padding:2vh inline no PHP. Sem border-box o padding soma à
       largura (100vw + 4vh) e vaza uns 30px num celular em pé. */
    #painel_imagens,
    #painel_poema,
    #painel_wait,
    #painel_lang {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .retrato,
    .retrato_destaque {
        max-width: 60vw;
    }

    .imagem {
        max-width: 60vw;
    }

    #video-flutuante {
        width: 50vw;
        max-width: calc(100vw - 10px);
        box-sizing: border-box;
        overflow: hidden;
    }
}