body {
    background-color: var(--black);
}

@media (max-width: 991px) {
    .aboutme-top {
        background-color: var(--lilac);
        width: 100vw;
    }

    .aboutme-bottom {
        background-color: var(--black);
        width: 100vw;
    }

    .aboutme-image-top {
        width: 90vw;
        max-width: 386px;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .aboutme-text-top {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;

        font-family: "Roboto", sans-serif;
        color: var(--lightgray);
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        margin-top: 50px;
    }

    .aboutme-title-bottom {
        width: fit-content;
        margin-top: 50px;
        margin-bottom: 30px;
        color: var(--lilac);
        font-family: "Roboto", sans-serif;
        font-size: 7vw;
        font-weight: 300;
        letter-spacing: 0.7em;
    }

    .aboutme-text-bottom {
        width: 100vw;

        font-family: "Roboto", sans-serif;
        color: var(--lilac);
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        padding: 0px;
        letter-spacing: 2.6px;
    }

    .aboutme-text-row {
        margin: 10px;
        margin-top: 30px;
        border-left: var(--lilac) 2px solid;
    }
}

@media (max-width: 300px) {
    .aboutme-title-bottom {
        font-size: 21px !important;
    }
}

@media (min-width: 514px) {
    .aboutme-title-bottom {
        font-size: 36px !important;
    }
}


@media (min-width: 992px) {
    .navbar {
        background-color: transparent;
    }

    .footer {
        background-color: transparent;
    }

    .submenu {
        background-color: transparent;
    }

    .navbar-link {
        color: var(--lightgray);
    }

    .navbar-link:link {
        color: var(--lightgray);
    }

    .navbar-link:visited {
        color: var(--lightgray);
    }

    .navbar-link:hover {
        color: #888888;
    }

    .navbar-link:active {
        color: #888888;
    }

    .footer-link {
        color: var(--lightgray);
    }

    .footer-link:link {
        color: var(--lightgray);
    }

    .footer-link:visited {
        color: var(--lightgray);
    }

    .footer-link:hover {
        color: #888888;
    }

    .footer-link:active {
        color: #888888;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .aboutme-top {
        background-color: var(--lilac);
        height: 970px;
    }

    .aboutme-bottom {
        background-color: var(--black);
    }

    .aboutme-container {
        position: relative;
        width: 980px;
    }


    .aboutme-title-top {
        position: absolute;
        top: -10px;
        left: 0px;
        z-index: 4;

        color: var(--black);
        font-family: "Roboto", sans-serif;
        font-size: 70px;
        font-weight: 400;
        letter-spacing: 0.24em;
    }

    .aboutme-text-top {
        position: absolute;
        top: 400px;
        left: 570px;
        z-index: 3;

        width: 350px;

        font-family: "Roboto", sans-serif;
        color: var(--lightgray);
        font-size: 18px;
        font-weight: 400;
        line-height: 22px;
        padding: 0px;
    }

    .aboutme-image-top {
        position: absolute;
        top: 200px;
        left: 130px;
        z-index: 2;

        width: 386px;
    }

    .aboutme-image-bottom {
        position: absolute;
        top: 890px;
        left: 330px;
        z-index: 2;

        width: 495px;
    }

    .aboutme-title-bottom {
        width: fit-content;
        margin-top: 50px;
        margin-bottom: 30px;
        color: var(--lilac);
        font-family: "Roboto", sans-serif;
        font-size: 36px;
        font-weight: 300;
        letter-spacing: 0.7em;
    }

    .aboutme-text-bottom {
        width: 780px;

        font-family: "Roboto", sans-serif;
        color: var(--lilac);
        font-size: 13px;
        font-weight: 400;
        line-height: 39px;
        padding: 0px;
        letter-spacing: 2.6px;
        margin-bottom: 100px;
    }

    .aboutme-underline {
        text-decoration: underline;
    }
}