/* 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-color: white;
  color: black;
  font-family: Verdana;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/*.window.active {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*}*/

#password-window { /* Usamos el ID directamente */
    position: absolute; /* O 'fixed' si no quieres que se mueva con el scroll */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* Asegura que esté encima del overlay */
}

#main-secret-window { /* Usamos el ID directamente */
    position: fixed; /* O 'absolute' si la quieres dentro de un contenedor scrollable */
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0); /* Centra horizontalmente, 0 en vertical */
    z-index: 100;
}


#confirmation-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 20%;
}

body {
    background-image: url('./images/mac_os_35.jpg'); /* 1. Ruta a tu imagen */
    background-size: cover; /* 2. Escala la imagen para cubrir toda el área */
    background-position: center center; /* 3. Centra la imagen */
    background-repeat: no-repeat; /* 4. Evita que la imagen se repita */
    background-attachment: fixed; /* 5. ¡ESTO ES CLAVE para que no se mueva con el scroll! */
}