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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050816;
    color:#fff;
    overflow:hidden;
}

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

#background{
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at top,#162447,#050816 70%);
    z-index:-2;
}

/* Pequeñas estrellas */

#background::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    radial-gradient(white 1px,transparent 1px);
    background-size:45px 45px;
    opacity:.15;
}

/* ==========================
   PANTALLAS
========================== */

.screen{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    padding:40px;

    opacity:0;
    visibility:hidden;

    transition:.8s;

}

.screen.active{

    opacity:1;
    visibility:visible;

}

/* ==========================
   TARJETAS
========================== */

.card{

    width:min(450px,95%);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:40px;

    text-align:center;

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

}

/* ==========================
   TITULOS
========================== */

h1{

    font-size:3rem;
    margin-bottom:15px;

}

h2{

    font-size:2rem;
    margin-bottom:20px;

}

p{

    line-height:1.8;
    color:#ddd;

}

/* ==========================
   INPUT
========================== */

input{

    width:100%;

    margin-top:25px;

    padding:16px;

    border:none;

    border-radius:12px;

    outline:none;

    font-size:1rem;

}

/* ==========================
   BOTONES
========================== */

button{

    margin-top:25px;

    padding:15px 40px;

    border:none;

    border-radius:50px;

    background:#ff4f8b;

    color:white;

    cursor:pointer;

    font-size:1rem;

    transition:.35s;

}

button:hover{

    transform:translateY(-4px);

    background:#ff2d55;

    box-shadow:
    0 15px 35px rgba(255,45,85,.4);

}

/* ==========================
   LOADER
========================== */

.loader{

    width:min(500px,90%);

    text-align:center;

}

.progress{

    margin:30px 0;

    width:100%;

    height:14px;

    background:#222;

    border-radius:30px;

    overflow:hidden;

}

#bar{

    width:0%;

    height:100%;

    background:#4B7BEC;

    border-radius:30px;

}

/* ==========================
   CONTENEDORES
========================== */

.container{

    width:min(1200px,95%);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

}

.container img{

    width:380px;

    border-radius:20px;

    object-fit:cover;

}

/* ==========================
   TYPING
========================== */

#typing{

    max-width:900px;

    text-align:center;

}

/* ==========================
   CANVAS
========================== */

/* ==========================
   CORAZÓN
========================== */

#heart{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    width:100%;
    height:100%;

    padding:20px;

}

#heartCanvas{

    display:block;

    width:min(90vw,500px);
    height:min(90vw,500px);

    cursor:pointer;

}

#heart h2{

    margin-top:20px;
    text-align:center;

}

@media(max-width:768px){

    #heartCanvas{

        width:85vw;
        height:85vw;

    }

}

/* ==========================
   CARTA
========================== */

.letter{

    width:min(750px,95%);

    background:white;

    color:#222;

    padding:50px;

    border-radius:20px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.35);

}

.letter p{

    color:#444;

    margin-top:20px;

}

/* ==========================
   GALERIA
========================== */

.gallery{

    margin-top:40px;

    width:min(1200px,100%);

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}

.gallery img{

    width:100%;

    border-radius:15px;

    aspect-ratio:1;

    object-fit:cover;

    transition:.35s;

}

.gallery img:hover{

    transform:scale(1.05);

}

/* ==========================
   FINAL
========================== */

#final h1{

    font-size:4rem;

}

#final p{

    margin-top:20px;

    font-size:1.2rem;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:992px){

.container{

    flex-direction:column;

}

.container img{

    width:100%;
    max-width:420px;

}

.gallery{

    grid-template-columns:
    repeat(2,1fr);

}

h1{

    font-size:2.4rem;

}

}

@media(max-width:600px){

body{

    overflow:auto;

}

.screen{

    padding:25px;

}

.card{

    padding:25px;

}

.gallery{

    grid-template-columns:1fr;

}

button{

    width:100%;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.5rem;

}

.container{

    gap:30px;

}

}