body {
    background: url("https://images5.alphacoders.com/373/373604.jpg") no-repeat center center fixed;
    background-size: cover;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;

}

.container {
    padding: 20px;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
}

h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #000814;
}

p {
    font-size: 18px;
    margin-bottom: 20px;
    color: black;
    font-family: 'Nunito', sans-serif;
    font-family: 'Roboto Slab', serif;
}

.button {
    display: inline-block;
    padding: 14px 26px;
    font-size: 22px;
    background-color: #ff9900;
    color: #000000;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.30s;
    font-family: 'Nunito', sans-serif;
    font-family: 'Roboto Slab', serif;



}

.button:hover {
    border: 2px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em black;
    transform: translateY(-0.25em);

}

@media (max-width: 767px) {

    /* Center the container on mobile devices */
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}

main {
    background-color: #fff;
    padding: 20px;
    color: #000;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
    margin-top: 50px;
    background: url(https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=712&q=80) no-repeat center center fixed;
    background-size: cover;
    border-radius: 50px;
    
}

main:hover {
    transform: translateY(-0.25em);
}

span {
    color: #c1121f;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.button {
    animation: shake 1s cubic-bezier(.36, .07, .19, .97) both infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}