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

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
}

#notfound{
    width:100%;
    height:100vh;

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

    padding:20px;
}

.notfound{
    text-align:center;
    max-width:700px;
    width:100%;
}

/* 404 Number */

.notfound-404 h1{
    font-size:180px;
    font-weight:900;
    line-height:1;

    margin-bottom:10px;

    background:linear-gradient(
        135deg,
        #5b5ff8,
        #7c4dff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 8px 25px rgba(91,95,248,.20);
}

/* Title */

.notfound-404 h2{
    font-size:54px;
    font-weight:700;

    color:#27364d;

    margin-bottom:10px;
}

/* Description */

.notfound p{
    font-size:18px;
    line-height:1.7;

    color:#7b8798;

    max-width:500px;

    margin:0 auto 40px;
}

/* Button */

.notfound a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 20px;

    background:linear-gradient(
        135deg,
        #5b5ff8,
        #7c4dff
    );

    color:#fff;
    text-decoration:none;

    font-size:18px;
    font-weight:600;

    border-radius:50px;

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

    transition:.3s ease;
}

.notfound a:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(91,95,248,.35);
}

/* Responsive */

@media(max-width:768px){

    .notfound-404 h1{
        font-size:110px;
    }

    .notfound-404 h2{
        font-size:34px;
    }

    .notfound p{
        font-size:16px;
    }

    .notfound a{
        font-size:18px;
        padding:15px 30px;
    }
}