.homepage-body {
    padding: 20px 40px;
}

.homepage-body-index {
    max-width: 900px;
    text-align: left;
    margin: 0 auto;
    padding: 7vh 5vh;
    border-radius: 5px;
    width: -webkit-fit-content;
    width: -moz-max-content;
}

.homepage-body-index h1 {
    font-size: 3em;
    color: black;
}

.homepage-body-index p {
    max-width: 600px;
    margin-top: 5vh;
    margin-right: 5vh;
    margin-bottom: 1vh;
}

.homepage-body-index .homepage-body-index-image {
    min-width: 100px;
    width: 200px;
    height: 200px;
    position: relative;
    right: -40px;
    background-image: url(../images/sky.png);
    background-position: center;
    background-size: cover;
    margin-right: 17px;
}

.homepage-body-index button,
.homepage-body-index a {
    width: fit-content;
    padding: 10px 30px;
    border: none;
    border-bottom: 3px;
    color: white;
    background-color: #27b069;
    cursor: pointer;
    box-shadow: 0 2px 2px 0px #0000002b;
    border-radius: 4px;
}

.homepage-info {
    display: grid;
    justify-content: space-between;
    align-content: center;
    justify-content: center;
}

.homepage-info h1 {
    font-size: 3.5em;

    width: -webkit-fit-content;
    margin-bottom: 5vh;
    text-transform: capitalize;
    font-family: 'Roboto Slab';
    font-weight: 100;
    display: flex;
    align-items: center;
    margin: 5vh auto;
}

.homepage-info h1 > p#line {
    width: 16vh;
    height: 4px;
    background: #27b069;
    border-radius: 3px;
    margin: 0px 30px;
    position: relative;
    top: 8px;
}

/* DARK MODE */

.dark-mode .homepage-body-index h1 {
    color: white;
}

.dark-mode .homepage-body-index p {
    color: white;
    opacity: .6;
}

.dark-mode .homepage-info h1 {
    color: white;
    opacity: .5;
}

/* RESPONSIVE */

@media screen and (max-width: 1010px) {
    /* ===================== */
    .page-navegator {
        padding: 0;
    }

    /* ===================== */
}


@media screen and (max-width: 910px) {
    /* ===================== */
    .page-navegator {
        padding: 0;
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .page-navegator nav {
        margin: 0 auto;
        margin-top: 29px;


    }

    /* ===================== */
    .navegator-logo {
        display: none;
    }

    /* ===================== */
    .footer {
        margin-top: 12vh;
    }

    /* ===================== */
}

@media screen and (max-width: 810px) {

    /* ===================== */
    .homepage-body-index div:nth-child(1) {
        display: grid;
        text-align: center;
        margin: 0 auto;
        width: fit-content;
        z-index: 100000;
    }

    /* ===================== */
    .homepage-body-index div:nth-child(2) {
        z-index: 10000;
    }

    /* ===================== */
    .homepage-body-index .homepage-body-index-image {
        position: absolute;
        left: 2px;
        margin: 0 auto;
    }

    /* ===================== */
    .buttons {
        position: absolute;
        display: grid;
        width: -webkit-fill-available;
        justify-content: center;
        transform: translate(-14%, 0);
        margin: 0 auto;
    }

    /* ===================== */
    .buttons > * {
        margin: 5px auto !important;
        width: -webkit-fill-available;
        padding: 20px 30px !important;
    }

    .buttons .copy-button {
        width: -webkit-fill-available;
    }

    /* ===================== */


}


@media screen and (max-width: 500px) {
    /* ===================== */
    .navegator-title {
        display: grid;
        align-items: center;
        margin-left: 0px;
        text-align: center;
    }

    /* ===================== */
    .navegator-title h1 {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 500px) {
    /* ===================== */
    .buttons {
        transform: translate(-18%, 0);
    }

    .homepage-info h1 {
        font-size: 1.2em;
    }

    /* ===================== */
}

@media screen and (max-width: 400px) {
    /* ===================== */
    .page-navegator {
        transform: scale(0.9);
    }

    .homepage-body {
        transform: scale(0.9);
    }

    .footer {
        transform: scale(0.9);
    }

    /* ===================== */
}