html,
body {
    position: relative;
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #274c5e;
    background-color: #e8ebf5;
    background-size: contain;
    background-repeat: repeat;
    background-attachment: fixed;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
}

.Container {
    text-align: center;
    position: relative;
}

.MainTitle {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.MainDescription {
    width: 100%;
    font-size: 1.2rem;
    font-weight: lighter;
}

.MainGraphic {
    position: relative;
    text-align: center;
    margin: auto;
}

.MainGraphic img {
    width: 50%;
}

.Cog {
    width: 10rem;
    height: 10rem;
    fill: #ff5722;
    transition: easeInOutQuint();
    -webkit-animation: CogAnimation 5s infinite;
    animation: CogAnimation 5s infinite;
}

.Spanner {
    position: absolute;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    top: 10%;
    left: 20%;
    width: 10rem;
    height: 10rem;
    fill: #8EC0E4;
    -webkit-animation: SpannerAnimation 4s infinite;
    animation: SpannerAnimation 4s infinite;
}

.Hummingbird {
    position: absolute;
    width: 3rem;
    height: 3rem;
    fill: #30A9DE;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@-webkit-keyframes CogAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes CogAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes SpannerAnimation {
    0% {
        -webkit-transform: translate3d(20px, 20px, 1px) rotate(0deg);
        transform: translate3d(20px, 20px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
    }

    15% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
    }

    20% {
        -webkit-transform: translate3d(1000px, -1000px, 1px) rotate(180deg);
        transform: translate3d(1000px, -1000px, 1px) rotate(180deg);
    }

    30% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
    }

    40% {
        -webkit-transform: translate3d(1000px, -1000px, 1px) rotate(360deg);
        transform: translate3d(1000px, -1000px, 1px) rotate(360deg);
    }

    50% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0px) rotate(360deg);
        transform: translate3d(0, 0px, 0px) rotate(360deg);
    }
}

@keyframes SpannerAnimation {
    0% {
        -webkit-transform: translate3d(20px, 20px, 1px) rotate(0deg);
        transform: translate3d(20px, 20px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
    }

    15% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
    }

    20% {
        -webkit-transform: translate3d(1000px, -1000px, 1px) rotate(180deg);
        transform: translate3d(1000px, -1000px, 1px) rotate(180deg);
    }

    30% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(360deg);
    }

    40% {
        -webkit-transform: translate3d(1000px, -1000px, 1px) rotate(360deg);
        transform: translate3d(1000px, -1000px, 1px) rotate(360deg);
    }

    50% {
        -webkit-transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
        transform: translate3d(-1000px, 1000px, 1px) rotate(180deg);
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0px) rotate(360deg);
        transform: translate3d(0, 0px, 0px) rotate(360deg);
    }
}