estilo404.css

*{
    margin: 0;
    padding: 0;
}

.entre{
    padding: 40px 0;
}

.error404{
    background-image: url('img/memoji404.png');
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: center;
    padding: 140px 0;
    text-align: center;
    max-width: 900px;
    margin: auto;
}


.error404-item1{
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    width: 20%;
    margin-top: -10px;
    margin-bottom: 20px;

}


@keyframes floating{
    0%{transform: translate(0, 0px);}
    50%{transform: translate(0, 15px);}
    100%{transform: translate(0, -0px);}
}


.error404-btn {
text-align: center;
margin-top: 10px;
}

.error404-btn h1{
    color: var(--color-itens);
    font-size: 38px;
}

.error404-btn p{
    color: var(--color-word);
    font-size: 20px;
    margin: 10px 0 30px 0;
}

.error404-btn i{
    padding: 0 5px 0 0;
    margin: 0;
}


.error404-btn a{
    font-size: 20px;
    padding: 10px 30px;
    background: var(--color-itens) ;
    border-radius: 6px;
    color: var(--color-word-btn);
    text-decoration: none;
}


@media (max-width: 700px){
    .entre{
        padding: 0;
    }
    .error404-btn{
        margin: auto;
    }

    .error404-btn h1{
        font-size: 28px;
    }

    .error404-btn p{
        font-size: 16px;
    }

    .error404-btn a{
        font-size: 16px;
    }
}