/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
background-image: url("visual/videogif/space.gif");
background-repeat: repeat;
margin: 0;
}

h1 {
  text-align: center;

  font-family: "Stalinist One", sans-serif;

  /* GRADIENTE ESPACIAL */
  background: linear-gradient(
    90deg,
    white,
    #8fd3ff,
    #a78bfa,
    #ff8bd8,
    #FFD700,
    white,
    #8fd3ff
  );

  background-size: 300% 100%;

  /* Hace que el gradiente sea el color del texto */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Movimiento */
  animation: estrellas-titulo 6s linear infinite;

  /* Brillo */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
          drop-shadow(0 0 10px rgba(120, 180, 255, 0.5));
}

/* ====================
   MOVIMIENTO DEL TÍTULO
   ==================== */

@keyframes estrellas-titulo {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }

}

.cuadro {
width: 300px;
margin: 20px auto;
padding: 15px;
background-color: black;
border: 2px solid green;
text-align: center;
}

/* ====================
CONSOLA + RASTUAN
==================== */

.consola {
position: relative;

width: 600px;
height: 440px;

margin: 30px auto;
}

/* FONDO DE LA CONSOLA */

.fondo-consola {
position: absolute;

width: 800px;
height: auto;

left: 50%;
top: 60%;

transform: translate(-50%, -50%);

z-index: 1;
}

/* RASTUAN */

.consola .codec {
position: absolute;

width: 135px;

left: 50%;
top: 25%;

transform: translate(-50%, -50%);

margin: 0;

overflow: hidden;

border: 3px solid black;

cursor: pointer;

z-index: 2;
}

/* IMAGEN DE RASTUAN */

.codec img {
display: block;

width: 100%;
height: auto;

filter:
sepia(100%)
hue-rotate(45deg)
saturate(130%)
contrast(120%)
brightness(85%);

animation: codec-flicker 0.15s infinite;
}

/* LÍNEAS HORIZONTALES DE LA PANTALLA */

.codec::after {
content: "";

position: absolute;

inset: 0;

background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 2px,
rgba(0, 0, 0, 0.18) 3px,
rgba(0, 0, 0, 0.18) 4px
);

pointer-events: none;
}

/* PARPADEO DE LA TRANSMISIÓN */

@keyframes codec-flicker {
0% {
opacity: 1;
}

50% {
opacity: 0.96;
}

100% {
opacity: 1;
}
}

/* GLITCH */

.codec.glitch {
filter: brightness(130%) contrast(150%);
}

.codec.glitch img {
transform: translateX(var(--glitch-x));
}

/* ====================
CUADRO DE DIÁLOGO
==================== */

.dialogo {
  display: none;

  position: absolute;

  width: 240px;
  height: 180px;

  padding: 10px;

  background-color: black;
  color: green;

  border: 3px solid black;

  text-align: center;

  box-sizing: border-box;

  overflow-y: auto;

  left: 50%;
  top: 22%;

  transform: translate(calc(-50% - 220px), -50%);

  z-index: 3;

  scrollbar-width: none;
}

.dialogo::-webkit-scrollbar {
  display: none;
}

/* ====================
REDES
==================== */

.redes {
position: absolute;

right: 20px;
top: 90px;

width: 150px;
padding: 10px;

background-color: black;

border: 2px solid gold;

text-align: center;

box-sizing: border-box;
}

.redes h3 {
margin-top: 5px;
margin-bottom: 10px;

background: linear-gradient(
90deg,
gold,
orange,
red,
crimson,
white
);

background-size: 300% 100%;

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

animation: gradiente-redes 4s linear infinite;
}

@keyframes gradiente-redes {
0% {
background-position: 0% 50%;
}

100% {
background-position: 300% 50%;
}
}

.redes a {
display: block;

margin: 5px 0;

color: #FFD700;

text-decoration: none;
}

.redes a:hover {
color: white;
}
/* ====================
   TEXTO TERMINAL RETRO
   ==================== */

.dialogo {
  text-shadow:
    0 0 3px green,
    0 0 6px rgba(0, 255, 0, 0.35);
}

.letra-terminal {
  animation: terminal-letra 0.12s ease-out;
}

@keyframes terminal-letra {

  0% {
    opacity: 0;

    text-shadow:
      0 0 10px lime,
      0 0 15px lime;
  }

  40% {
    opacity: 1;

    text-shadow:
      0 0 5px lime,
      0 0 10px green;
  }

  100% {
    opacity: 1;

    text-shadow:
      0 0 3px green,
      0 0 6px rgba(0, 255, 0, 0.35);
  }

}