body {
    margin: 0;
    background-color: #ffffff;
}

#title {
    font-size: 2em;
    letter-spacing: 0.2em;
    font-family: 'Roboto', sans-serif;
    text-align: center;

    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

#title > h1 {
    margin-top: 0.1em;
    margin-bottom: 0.2em;
    display: table-cell;

    border-bottom: 5px solid;

    border-image: linear-gradient(
        to right, 
        #00a8ff 11.11%,
        #fbc531 11.11%,
        #fbc531 22.22%,
        #4cd137 22.22%,
        #4cd137 33.33%,
        #e84118 33.33%,
        #e84118 44.44%,
        #00a8ff 44.44%,
        #00a8ff 55.55%,
        #fbc531 55.55%,
        #fbc531 66.66%,
        #4cd137 66.66%,
        #4cd137 77.77%,
        #e84118 77.77%,
        #e84118 88.88%,
        #00a8ff 88.88%
    ) 10;
}

#downloads {
    margin-bottom: 10px;
}

.download-button {
    height: 50px;
}

#container {
    margin: auto;
    width: 50%;
    max-width: 960px;
    padding: 10px;
    padding-bottom: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #2f3640;
}

#yt {
    margin-bottom: 20px;
    width: 90%;
    height: 400px;
}

.image-container > img {
    margin: auto;
    width: 90%;
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 800px) {
    #yt {
        margin-bottom: 20px;
        max-height: 250px;
    }
}

@media only screen and (max-width: 600px) {
    #container {
        margin: auto;
        width: 85%;
        padding: 10px;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #2f3640;
    }
}

.image-container > span {
    font-style: italic;
}

.slick-prev:before, .slick-next:before { 
    color: #2f3640 !important;
}

.slick-slide {
    outline: none;
}