$content_width: 1100px;
$mobile_content_width: 100%;
$cell_size: 550px;
$mobile_cell_height: 500px;

.main {
    position: relative;
}

h1 {
    font-weight: 500;
    font-size: 116px;
}

h5 {
    font-weight: 400;
    font-size: 22px;
}

.content {
    display: flex;
    flex-direction: column;
    position: absolute;
    @media screen and (min-width: 1280px) {
        width: $content_width;
    }
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.header {
    position: relative;
    h1,
    h5 {
        position: absolute;
        line-height: 0;
    }
    @media screen and (min-width: 1280px) {
        padding-left: 53px;
        h1 {
            bottom: 125px;
        }
        h5 {
            bottom: 80px;
        }
    }
    @media screen and (max-width: 1279px) {
        padding-left: 5%;
        background-color: #000000;
        height: 250px !important;
        h1 {
            bottom: 40px;
        }

        h5 {
            bottom: 10px;
        }
    }
}

.content-row {
    @media screen and (max-width: 1279px) {
        display: flex;
        flex-direction: column;
    }
    @media screen and (min-width: 1280px) {
        height: $cell_size;
    }
}

.middle {
    display: flex;
    @media screen and (min-width: 1280px) {
        flex-direction: flex-start;
    }
    @media screen and (max-width: 1279px) {
        flex-direction: column;
        align-items: center;
    }
}

.content-description {
    display: flex;
    justify-content: center;
    align-items: center;

    @media screen and (min-width: 1280px) {
        width: $cell_size;
        height: $cell_size;
    }

    @media screen and (max-width: 1279px) {
        flex-direction: column;
    }
}

.video {
    @media screen and (min-width: 1280px) {
        iframe {
            position: absolute;
            left: -86px;
        }
    }

    @media screen and (max-width: 1279px) {
        padding: 35px;
        width: 85%;
        iframe {
            width: 100%;
        }
    }

    iframe {
        -webkit-box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.72);
        box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.72);
    }
}

.description-container {
    display: flex;
    flex-direction: column;

    @media screen and (max-width: 1279px) {
        padding: 40px;
        background-color: #000000;
    }

    @media screen and (min-width: 1280px) {
        width: 405px;
    }

    height: 276px;

    .download-container {
        width: 230px;
        height: 47px;
    }

    .download-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 26px;
    }
}

.cells {
    @media screen and (max-width: 1279px) {
        display: none;
    }

    @media screen and (min-width: 1280px) {
        display: flex;
        flex-direction: column;
        margin: auto;
        z-index: -1;
        div[class^='cell-'],
        div[class*=' cell'] {
            width: 50%;
            height: $cell_size;
            background-color: #000000;
        }
        .cell-2 {
            float: right;
        }
    }
}

body {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5b00c3+0,d30099+37,ff006a+57,ff7547+74,ffbc41+87,f9f871+100 */
    background: -moz-linear-gradient(
        180deg,
        #5b00c3 0%,
        #d30099 37%,
        #ff006a 57%,
        #ff7547 74%,
        #ffbc41 87%,
        #f9f871 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        180deg,
        #5b00c3 0%,
        #d30099 37%,
        #ff006a 57%,
        #ff7547 74%,
        #ffbc41 87%,
        #f9f871 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        180deg,
        #5b00c3 0%,
        #d30099 37%,
        #ff006a 57%,
        #ff7547 74%,
        #ffbc41 87%,
        #f9f871 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    // background: linear-gradient(0deg, #246655, #a722b1);
    background-size: 150% 150%;

    -webkit-animation: gradientAnimation 20s ease infinite;
    -moz-animation: gradientAnimation 20s ease infinite;
    animation: gradientAnimation 20s ease infinite;
}

@-webkit-keyframes gradientAnimation {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 51% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}
@-moz-keyframes gradientAnimation {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 51% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}
@keyframes gradientAnimation {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 51% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}

.bottom {
    display: flex;
    .copyright {
        background-color: #5b00c3;
    }
    @media screen and (min-width: 1280px) {
        flex-direction: row;

        .copyright {
            position: absolute;
            bottom: 28px;
            right: 0;
        }
    }
    @media screen and (max-width: 1279px) {
        flex-direction: column;
        align-items: center;
        background-color: #000000;
    }
}

.copy {
    @media screen and (min-width: 1280px) {
    }
    @media screen and (max-width: 1279px) {
        height: 200px !important;
    }
}
