@media screen and (max-width: 700px) {
        body {
            font-size: 1.5em;
        }

        .image {
            height: 200px;
        }
    }

    @media screen and (min-width: 700px) {
        body {
            font-size: 1em;
        }

        .image {
            height: 150px;
        }
    }

    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        font-family: "Exo", sans-serif;
        color: #fff;
        background: linear-gradient(-60deg, #ed7b2c, #0498a5, #ee7752, #23d5ab);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }

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

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

    .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    h1 {
        font-weight: 300;
    }

    h3 {
        color: #eee;
        font-weight: 100;
    }

    h5 {
        color: #eee;
        font-weight: 300;
    }

    a,
    a:hover {
        text-decoration: none;
        color: #ddd;
    }