@keyframes AnimateBG {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 50%
    }
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 300% 300%;
    background-image: linear-gradient(
            -45deg,
            rgb(0, 169, 252) 0%,
            rgb(87, 230, 197) 25%,
            rgb(123, 232, 114) 51%,
            rgb(0, 255, 73) 100%
    );
    animation: AnimateBG 20s ease infinite;
    margin:0;
}

.main {
    text-shadow: 2px 4px 4px rgba(46, 91, 173, 0.6);
    font-size: 110%;
    color: #ffdca8;
}

.contact {
    flex-direction: column;
}

.title {
    font-family: 'Poiret One', cursive;
    font-size: 4rem;
    margin-bottom: .5rem;
    width: 100%;
}

.sub-title {
    border-top: .1rem solid #fff;
    padding: 1rem 4rem;
    text-align: center;
}