:root {
  --cor-fundo: "yellow";
  --cor-texto: "green";
  --cor-imagem: "black";
  color-scheme: only light;
 }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: 'Arial','Franklin Gothic', 'Roboto', sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

.site {
  width: 100%;
  height: 100%;
  overflow: scroll;
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none; 
  transition: all 1s ease-out;
}


.carregando-tela {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.carregando .carregando-tela {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carregando-tela .carregando-status {
  text-align: center;
}

.carregando-tela .carregando-status .trevo {
  font-size: 2rem;
}

.carregando .midia-grid {
  opacity: 0;
  pointer-events: none;
}

.midia-grid {
  width: 200vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  background-size: cover;
}


.midia-grid li {
  background-color: var(--cor-imagem);
}

.midia-grid li > * {
  opacity: 0;
}

.midia-grid li > *:hover,
.midia-grid li.visivel > *{
  opacity: 1;
}

.midia-grid li:nth-child(2n) {
  align-self: center;
}

.midia-grid li:nth-child(3n) {
  align-self: flex-end;
}

.midia-grid .item-texto {
  text-transform: uppercase;
  font-size: 4rem;
  background-color: transparent;
}

.midia-grid li img {
  width: 100%;
  height: auto;
  z-index: 1;
  display: block;
}

.midia-grid li video {
  width: 100%;
  max-width: 423px;
}

header {
  z-index: 1000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.informacoes {
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--cor-texto);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas: 
  "A0 B0 C0 D0 E0"
  "A1 B1 C1 D1 E1"
  "A2 B2 C2 D2 E2"
  "A3 B3 C3 D3 E3"
  "A4 B4 C4 D4 E4";
}

.carregando .informacoes {
  opacity: 0;
}

.informacoes {
  transition: opacity ease-in 1s;
}

.informacoes .frase{
  padding: 1.5rem;
}

/* Descrição */

.informacoes .caixa {
  grid-area: A0;
  text-align: left;
  align-self: start;
}

.informacoes .e {
  grid-area: C0;
  text-align: center;
  align-self: start;
}

.informacoes .uma {
  grid-area: E0;
  text-align: right;
  align-self: start;
}

.informacoes .caverna {
  grid-area: A2;
  text-align: left;
  align-self: center;
}

.informacoes .de {
  grid-area: C2;
  text-align: center;
  align-self: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.informacoes .encontros {
  grid-area: E2;
  text-align: right;
  align-self: center;
}

.informacoes .enviados {
  grid-area: A4;
  text-align: left;
  align-self: end;
}

.informacoes .pelo {
  grid-area: C4;
  text-align: center;
  align-self: end;
}

.informacoes .acaso {
  grid-area: E4;
  text-align: right;
  align-self: end;
}

/* Trinca */

.informacoes img {
  min-width: 20px;
  width: 70%;
  max-width: 2rem;
}

.informacoes .T {
  grid-area: B0;
  text-align: center;
  align-self: end;
}

.informacoes .R {
  grid-area: D0;
  text-align: center;
  align-self: end;
}

.informacoes .I {
  grid-area: B2;
  text-align: center;
  align-self: center;
}

.informacoes .N {
  grid-area: D2;
  text-align: center;
  align-self: center;
}

.informacoes .C {
  grid-area: B4;
  text-align: center;
  align-self: start;
}

.informacoes .A {
  grid-area: D4;
  text-align: center;
  align-self: start;
}

/* Contador  */

.informacoes .contador-contagem,
.informacoes .contador-total {
  position: relative;
  font-family: serif;
  font-size: 1.4rem;
}

.informacoes .contador-contagem {
  text-align: center;
  margin-bottom: -0.5rem;
}

.informacoes .contador-total {
  text-align: center;
  margin-top: -0.5rem;

}

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

  .informacoes .frase{
    padding: 1rem;
  }

  .midia-grid  {
    width: 600vw;
  }

  .midia-grid .item-video,
  .midia-grid .item-imagem {
    max-width: 50vw;
  }

  .informacoes {
    font-size: 1rem;
  }

  .informacoes .contador-contagem,
  .informacoes .contador-total {
    font-size: 1.1rem;
  }

}

@media print {
  html, body, .site {
    overflow: visible;
    width: 100%;
    background-color: transparent;
  }

  .informacoes .contador-contagem,
  .informacoes .contador-total {
    display: none;
  }

}

@page {
  margin: 1cm;
}