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

@font-face{

    font-family:LoveBoho;

    src:url("../fuentes/LoveBoho.otf");

}

/*==============================
        GENERAL
===============================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial, Helvetica, sans-serif;

    color:white;

    overflow-x:hidden;

    background:black;

}

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

.fondo{

    position:fixed;

    inset:0;

    background-image:url("../img/FONDO1.gif");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-2;

}

.overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(5px);

    z-index:-1;

}

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

.contenedor{

    width:90%;

    max-width:950px;

    margin:auto;

    padding:70px 0;

}

/*==============================
        TITULO
===============================*/

h1{

    font-family:LoveBoho;

    font-size:72px;

    text-align:center;

    margin-bottom:60px;

    color:white;

    text-shadow:

        0 0 12px hotpink,

        0 0 30px deeppink;

}

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

.carta{

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

    backdrop-filter:blur(12px);

    border-radius:30px;

    padding:45px;

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

    box-shadow:0 0 35px rgba(255,105,180,.35);

    animation:aparecer 1.2s ease;

}

.carta h2{

    text-align:center;

    font-size:30px;

    margin-bottom:35px;

    color:#ffd8ea;

}

.carta p{

    font-size:22px;

    line-height:2;

    text-align:justify;

}

/*==============================
        REGRESAR
===============================*/

.volver{

    text-align:center;

    margin-top:70px;

}

.volver img{

    width:220px;

    border-radius:25px;

    border:5px solid white;

    box-shadow:0 0 30px hotpink;

    transition:.35s;

    cursor:pointer;

}

.volver img:hover{

    transform:scale(1.08);

    box-shadow:0 0 45px deeppink;

}

.volver p{

    margin-top:20px;

    font-size:22px;

}

/*==============================
        ANIMACIONES
===============================*/

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:768px){

    h1{

        font-size:48px;

    }

    .carta{

        padding:25px;

    }

    .carta h2{

        font-size:24px;

    }

    .carta p{

        font-size:18px;

        line-height:1.8;

    }

}