.main-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.title {
    text-align: center;
    line-height: 100px;
    color: #444;
    font-size: 68px;
    font-weight: 300;
}

.main-download-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 80px;
    bottom: 0;
    margin: 0 auto 3% auto;
    border: 2px solid #444;
    border-radius: 5px;
    cursor: pointer;
    transition-duration: 0.3s;
}

.main-download-btn {
    color: #444;
    text-decoration: none;
    text-align: center;
    font-size: 42px;
    font-weight: 300;
    transition-duration: 0.3s;
}

.main-download-container:hover {
    background-color: #444;
}

.main-download-container:hover .main-download-btn {
    color: #fff;
}

.main-download-btn:hover {
    color: #fff;
}

.background-image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image-list {
    position: inherit;
    width: 100%;
    height: 100%;
}

.background-image-item {
    position: inherit;
    list-style: none;
    bottom: 150%;
}

#first-background-item {
    width: 200px;
    left: 10%;
    margin-bottom: -200px;
    list-style: none;
    z-index: -3;
    animation: slideup 55s linear infinite;
    animation-delay: 8s;
}

#second-background-item {
    width: 400px;
    left: 15%;
    margin-bottom: -200px;
    list-style: none;
    z-index: -1;
    animation: slideup 35s linear infinite;
    animation-delay: 4s;
}

#third-background-item {
    width: 300px;
    left: 40%;
    margin-bottom: -200px;
    list-style: none;
    z-index: -2;
    animation: slideup 40s linear infinite;
    animation-delay: 14s;
}

#fourth-background-item {
    width: 100px;
    left: 60%;
    margin-bottom: -200px;
    list-style: none;
    z-index: -4;
    animation: slideup 60s linear infinite;
    animation-delay: 2s;
}

#fifth-background-item {
    width: 300px;
    left: 80%;
    margin-bottom: -200px;
    list-style: none;
    z-index: -2;
    animation: slideup 40s linear infinite;
    animation-delay: 20s;
}

#sixth-background-item {
    width: 70px;
    left: 50%;
    list-style: none;
    z-index: -5;
    animation: slideup 70s linear;
}

#seventh-background-item {
    width: 200px;
    left: 70%;
    list-style: none;
    z-index: -3;
    animation: slideup 55s linear;
}

#eighth-background-item {
    width: 400px;
    left: 10%;
    list-style: none;
    z-index: -1;
    animation: slideup 35s linear;
}

@keyframes slideup {
    0% {
        bottom: 0%;
    }
    100% {
        bottom: 130%;
    }
}

.background-image-item img {
    filter: blur(3px);
}

#first-background-item img {
    width: 200px;
}

#second-background-item img {
    width: 400px;
}

#third-background-item img {
    width: 300px;
}

#fourth-background-item img {
    width: 100px;
}

#fifth-background-item img {
    width: 300px;
}

#sixth-background-item img {
    width: 70px;
}

#seventh-background-item img {
    width: 200px;
}

#eighth-background-item img {
    width: 400px;
}

.sub-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 500px;
    padding: 0px 100px;
}

.sub-title {
    margin: 0;
    line-height: 80px;
    font-size: 64px;
    font-weight: 600;
}

.section-text-a {
    margin-right: 20%;
    text-align: start;
}

.section-text-b {
    margin-left: 20%;
    text-align: end;
}

.section-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    border-radius: 15px;
}

.section-image img {
    width: 100%;
}

.animate-section-image-a {
    animation: ease 1s slideFromLeft;
}

.animate-section-image-b {
    animation: ease 1s slideFromRight;
}

@keyframes slideFromLeft {
    from {
        margin-left: -50%;
    }
    to {
        margin: initial;
    }
}

@keyframes slideFromRight {
    from {
        margin-right: -50%;
    }
    to {
        margin: initial;
    }
}

#first-sub-section {
    background-color: #8bc1ff;
    box-shadow: 0px -5px 10px #ccc;
}

#first-sub-section h2 {
    color: #d6e9ff;
}

#first-section-image {
    box-shadow: 25px 25px #384d8b;
}

#second-sub-section {
    background-color: #ff8b8b;
}

#second-sub-section h2 {
    color: #ffd8d8;
}

#second-section-image {
    box-shadow: -25px 25px #8b3838;
}

#third-sub-section {
    background-color: #83eea3;
}

#third-sub-section h2 {
    color: #d5ffe3;
}

#third-section-image {
    box-shadow: 25px 25px #37864f;
}

#fourth-sub-section {
    background-color: #d7a7ff;
}

#fourth-sub-section h2 {
    color: #f2e3ff;
}

#fourth-section-image {
    box-shadow: -25px 25px #734b94;
}