body {
    border-radius: 32px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 18px;
    color: #f5f5f5;
    background:
        radial-gradient(circle at 25% 40%, rgba(110, 107, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(87, 158, 140, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(255, 60, 122, 0.12) 0%, transparent 60%);
}

.Images {
    margin-top: 100px;
    max-width: 600px;
    max-height: auto;
    margin-right: 50px;
    margin-left: auto;
    border-radius: 10px;
    border: 2px solid #444444;

}

.Parent {
    display: flex;
    justify-content: center;
}



.div2,
.div3,
.div4,
.div5,
.div6,
.div7 {
    text-align: left;
    border-radius: 20px;
    padding: 25px 25px 25px 10px;
    box-shadow: 0 2px 8px rgba(140, 122, 79, 0.5);
    border-style: solid;
    margin-top: 100px;
    min-height: 200px;
    min-width: 40%;
    max-width: 40%;
    margin-right: auto;
    margin-left: 50px;
}

.Header2,
.Header3,
.Header4,
.Header5,
.Header6,
.SourceHeader {
    margin: -70px 0px 0px 0px;
    text-align: center;
}

.Text2,
.Text3,
.Text4,
.Text5,
.Text6,
.SourcesText {
    padding: 10px;
    margin: 15px 0px 0px 0px;
    line-height: 1.6;
}

.div7Sources {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    padding: 25px 25px 5px 5px;
    box-shadow: 0 2px 8px rgba(140, 122, 79, 0.5);
    border-style: solid;
    margin-top: 100px;
    min-width: 50%;
    max-width: 50%;
}

.SourcesText {
    font-size: 20px;
    line-height: 2;
}

.SourcesText a {
    color: #f5f5f5;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-text {
    margin-top: 200px;
    margin-bottom: 300px;
    background: rgba(0.7);
    padding: 40px 60px;
    border-radius: 20px;
    text-align: center;
    color: #3e3a32;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.Hero-Title {
    font-size: 48px;
    margin: 0;
    padding: 0;
}
.Hero-Secondary {
    font-size: 24px;
    margin: 10px 0 0 0;
    padding: 0;
}

footer {
    text-align: right;
    padding: 20px;
    color: #bbbaba;
    margin-top: 50px;
    font-size: 18px;
    margin-bottom: 10px;

}

.Sources {
    font-size: 15px;
    background-color: #464646;
    color: #f5f5f5;
    font-weight: bold;
    border-radius: 20px;
    padding: 10px 20px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    font-size: 20px;
}

.Sources:hover {
    background-color: #f3f3f3;
    color: #3e3a32;
    text-decoration: none;
}


@media (prefers-color-scheme: dark) {
    body {
        color: #f5f5f5;
        background-color: #222;
    }

    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div7Sources {
        background: #222;
        color: #f5f5f5;
        border: 2px solid #444444;
    }

    .hero-text {
        color: #ffffff;
    }

    footer {
        color: #bbbaba;
        background: transparent;
    }

    .Sources {
        background-color: #222;
        color: #f5f5f5;
    }

    .Sources:hover {
        background-color: #444;
        color: #fff;
    }
}

@media (prefers-color-scheme: light) {
    body {
        color: #000000;
        background:
        radial-gradient(circle at 25% 40%, rgba(2, 0, 136, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(10, 231, 176, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(255, 31, 102, 0.596) 0%, transparent 60%);
    }

    .Sources {
        background-color: #f5f5f5;
        color: #000000;
    }

    .Sources:hover {
        background-color: #e0e0e0;
        color: #000000;
    }

    .SourcesText a {
        color: #000000;
    }

    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div7Sources {
        border: 2px solid #181818;
        background-color: #f5f5f5;
    }

    .hero-text {
        color: #ffffff;
    }
}

@media (max-width: 480px) {
    .hero-text {
        padding: 20px;
        font-size: 14px;
        max-width: 75%;
        max-height: auto;
    }
    .hero {
        margin-bottom: -200px;
    }

    .Parent {
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .Images {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .Text2,
    .Text3,
    .Text4,
    .Text5,
    .Text6,
    .SourcesText {
        font-size: 15px;
        min-width: 150px;
    }

    .Hero-Title {
        font-size: 32px;
    }
    .Hero-Secondary {
        font-size: 18px;
    }

    .hero-text {
        margin-top: 100px;
        
    }

    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div7Sources {
        margin-left: auto;
        margin-right: auto;
        min-width: 75%;
    }

    .div7Sources {
        margin-bottom: 50px;
    }
    footer {
        text-align: center;
    }
}


@media (width < 1030px) {
    .hero-text {
        padding: 20px;
        font-size: 14px;
        max-width: 75%;
        max-height: auto;
    }
    .hero {
        margin-bottom: -200px;
    }

    .Parent {
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .Images {
        max-width: 85%;
        max-height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .Text2,
    .Text3,
    .Text4,
    .Text5,
    .Text6,
    .SourcesText {
        font-size: 18px;
        min-width: 150px;
    }

    .Hero-Title {
        font-size: 32px;
    }
    .Hero-Secondary {
        font-size: 18px;
    }

    .hero-text {
        margin-top: 100px;
        
    }

    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div7Sources {
        margin-left: auto;
        margin-right: auto;
        min-width: 75%;
    }

    .div7Sources {
        margin-bottom: 50px;
    }
    footer {
        text-align: center;
    }
}
@media (max-width: 1920px) {
    .hero {
        min-height: 800px;
    }
}

@media (min-width: 2560px) {
    .hero {
        min-height: 1280px;
    }
}

@media (width < 1240px ) {
    .Images {
        max-height: auto;
        max-width: 40%;
    }
}
@media (width > 1240px) {
    .Images {
        max-height: auto;
        max-width: 40%;
    }
}

@media (width < 1030px) {
        .Images {
        max-width: 60%;
        max-height: auto;
        margin-left: auto;
        margin-right: auto;
    }   
}