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

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

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Poppins',sans-serif;
}

/* ==========================
HOME PAGE
========================== */

.home{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:url("bg.png") center center/cover no-repeat;
}

/* ==========================
DARK OVERLAY
========================== */

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

/* ==========================
TANJIRO
========================== */

#tanjiro{

    width:520px;
    max-width:90%;

    position:relative;
    z-index:5;

    user-select:none;

    filter:drop-shadow(0 0 25px rgba(0,0,0,.7));

    animation:floatAnime 4s ease-in-out infinite;

}

@keyframes floatAnime{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================
ENTER BUTTON
========================== */

#enterBtn{

    position:absolute;

    left:50%;
    top:72%;

    transform:translateX(-50%);

    padding:18px 60px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    color:white;

    font-size:22px;

    font-weight:700;

    letter-spacing:1px;

    background:linear-gradient(135deg,#ff2d75,#ff7b54);

    box-shadow:

    0 0 20px #ff2d75,
    0 0 45px #ff2d75;

    transition:.35s;

    z-index:10;

}

#enterBtn:hover{

    transform:
    translateX(-50%)
    scale(1.08);

}

/* ==========================
KATANA SLASH
========================== */

#slash{

    position:absolute;

    left:50%;
    top:50%;

    width:0;
    height:6px;

    background:#00ffff;

    transform:
    translate(-50%,-50%)
    rotate(-20deg);

    opacity:0;

    z-index:20;

}

#slash.active{

    animation:slash .5s linear;

}

@keyframes slash{

    0%{
        width:0;
        opacity:1;
    }

    100%{
        width:1800px;
        opacity:0;
    }

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    #tanjiro{

        width:95%;

    }

    #enterBtn{

        width:85%;

        font-size:18px;

        top:74%;

    }

}