html,
body,
main,
div,
p,
h1,
h2,
h3,
h4,
* {
    padding: 0;
    margin: 0;
    font-family: "Roboto Condensed", serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-decoration: none;
}

body {
    background-color: #E7E8E3;
}

main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}

h1 {
    font-size: 2.1rem;
    color: #0D2E32;
}

h2 {
    width: fit-content;
    padding: 0rem 0.4rem;
    margin: 1.7rem auto 0rem;
    background-color: #0D2E32;
    color: #E99045;
    font-size: 2.5rem;
}

h3 {
    margin-top: 1.7rem;
    font-size: 1.2rem;
    font-weight: 400;
}

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

.social-list {
    padding-top: 3vh;
    margin: auto;
    width: 78%;
    max-width: 440px;
    display: flex;
    flex-direction: row;
}

.mobile-footer {
    min-height: 12vh;
}

li {
    margin: auto;
    display: block;
}

li img {
    width: 80%;
    max-width: 36px;
}

.photos {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 100%;
}

.photos img {
    max-width: 100%;
}

@media (min-width: 710px) {
    .mobile-footer {
        display: none;
    }

    main {
        margin: auto;
        max-width: 1800px;
        height: fit-content;
        flex-direction: row;
    }

    .container-image {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .container-text {
        width: 50%;
        margin: 10vh 0;
        display: flex;
        flex-direction: column;
    }

    .container-image img {
        max-width: 670px;
    }

    h1,
    h2,
    h3,
    ul {
        margin-top: 3.4rem;
    }
}