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

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

/* ==========================================
                BODY
========================================== */

body{

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

    background:
    linear-gradient(
        135deg,
        #ffd5ea,
        #ff9ccc,
        #ff6ab3
    );

    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;
}

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

.container{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:20;
}

/* ==========================================
            INTRO
========================================== */

#intro{

    position:fixed;

    inset:0;

    z-index:9999;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #ffd5ea,
        #ff9ccc,
        #ff6ab3
    );

    animation:introFade 1.5s forwards;

    animation-delay:4.5s;
}

@keyframes introFade{

    to{

        opacity:0;

        visibility:hidden;
    }

}

/* ==========================================
        TELARAÑA PARALLAX
========================================== */

#web{

    position:absolute;

    width:180vw;
    height:180vw;

    left:50%;
    top:50%;

    border-radius:50%;

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

    opacity:.18;

    background-image:

    radial-gradient(

        circle,

        transparent 0%,
        transparent 14%,

        rgba(255,255,255,.18) 14.5%,

        transparent 15%

    ),

    repeating-conic-gradient(

        from 0deg,

        rgba(255,255,255,.18) 0deg,

        rgba(255,255,255,.18) 1deg,

        transparent 1deg,

        transparent 30deg

    );

    transition:.15s;
}

/* ==========================================
                NIEBLA
========================================== */

.fog{

    position:absolute;

    width:250%;

    height:220px;

    background:
    radial-gradient(
        rgba(255,255,255,.35),
        transparent 70%
    );

    filter:blur(45px);

    animation:fogMove 18s linear infinite;
}

.fog2{

    bottom:15%;

    opacity:.50;

    animation-duration:28s;
}

.fog3{

    top:8%;

    opacity:.25;

    animation-duration:35s;
}

@keyframes fogMove{

    from{

        transform:
        translateX(-400px);
    }

    to{

        transform:
        translateX(400px);
    }

}

/* ==========================================
                ARAÑA INTRO
========================================== */

#spider{

    position:absolute;

    left:50%;

    transform:
    translateX(-50%);

    top:-120px;

    font-size:70px;

    animation:
    spiderDrop 3s ease forwards;
}

#spider::before{

    content:"";

    position:absolute;

    width:3px;

    height:250px;

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

    left:50%;

    transform:
    translateX(-50%);

    top:-245px;
}

@keyframes spiderDrop{

    from{

        top:-120px;
    }

    to{

        top:28%;
    }

}

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

#title{

    position:absolute;

    width:100%;

    bottom:15%;

    text-align:center;

    color:white;

    opacity:0;

    animation:
    titleShow 2s forwards;

    animation-delay:1.2s;
}

#title h1{

    font-size:58px;

    text-shadow:
    0 0 20px
    rgba(255,255,255,.50);
}

#title p{

    margin-top:12px;

    font-size:24px;
}

@keyframes titleShow{

    to{

        opacity:1;
    }

}

/* ==========================================
                TARJETA
========================================== */

.card{

    width:100%;

    max-width:460px;

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

    backdrop-filter:
    blur(10px);

    -webkit-backdrop-filter:
    blur(10px);

    border-radius:25px;

    padding:25px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 15px 40px
    rgba(0,0,0,.18);

    transition:.15s;
}

/* ==========================================
            TELARAÑAS
========================================== */

.webSmall{

    position:absolute;

    font-size:70px;

    opacity:.10;
}

.web1{

    left:-10px;
    top:-10px;
}

.web2{

    right:-10px;
    top:-10px;
}

/* ==========================================
            ARAÑAS
========================================== */

.spider{

    position:absolute;

    font-size:30px;

    animation:
    spiderMove
    4s
    ease-in-out
    infinite;
}

.spider::before{

    content:"";

    position:absolute;

    width:2px;

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

    left:50%;
}

.s1{

    left:18%;

    top:35px;
}

.s1::before{

    height:60px;

    top:-58px;
}

.s2{

    left:48%;

    top:10px;

    animation-delay:1.3s;
}

.s2::before{

    height:85px;

    top:-83px;
}

.s3{

    right:18%;

    top:35px;

    animation-delay:2.4s;
}

.s3::before{

    height:65px;

    top:-63px;
}

@keyframes spiderMove{

    0%,100%{

        transform:
        translateY(0);
    }

    50%{

        transform:
        translateY(18px);
    }

}

/* ==========================================
            IMAGEN
========================================== */

.hero{

    width:140px;

    height:140px;

    margin:auto;

    margin-top:50px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid
    #ff5db1;
}

.hero img{

    width:100%;

    height:100%;

    object-fit:cover;
}

/* ==========================================
            TEXTOS
========================================== */

h2{

    text-align:center;

    color:#ff1493;

    margin-top:15px;
}

.sub{

    text-align:center;

    color:#666;

    margin:10px 0 20px;
}

.footer{

    margin-top:18px;

    text-align:center;

    color:#666;

    font-size:13px;
}

/* ==========================================
            FORMULARIO
========================================== */

label{

    display:block;

    margin-top:12px;

    font-weight:bold;

    color:#444;
}

input{

    width:100%;

    padding:12px;

    margin-top:5px;

    border-radius:10px;

    border:1px solid #cccccc;

    font-size:16px;
}

input:focus{

    outline:none;

    border:2px solid
    #ff5db1;
}

button{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(
        90deg,
        #ff5db1,
        #ff1493
    );

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;
}

button:hover{

    transform:scale(1.02);

    box-shadow:
    0 5px 15px
    rgba(255,20,147,.35);
}

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

@media(max-width:480px){

    .card{

        padding:18px;
    }

    #title h1{

        font-size:38px;
    }

    #title p{

        font-size:18px;
    }

    #spider{

        font-size:55px;
    }

    .hero{

        width:110px;
        height:110px;

        margin-top:45px;
    }

    .webSmall{

        font-size:50px;
    }

    .spider{

        font-size:25px;
    }

}