/* BASE --------------------------------------------------------- */
/* BASE --------------------------------------------------------- */
/* BASE --------------------------------------------------------- */

:root {
  --texto_primario: #e6eaf2;
  --texto_secundario: #9aa4b2;
  --texto_terciario: #2549ba;
  --neon_primario: #a855f7;
  --neon_secundario: #00cfff;
  --neon_terciario: #00ff9c;
  --neon_gold: #ffe600;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Press Start 2P", monospace;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 5px;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  color: var(--texto_primario);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  padding: 2% 3%;
  padding-top: 0;
  background: url("../imagens/background_pixelado.webp") no-repeat center /
    cover;
  position: relative;
}

.center {
  position: relative;
}

h1,
h2,
h3 {
  letter-spacing: 1px;
  line-height: 40px;
}

.linha {
  width: 90%;
  height: 1px;
  margin: 0 auto;
  color: white;
  background-color: var(--neon_secundario);
  box-shadow: 0 0 15px currentColor;
  opacity: 0.2;
}

svg {
  height: 100%;
  aspect-ratio: 1;
}

/* FOOTER -------------------------------------------------------- */
/* FOOTER -------------------------------------------------------- */
/* FOOTER -------------------------------------------------------- */

footer {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: -2%;
  width: 104%;
  height: 60px;
  padding: 15px 10px;
  border: 3px solid black;
  justify-content: space-around;
  opacity: 1;
  transition: opacity 1s;
  background:
    linear-gradient(
        rgba(0, 0, 0, 0.3),
        transparent,
        transparent,
        rgba(0, 0, 0, 0.3)
      )
      no-repeat,
    url("../imagens/background_pixelado.webp") no-repeat center / cover;
}

footer.nada {
  opacity: 0;
}

footer > div {
  display: flex;
  gap: 5px;
  align-items: center;
}

footer svg {
  height: 30px;
}

footer #dias svg,
footer #dias p {
  color: var(--neon_gold);
}

footer #total svg,
footer #total p {
  color: var(--neon_secundario);
}

/* CANVAS -------------------------------------------------------- */
/* CANVAS -------------------------------------------------------- */
/* CANVAS -------------------------------------------------------- */

canvas {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* TELA SECRETA ================================================ */
/* TELA SECRETA ================================================ */
/* TELA SECRETA ================================================ */

#tela_secreta {
  width: 70vw;
  height: 100%;
  padding: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  justify-content: center;
  align-items: center;
  transform: translateX(-100%);
  transition: transform .5s;
}

#tela_secreta.aberto {
  transform: translateX(0);
}

#tela_secreta button {
  background-color: red;
  padding: 10px;
  border-radius: 5px;
}

#tela_secreta button#cancel {
  position: absolute;
  bottom: 10%;
  right: 10%;
}