@font-face {font-family:"ironwood";src:url("IRONWOOD.eot?") format("eot"),url("IRONWOOD.woff") format("woff"),url("IRONWOOD.ttf") format("truetype"),url("IRONWOOD.svg#IRONWOOD-Medium") format("svg");font-weight:normal;font-style:normal;}
      .enlace-oculto {
    text-decoration: none;
    color: inherit;
    cursor: default;
}


        /* 2. Aplicación de la fuente a los elementos de tu página */
        body {
            /* Elimina la fuente 'ironwood' del body. Ahora el cuerpo usará la fuente sans-serif por defecto */
            font-family: sans-serif; 
            background-color: #f0f0f0;
            color: #333;
            margin: 40px;
            text-align: center;
        }

        h1 {
            /* Aplica la fuente personalizada 'ironwood' solo a los h1 */
            font-family: 'ironwood', sans-serif; 
            color: #333;
            font-size: 3em;
        }

        p {
            /* Los párrafos usan la fuente por defecto del body (sans-serif) */
            font-size: 1.2em;
        }


.home-button-container {
    display: flex;
    flex-direction: column; /* <-- Esto apila los elementos verticalmente */
    align-items: center;    /* <-- Esto centra la imagen y el texto */
    text-decoration: none;
}

/* <a href="index" class="home-button-container">
    <img src="Images/Ethereum_logo_translucent.svg" width="40" alt="Home Icon">
    <span style="color:white;">Home</span>
</a> */

#pot {
  bottom: 15%;
  position: absolute;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 50s;
}
@keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

#dupown {
    /* bottom: 15%; */ /* Puedes eliminar o ajustar esta línea */
    position: absolute;
    animation: linear infinite;
    animation-name: run-vertical; /* Cambia el nombre de la animación */
    animation-duration: 30s;
}

@keyframes run-vertical { /* Define la nueva animación vertical */
    0% {
        top: 0; /* Inicia arriba del contenedor posicionado */
        /* do: 0; */ /* 'do' no es una propiedad CSS válida, se ignora */
    }
    50% {
        top: 100%; /* Se mueve abajo (100% de la altura del contenedor) */
    }
    100% {
        top: 0; /* Vuelve arriba */
    }
}



.text-chromatic {
    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#b116ec),color-stop(0.5,#ff0021),color-stop(1,#fff11e));
    background-image: -webkit-linear-gradient(left,#b116ec 0%,#ff0021 50%,#fff11e 100%);
    background-size: 1000% 1000%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: Text-Chromatic 6s linear infinite;
    color: #f88f25; /* Fallback color for non-webkit browsers */
    white-space: nowrap;
} 

@keyframes Text-Chromatic {
    0% {background-position: 0% 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}
}




/* From the FISCH wiki */
body::before,
body::after {
  content: '❄️';
  position: fixed;
  font-size: 30px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: fall linear infinite;
  top: -50px;
}

#index::before,
#index::after {
  content: '❄️';
  position: fixed;
  font-size: 28px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: fall linear infinite;
  top: -50px;
}

.index::before,
.index::after {
  content: '❄️';
  position: fixed;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: fall linear infinite;
  top: -50px;
}

.index::before,
.index::after {
  content: '❄️';
  position: fixed;
  font-size: 26px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: fall linear infinite;
  top: -50px;
}

body::before {
  left: 15%;
  animation-duration: 7s;
  animation-delay: 0s;
  font-size: 28px;
}

body::after {
  left: 82%;
  animation-duration: 6.5s;
  animation-delay: 4.2s;
  font-size: 32px;
}

#index::before {
  left: 48%;
  animation-duration: 8s;
  animation-delay: 1.8s;
  font-size: 30px;
}

#index::after {
  left: 67%;
  animation-duration: 7.5s;
  animation-delay: 5.5s;
  font-size: 26px;
}

.index::before {
  left: 33%;
  animation-duration: 9s;
  animation-delay: 2.3s;
  font-size: 22px;
}

.index::after {
  left: 91%;
  animation-duration: 6s;
  animation-delay: 6.8s;
  font-size: 28px;
}

.index::before {
  left: 56%;
  animation-duration: 7s;
  animation-delay: 0.7s;
  font-size: 24px;
}

.index::after {
  left: 24%;
  animation-duration: 8.5s;
  animation-delay: 3.4s;
  font-size: 30px;
}

.page-header::before {
  content: '⛄';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 80px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
  transform: rotate(15deg);
}

.page-header::after {
  content: '⛄';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 70px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-15deg);
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(360deg);
  }
}
/* @font-face kit by Fonts2u (https://fonts2u.com) */ @font-face {font-family:"IRONWOOD-Medium";src:url("IRONWOOD.eot?") format("eot"),url("IRONWOOD.woff") format("woff"),url("IRONWOOD.ttf") format("truetype"),url("IRONWOOD.svg#IRONWOOD-Medium") format("svg");font-weight:normal;font-style:normal;}
.enlace-oculto {
    text-decoration: none;
    color: inherit;
    cursor: default;
}
/* Alineación para iconos SVG */
nav li {
    display: flex;
    align-items: center;
    gap: 24px; /* Espaciado oficial */
    padding: 0 12px;
    height: 40px;
    cursor: pointer;
    border-radius: 10px;
}

nav li svg {
    flex-shrink: 0;
}

nav li:hover {
    background-color: #f2f2f2;
}
.menu-btn {
    cursor: pointer;
    margin-right: 16px; /* Espacio exacto de YouTube */
    padding: 8px;       /* Área de clic más cómoda */
    border-radius: 50%; /* Para que el efecto hover sea circular */
}

.menu-btn:hover {
    background-color: #f2f2f2; /* Efecto al pasar el mouse */
}