@media only screen and (max-width: 1500px) {
    main {
        gap: 15px;
    }

    main nav i {
        margin-right: 0.8em;
    }

    main nav div h1,
    #nav-list li,
    #settings-list li {
        padding-left: 1rem;
    }

    main nav div h1 {
        font-size: 1.5rem;
    }

    main nav ul li {
        font-size: 1.2em;
    }

    #credits {
        font-size: 0.9em;
    }

    #searchbar {
        font-size: 1.2rem;
        width: 85%;
    }

    #searchbar input {
        height: 1.5rem;
    }

    #profile img {
        height: 3rem;
    }

    #profile p {
        font-size: 1.8rem;
    }

    #greeter {
        font-size: 1em;
    }

    #greeter img {
        height: 4.5em;
    }

    #controls button {
        font-size: 1.1em;
    }

    #projects {
        padding: 0.8em;
        gap: 15px;
        grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .card {
        height: 400px;
        grid-template-rows: 40px 225px 110px 25px;
        overflow: hidden;
        box-shadow: 0 0 5px #FFF;
    }

    .card h3 {
        font-size: 1.5em;
    }

    .card img {
        height: 225px;
    }


    #side-panels {
        gap: 35px;
    }

    #announcements,
    #trending {
        gap: 10px;
    }

    #announcements ul,
    #trending ul {
        padding: 1.5em 1em;
        padding-bottom: 0.5em;
    }

    #announcements h4,
    #trending h4 {
        font-size: 1.8em;
    }

    #announcements h5 {
        font-size: 1.4em;
    }

    #announcements li p {
        padding: 0.5em 0;
        font-size: 1em;
    }

    .line {
        display: flex;
        border: 1px solid #CCC;
        margin: 1em 0;
    }

    #trending img {
        height: 45px;
        width: 45px;
    }

    #trending p:first-child {
        font-size: 1.1em;
    }

    #trending p+p {
        font-size: 1em;
    }
}

@media only screen and (max-width: 1200px) {
    main {
        gap: 5px;
    }

    main nav i {
        margin-right: 0.5em;
    }

    main nav div h1,
    #nav-list li,
    #settings-list li {
        padding-left: 0.5rem;
    }

    main nav div h1 {
        font-size: 1.5rem;
    }

    main nav ul li {
        font-size: 1.3em;
    }

    #credits {
        font-size: 0.8em;
    }

    #searchbar {
        font-size: 1rem;
    }

    #searchbar input {
        height: 1.2rem;
    }

    #profile img {
        height: 2.5rem;
    }

    #profile p {
        font-size: 1.5rem;
    }

    #greeter img {
        height: 4em;
    }

    #greeter p span {
        font-size: 1.5em;
    }

    #controls button {
        font-size: 1em;
    }

    #content {
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }

    #projects {
        padding: 0.5em;
        gap: 25px;
        grid-template-rows: repeat(auto-fit, minmax(350px, 1fr));
    }

    .card {
        height: 350px;
        grid-template-rows: 30px 200px 95px 25px;
        box-shadow: 0 0 5px #FFF;
    }

    .card img {
        height: 200px;
    }

    #announcements,
    #trending {
        gap: 20px;
    }

    #announcements ul,
    #trending ul {
        padding: 1em;
    }

    #announcements h4,
    #trending h4 {
        font-size: 1.5em;
    }

    #announcements h5 {
        font-size: 1.3em;
    }

    .line {
        margin: 0.8em 0;
    }

    #trending img {
        height: 45px;
        width: 45px;
    }
}

@media only screen and (max-width: 992px) {
    main {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 16fr 1fr;
        overflow: hidden;
        padding: 0;
    }

    main nav {
        grid-column: 1;
        grid-row: 3/4;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 0.5fr;
        align-items: end;
        text-align: center;
    }

    main nav div:first-child,
    #nav-list span,
    #settings-list span {
        display: none;
    }

    #nav-list {
        display: flex;
        align-items: center;
    }

    #settings-list {
        display: flex;
        justify-content: end;
        align-items: center;
        flex-direction: row-reverse;
    }

    main nav ul li {
        padding-top: 0.5em;
        font-size: 1.5em;
    }


    main nav ul li:hover {
        opacity: 1;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 0px;
    }

    .nav-active {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 0px;
        opacity: 1;
    }

    #credits {
        grid-column: 1/3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #top {
        grid-column: 1;
        grid-row: 1/2;
        padding: 0.5em 1em;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        display: grid;
        grid-template-columns: 3fr 1fr;
        align-items: center;
    }

    #content {
        grid-row: 2/3;
        grid-column: 1;
        gap: 5px;
    }

    .card {
        grid-template-rows: 50px 195px 85px 20px;
    }

    .card img {
        height: 195px;
    }

    .card h3 {
        font-size: 2em;
    }

}

@media only screen and (max-width: 600px) {
    #top {
        grid-column: 1;
        grid-row: 1/2;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: 1fr;
        padding: 0.5em;
    }

    main nav ul li {
        padding-top: 0.5em;
        font-size: 1em;
    }

    #controls button {
        font-size: 1em;
    }

    #searchbar {
        grid-column: 1;
        grid-row: 2/3;
    }

    #searchbar input {
        height: 1rem;
    }

    #greeter {
        grid-column: 1;
        grid-row: 1/2;
        flex-direction: row-reverse;
        text-align: end;
    }

    #greeter img {
        height: 3em;
        margin-right: 0;
        margin-left: 1em;
    }

    #greeter p span {
        font-size: 1.2em;
    }

    #controls {
        grid-column: 1;
        grid-row: 3/4;
        justify-content: center;
    }

    #profile {
        display: none;
    }

    #content {
        grid-template-columns: 1fr;
        grid-column: 1/2;
    }

    #projects {
        grid-column: 1/2;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }


    .card h3 {
        font-size: 1.5em;
    }

    .card p{
        font-size: 0.8em;
    }

    #side-panels {
        display: none;
    }
}