@font-face {
  font-family: 'Kosugi';
  src: url("../fonts/Kosugi-Regular.ttf") format('truetype');
}

body {
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-color: #1a0209; /* Fondo base borgoña muy oscuro */
  font-family: 'Courier', monospace;
  font-weight: normal;
  text-align: center;
  line-height: 1;
  color: #ffe5ec; /* Texto en un tono rosado/blanco muy suave */
  letter-spacing: 5px;
  margin: 0 auto;
}

/* Text decoration */

hr {
  border-bottom-width: 2px;
  border-color: #800f2f; /* Línea divisoria en borgoña puro */
}

a:hover {
  color: #ffb3c1; /* Enlaces pasan a borgoña claro al pasar el mouse */
  cursor: help;
}

a {
  color: #ffe5ec;
  text-decoration: none;
}

h2, h3, h4, h5 {
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  margin-left: 10px;
  margin-right: 10px;
}

h1 { font-size: 20px; letter-spacing: 9px; font-weight: normal; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }
h5 { font-size: 10px; }

/* Scrollbar con temática de vino */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: #1a0209; }
::-webkit-scrollbar-thumb { background: #800f2f; }
::-webkit-scrollbar-thumb:hover { background: #ffb3c1; }
::-webkit-scrollbar-corner { background: #1a0209; }

/* Class controls */
.hide { display: none; }

.button {
  padding: 0;
  border: none;
  outline: none;
  background: none;
}

button:active {
  border: none;
  box-shadow: none;
}

/* Animations con resplandor color vino/rosa */
.glowtext { animation: titleAnim 5s infinite; }
@keyframes titleAnim {
  50% {
    color: #ffffff;
    text-shadow: #ffb3c1 1px 4px 10px, #800f2f 0px 0px 5px;
  }
}

/* Efectos Glitch adaptados a aberración cromática basada en tonos Rojos y Cian oscuros */
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #a4133c;
  clip: rect(10%, 100%, 13%, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #a4133c;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(7px, 9999px, 101px, 0); }
  5% { clip: rect(95px, 9999px, 168px, 0); }
  10% { clip: rect(62px, 9999px, 58px, 0); }
  15% { clip: rect(153px, 9999px, 164px, 0); }
  20% { clip: rect(89px, 9999px, 231px, 0); }
  25% { clip: rect(187px, 9999px, 225px, 0); }
  30% { clip: rect(201px, 9999px, 230px, 0); }
  35% { clip: rect(243px, 9999px, 75px, 0); }
  40% { clip: rect(88px, 9999px, 194px, 0); }
  45% { clip: rect(223px, 9999px, 117px, 0); }
  50% { clip: rect(173px, 9999px, 122px, 0); }
  55% { clip: rect(4px, 9999px, 66px, 0); }
  60% { clip: rect(79px, 9999px, 42px, 0); }
  65% { clip: rect(220px, 9999px, 178px, 0); }
  70% { clip: rect(39px, 9999px, 74px, 0); }
  75% { clip: rect(196px, 9999px, 211px, 0); }
  80% { clip: rect(167px, 9999px, 128px, 0); }
  85% { clip: rect(2px, 9999px, 106px, 0); }
  90% { clip: rect(14px, 9999px, 47px, 0); }
  95% { clip: rect(8px, 9999px, 38px, 0); }
  100% { clip: rect(37px, 9999px, 143px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(109px, 9999px, 149px, 0); }
  5% { clip: rect(44px, 9999px, 217px, 0); }
  10% { clip: rect(145px, 9999px, 101px, 0); }
  15% { clip: rect(63px, 9999px, 117px, 0); }
  20% { clip: rect(108px, 9999px, 126px, 0); }
  25% { clip: rect(173px, 9999px, 159px, 0); }
  30% { clip: rect(28px, 9999px, 31px, 0); }
  35% { clip: rect(137px, 9999px, 76px, 0); }
  40% { clip: rect(49px, 9999px, 183px, 0); }
  45% { clip: rect(64px, 9999px, 155px, 0); }
  50% { clip: rect(214px, 9999px, 158px, 0); }
  55% { clip: rect(122px, 9999px, 232px, 0); }
  60% { clip: rect(241px, 9999px, 225px, 0); }
  65% { clip: rect(129px, 9999px, 107px, 0); }
  70% { clip: rect(79px, 9999px, 148px, 0); }
  75% { clip: rect(90px, 9999px, 156px, 0); }
  80% { clip: rect(244px, 9999px, 9px, 0); }
  85% { clip: rect(64px, 9999px, 43px, 0); }
  90% { clip: rect(218px, 9999px, 39px, 0); }
  95% { clip: rect(238px, 9999px, 35px, 0); }
  100% { clip: rect(32px, 9999px, 104px, 0); }
}

/* Custom elements */
.block {
  background-color: #2b0511; /* Bloques secundarios color vino */
  width: 55%;
  height: auto;
  margin: 35px auto 10px auto;
  box-shadow: #ffb3c1 0px 0px 4px;
  padding: 1px;
}