.bar {
    background-color: black;
}

.sections a.active {
    color: rgb(255, 145, 0);
}

#profile-pic {
    width: 310px;
    margin-left: 300px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    justify-content: center;
    margin-top: 3%;
}

h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 500px;
    font-size: 16px;
}


footer {
    margin-top: 100px;
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgb(255, 145, 0));
}

a {
    color: rgb(255, 145, 0);
}

@media (max-width: 1331px) {
    #profile-pic {
        margin-left: 250px;
    }
}

@media (max-width: 1250px) {
    #profile-pic {
        margin-left: 150px;
    }
}


@media (max-width: 1100px) {
    #profile-pic {
        margin-left: 100px;
    }

    p {
        width: 400px;
    }
}

@media (max-width: 900px) {
    #profile-pic {
        margin-left: 100px;
        width: 250px;
    }

    p {
        width: 300px;
    }
}


@media (max-width: 800px) {
    #profile-pic {
        margin-left: 0;
        width: 300px;
    }

    p {
        width: 300px;
    }

    .grid-container {
        grid-template-columns: 1fr;
        justify-content: center; /* Center items horizontally */
        justify-items: center; /* Center individual items horizontally */
    }

    .grid-item {
        justify-content: center;
    }
}