* {
    box-sizing: border-box
}

html,
body {
    height: 100vh;
}

body {
    font: 300 3.8vw/15vh 'Open Sans', sans-serif;
    overflow: hidden;
    padding: 0;
    margin: 0;

    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 500% 500%;

    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

h1,
p {
    line-height: 150%;
    margin: 0;
}

h1 {
    font-size: 12vw;
}

.mainContainer {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    color: #fff;
    left: 50%;
    top: 50%;
}

@media screen and (max-width: 410px) {
    p {
        font-size: 1rem;
    }
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}