* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    padding-bottom: 1em;
}

main {
    display: flex;
    width: 70%;
    height: 40%;
    background-color: rgb(71, 3, 134);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Got box-shadow from materialize CSS website */
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

main h2 {
    margin-top: auto;
    font-size: 5em;
    color: #fff;
}

.container {
    margin: 1.5em 0 auto 0;
}

span {
    height: 1.5em;
    width: 1.5em;
    background: rgb(14, 219, 219);
    display: inline-block;
    border-radius: 50%;
    margin: 0.3em;
}

#Circle-1 {
    animation: bounce 1.5s ease-in-out .10s infinite;
}

#Circle-2 {
    animation: bounce 1.5s ease-in-out .20s infinite;
}

#Circle-3 {
    animation: bounce 1.5s ease-in-out .30s infinite;
}

#Circle-4 {
    animation: bounce 1.5s ease-in-out .40s infinite;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }
/* If value is position circles will bounce down */
    25% {
        transform: translateY(-2em);
    }
}