/* ---------------------------- */ /* Fuente personalizada */ /* ---------------------------- */ .xanh-mono-regular { font-family: "Xanh Mono"; font-weight: 400; font-style: normal; } .xanh-mono-regular-italic { font-family: "Xanh Mono"; font-weight: 400; font-style: italic; } ::selection { color: white; background: #9ec3ea; } /* ---------------------------- */ /* Estilos base del */ /* ---------------------------- */ body { margin: 0; padding: 0; font-family: sans-serif; height: 100vh; overflow: hidden; overflow-x: hidden; /* evita scroll lateral */ background-size: cover; background-position: center; background-repeat: no-repeat; animation: backgroundMove 60s ease-in-out infinite; } @keyframes backgroundMove { 0% { background-position: center 50%; } 25% { background-position: 55% 55%; } 50% { background-position: center 60%; } 75% { background-position: 45% 55%; } 100% { background-position: center 50%; } } /* ---------------------------- */ /* Vista fuera de horario */ /* ---------------------------- */ #fuera-de-horario { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; padding: 0 20px; color: white; background: black; font-family: "Xanh Mono", monospace; } #fuera-de-horario h1 { font-size: 2.2em; margin-bottom: 0.5em; font-style: italic; animation: fadeIn 3s ease-out forwards; } #fuera-de-horario p { font-size: 1.2em; line-height: 1.5; opacity: 0.8; animation: fadeIn 3s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------- */ /* Contenedor de la frase */ /* ---------------------------- */ #frase-container { position: absolute; width: 100%; height: 100%; max-width: 90vw; pointer-events: none; } /* Fragmentos de texto disperso */ #frase-container span { position: absolute; font-family: "Xanh Mono"; font-style: italic; color: white; font-size: 1.5em; font-weight: 400; display: inline-block; animation-name: floatText; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 20s; animation-delay: 0s; user-select: text; white-space: normal; overflow-wrap: break-word; } /* Corrección para móviles */ @media (max-width: 600px) { #frase-container { max-width: 80vw; max-height: 90vh; } #frase-container span{ font-size: 1.2em; } } @keyframes floatText { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } } /* ---------------------------- */ /* Botones flotantes */ /* ---------------------------- */ #botones { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 10; } #boton-cielo, #boton-frase, #boton-descarga, #boton-creditos{ font-size: 1.8em; text-decoration: none; background-color: rgba(0, 0, 0, 0.1); padding: 8px; border-radius: 100%; color: black; z-index: 10; opacity: .8; transition: 0.3s; cursor: pointer; } #boton-cielo:hover, #boton-frase:hover, #boton-descarga:hover, #boton-creditos:hover{ opacity: 1; } #creditos p, #creditos h1{ font-family: "Xanh Mono"; text-align: center; } /* Corrección para móviles */ @media (max-width: 600px) { #boton-cielo, #boton-frase, #boton-descarga, #boton-creditos { font-size: 1.3em; } } /* ---------------------------- */ /* Modal y overlay */ /* ---------------------------- */ .modal { pointer-events: none; opacity: 0; transition: opacity 0.5s ease; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .modal:target { pointer-events: auto; opacity: 1; } .modal .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 1; transition: opacity 0.5s ease; z-index: 101; } .modal-contenido { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: transparent; z-index: 102; transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; max-width: 500px; width: 90%; } .modal:target .modal-contenido { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Botón de cerrar modal */ .cerrar-btn { position: absolute; top: -40px; right: 0; font-size: 1.8em; color: #ababab; text-decoration: none; cursor: pointer; z-index: 103; user-select: none; transition: 0.3s; } .cerrar-btn:hover { color: #9ec3ea; }