@media (max-width: 768px) {

    html, body {
        touch-action: manipulation; /* disables double-tap zoom, allows gestures like scrolling */
    }

    #about {
        align-self: end;
    }

    .overlay {
        width: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgb(255, 255, 255));
        box-shadow: 0 0 15px 15px rgba(255,255,255,0.1);
        position: fixed;
        display: grid;
        z-index: 8;
        align-items: end;
    }

    .content-container {
        grid-column: 2;
        grid-row: 1;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .prj-description {
        grid-column: 1;
        grid-row: 1;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        font-size: small;
    }

    #menu {
        display: none;
    }

    #cursor-text,
    #image-count {
        display: none;
    }

    .mobile-image-count {
        font-size: 0.8em;
        color: #b4b4b4;
        text-align: center;
        margin-bottom: 0.5em;
    }

}

@media (min-width: 512px) and (max-width: 768px) {

    .overlay {
        width: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgb(255, 255, 255));
        box-shadow: 0 0 15px 15px rgba(255,255,255,0.1);
        position: fixed;
        z-index: 8;
        display: flex;
        justify-content: center;
    }

    .prj-description {
        width: 450px;
    }

    .carousel-inner {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        height: 65vh;
        justify-content: center;
    }

}

@media (min-width: 768px) and (max-width: 1200px) {
    #head-list h5{
        color: #a6a6a6;
        font-size: small;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    #head-list a {
        color: #b4b4b4;
        font-size: 0.8rem;
    }

    .collapsible-text {
        align-content: center;
        padding-left: 0.5rem;
    }

    .prj-description {
        grid-column: 1;
        grid-row: 1;
        max-width: 650px;
        max-height: 5.8rem;
        align-self: flex-start;
    }

    .collapsible-text {
        align-content: initial;
        padding-top: 0.3rem;
    }

    #sub-list {
        max-width: 220px;
    }


}

@media (min-width: 1200px) and (max-width: 1900px) {

}

@media (min-width: 1920px) and (max-width: 2600px) {
    .mobile-nav-buttons {
        display: none;
    }

    #mobile-prev,
    #mobile-next {
        display: none;
    }

    .carousel-home h1 {
        padding-top: 4rem;
        font-size: 7rem;

    }

    .overlay {
        width: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgb(255, 255, 255));
        box-shadow: 0 0 15px 15px rgba(255,255,255,0.1);
        position: fixed;
        display: grid;
        grid-template-columns:auto;
        z-index: 8;
        align-items: end;
        justify-items: center;
        height: 11rem;
        padding: 0px 16px 50px;
    }

    * {
      font-size: 0.9rem;
    }

    .collapsible {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    #head-list h5{
        color: #a6a6a6;
        font-size: medium;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    #head-list a {
        color: #b4b4b4;
        font-size: smaller;
    }

    .collapsible-text {
        align-content: center;
        padding-left: 2rem;
    }


    .content-container {
        max-height: 1rem;
    }

    .prj-description {
        grid-column: 1;
        grid-row: 1;
        max-width: 900px;
        max-height: 5.8rem;
        align-self: flex-end;
        margin-bottom: 0rem;
    }

    .text-description.paragraph {
      padding-top: 0.3rem;
    }

    .carousel-inner {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        height: 74vh;
        justify-content: center;
    }

    #sub-list {
        border-bottom: 0px;
    }

    #sub-list li{
        padding-left: 0.5rem;
    }

    .open {
        align-content: start;
    }

    .toggle::after {
        content: "\2B";
        font-size: 2rem;
        line-height: 20px;
        margin-left: 0.5rem;
        font-weight: 400;
        transition: all 1s;
    }
    #cg-ShowReel.carousel-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    #cg-video {
        align-self: center;
        max-width:fit-content;
        max-height: fit-content;
      }

    .paragraph {
      padding: 1rem;
      font-size: 0.8rem;
      color: black;
    }

    #title.title {
      padding-top: 1rem;
    }

    /* Smaller cursor arrows for 1920px screens */
    .carousel-control-prev:hover {
        cursor: url(../resources/images/cursors/Arrow-30x30-left.png), auto;
        cursor: -webkit-image-set(url(../resources/images/cursors/Arrow-30x30-left.png) 1x), auto;
        cursor: image-set(url(../resources/images/cursors/Arrow-30x30-left.png) 1x), auto;
    }

    .carousel-control-next:hover {
        cursor: url(../resources/images/cursors/Arrow-30x30-right.png), auto;
        cursor: -webkit-image-set(url(../resources/images/cursors/Arrow-30x30-right.png) 0.1x), auto;
        cursor: image-set(url(../resources/images/cursors/Arrow-30x30-right.png) 1x), auto;
    }

    /* Adjust cursor text and image count positioning */
    div.cursors div span {
        font-size: 0.7rem;
        transform: translate(0%, 120%);
    }

    div.cursors div span#image-count {
        transform: translate(0%, 200%);
        font-size: 0.7rem;
    }

}