/* Definición de la fuente personalizada */
@font-face {
  font-family: 'Cascadia Code';
  src: url('cascadiacode.woff2') format('woff2');
}

/* Variables de estilo global */
:root {
  --primary-color: #fff;
  --border-radius: 4px;
}

/* Estilos generales del cuerpo */
body {
  background: #101010;
  color: var(--primary-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilos del encabezado */
header {
  margin-top: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Cascadia Code', monospace;
  text-transform: uppercase;
  font-size: 1.5em;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 1.5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

/* Estilos del contenido principal */
main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilos del contenedor de botones */
.button {
  padding: 16px;
  border-radius: var(--border-radius);
  box-shadow: 0 0 20px rgba(214, 138, 138, 0.6);
}

/* Estilos del botón */
.button button {
  width: 100%;
  height: 100%;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  border: none;
  background: linear-gradient(to bottom, #FFBB89, #7B6AE0);
  color: #fff;
  font-size: 150%;
  cursor: pointer;
}

/* Estilos del botón al pasar el mouse */
.button button:hover {
  filter: brightness(110%);
}

/* Animación del fondo del encabezado */
@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}