@media (max-width: 767px) {
    body{
        /* border: 1px solid black; */
        width: 95%;
        /* background-color: white; */
    }
    header{
        /* border: 1px solid black; */
        padding: 0px;
    }
    header h1{
        /* border: 1px solid black; */
        font-size: 43px;
        margin-bottom: 5px;
    }
    #aboutAndLinks{
        /* border: 1px solid black; */
        flex-direction: column;
        justify-content: center;
        align-items: start;
        gap: 5px;
    }
    #aboutAndLinks ul{
        /* border: 1px solid black; */
        display: none;
    }
    header hr{
        height: 1px;
        background-color: black;
    }

    h2{
        /* border: 1px solid black; */
        margin-top: 25px;
        font-size: 30px;
    }

    #projects{
        /* border: 1px solid black; */
        gap: 12px;
        min-height: 55vh;
        justify-content: start;
    }
    #projects .project {
        /* border: 1px solid black; */
        padding: 5px;
        gap: 20px;
    }
    #projects .project .projectIcon{
        /* border: 1px solid black; */
        height: 90px;
        width: 90px;
        font-size: 60px;
    }
    #projects .project .nameAndAbout h3{
        /* border: 1px solid black; */
        margin-bottom: 5px;
        font-size: 23px;
    }
    footer hr{
        display: block;
        height: 1px;
        margin-top: 40px;
        margin-bottom: 10px;
        color: lightgray;
    }
    footer ul{
        /* border: 1px solid black; */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    footer ul li{
        list-style: none;
    }
    footer ul li a{
        color: black;
        text-decoration: none;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }
    #aboutAndLinks ul li a{
        color: white;
    }
    #projects .project .nameAndAbout a{
        color: white;
    }
    footer ul li a{
        color: lightgray;
    }
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
    header hr {
        background-color: lightgray;
    }
}