/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

}


/* ===========================
   FUENTE
=========================== */

body{

    font-family:Georgia, serif;

}


/* ===========================
   FONDO
=========================== */

.background{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url("Gestalt Monotheistic Deity Physiology.gif");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-2;

}


/* Oscurece un poco el GIF */

.background::after{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.15);

}


/* ===========================
   CONTENEDOR
=========================== */

.container{

    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* ===========================
   BOTÓN
=========================== */

.dream-button{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

}


/* ===========================
   ESTRELLA
=========================== */

.dream-button img{

    width:140px;

    animation:
        spin 18s linear infinite,
        glow 3s ease-in-out infinite;

}


/* ===========================
   TEXTO
=========================== */

.dream-button p{

    margin-top:18px;

    color:white;

    font-size:24px;

    letter-spacing:4px;

    text-shadow:

        0 0 5px white,

        0 0 12px white,

        0 0 20px white;

}


/* ===========================
   GIRO
=========================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ===========================
   BRILLO
=========================== */

@keyframes glow{

    0%{

        filter:

        drop-shadow(0 0 5px white)

        brightness(.8);

    }

    50%{

        filter:

        drop-shadow(0 0 35px white)

        brightness(1.8);

    }

    100%{

        filter:

        drop-shadow(0 0 5px white)

        brightness(.8);

    }

}


/* ===========================
   CELULAR
=========================== */

@media screen and (max-width:768px){

    .dream-button img{

        width:90px;

    }

    .dream-button p{

        font-size:18px;

        letter-spacing:2px;

    }

}

/* ============================= */
/* Cursor decorativo (solo PC) */
/* ============================= */

#cursorFollower {

    position: fixed;

    left: 0;

    top: 0;

    width: 52px;

    height: 52px;

    pointer-events: none;

    z-index: 999999;

    display: none;

}

#cursorFollower img{

    width: 100%;

    height: 100%;

    display: block;

}

@media (hover: hover) and (pointer: fine){

    #cursorFollower{

        display: block;

    }

}

/* ==================================================
   HOME.HTML
================================================== */

.home-background{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url("FONDO.gif");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-2;

}

.home-background::after{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.20);

}

.about-box{

    position:absolute;

    top:8%;

    left:50%;

    transform:translateX(-50%);

    width:75%;

    max-width:1000px;

    height:78%;

    background:rgba(5,10,25,.55);

    border:2px solid #70d4ff;

    border-radius:20px;

    box-shadow:
        0 0 15px #70d4ff,
        0 0 35px rgba(112,212,255,.5);

    backdrop-filter:blur(6px);

    padding:35px;

    display:flex;

    flex-direction:column;

}

.about-box h1{

    color:white;

    text-align:center;

    font-size:42px;

    letter-spacing:6px;

    margin-bottom:25px;

    text-shadow:
        0 0 10px #70d4ff,
        0 0 20px #70d4ff;

}

.about-content{

    color:white;

    font-size:19px;

    line-height:1.9;

    overflow-y:auto;

    flex:1;

    padding-right:10px;

}

.about-content::-webkit-scrollbar{

    width:8px;

}

.about-content::-webkit-scrollbar-thumb{

    background:#70d4ff;

    border-radius:20px;

}

/* ===========================
   HOME CELULAR
=========================== */

@media screen and (max-width:768px){

    .about-box{

        width:92%;

        height:82%;

        top:4%;

        padding:20px;

    }

    .about-box h1{

        font-size:28px;

        letter-spacing:3px;

    }

    .about-content{

        font-size:16px;

        line-height:1.7;

    }

}

/* ==========================
        LIBRO
========================== */

.book-container{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:420px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

}


/* ==========================
      PORTADA / GIF / LIBRO
========================== */


#closedBook{

    width:100%;

}


#bookAnimation{

    width:100%;

}


#openBook{

    width:min(700px,90vw);

}



#closedBook img,
#bookAnimation img{

    width:100%;

    height:auto;

    display:block;

}



#openBook > img{

    width:100%;

    height:auto;

    display:block;

}


/* ==========================
      AJUSTES INDIVIDUALES
========================== */


#closedBook{

    transform:scale(0.65);

}


#bookAnimation{

    transform:scale(1.35);

}


#openBook{

    transform:scale(1.25);

}


/* ==========================
      VISIBILIDAD
========================== */

#bookAnimation{

    display:none;

}


#openBook{

    display:none;

    position:relative;

}


/* ==========================
      PÁGINA IZQUIERDA
========================== */

#leftPage{

    position:absolute;

    top:9%;

    left:7%;

    width:39%;

    height:78%;

    overflow-y:auto;

    text-align:center;

    padding:18px;

    box-sizing:border-box;

}


/* ==========================
      PÁGINA DERECHA
========================== */

#rightPage{

    position:absolute;

    top:9%;

    right:7%;

    width:39%;

    height:78%;

    overflow-y:auto;

    text-align:center;

    padding:18px;

    box-sizing:border-box;

}


/* ==========================
      TÍTULOS
========================== */

#leftTitle,
#rightTitle{

    margin:0;

    margin-bottom:15px;

    font-size:28px;

    color:#3d2a18;

}


/* ==========================
      TEXTO
========================== */

#leftText,
#rightText{

    font-size:17px;

    line-height:1.6;

    color:#3f3227;

}


/* ==========================
      IMÁGENES
========================== */

#leftImage,
#rightImage{

    width:75%;

    max-width:220px;

    margin:15px auto;

    display:block;

    border-radius:8px;

}

/* ==========================
      IMAGEN ÚNICA
========================== */


#leftGallery img:only-child,
#rightGallery img:only-child{

    width:75%;

    max-width:180px;

}


/* ==========================
      BOTÓN
========================== */

#leftButton,
#rightButton{

    display:inline-block;

    margin-top:20px;

    padding:10px 22px;

    border-radius:30px;

    text-decoration:none;

    background:#355d8b;

    color:white;

    font-size:15px;

    transition:.3s;

}

#leftButton:hover,
#rightButton:hover{

    transform:scale(1.05);

}


/* ==========================
      CONTROLES
========================== */

.bookControls{

    position:absolute;

    left:50%;

    bottom:-55px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:18px;

}


#prevPage,
#nextPage{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

    background:white;

    box-shadow:0 0 10px rgba(0,0,0,.25);

}


#pageNumber{

    color:white;

    font-size:18px;

    font-weight:bold;

    text-shadow:0 0 6px black;

}


/* ==========================
      SCROLL
========================== */

#leftPage::-webkit-scrollbar,
#rightPage::-webkit-scrollbar{

    width:6px;

}

#leftPage::-webkit-scrollbar-thumb,
#rightPage::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:20px;

}


/* ==========================
      CELULAR
========================== */

@media (max-width:768px){

.book-container{

    width:78vw;

    max-width:380px;

}

}


#leftPage,
#rightPage{

    top:10%;

    height:74%;

    padding:10px;

}


#leftTitle,
#rightTitle{

    font-size:18px;

}


#leftText,
#rightText{

    font-size:12px;

}



.bookControls{

    bottom:-40px;

}


#prevPage,
#nextPage{

    width:34px;

    height:34px;

    font-size:16px;

}


#pageNumber{

    font-size:15px;

}

/* ==========================
      AJUSTE DE TAMAÑO
      GIF Y LIBRO ABIERTO
========================== */


/* GIF DE ABRIR LIBRO */

#bookAnimation{

    transform:scale(1.37);

}



/* LIBRO ABIERTO */

#openBook{

    transform:scale(1.37);

}