/**
 * Responsive CSS is a stylesheet used for styles that require different styling by screen size
 * 
 * Divided up by breakpoints provided by:
 * https://getbootstrap.com/docs/5.0/layout/breakpoints/
 * 
 * Implemented by Jack Grantham
 **/

/* X-Small | <576px */
@media (max-width: 575px) {
    .overlay h1 {
        /*display: none;*/
        font-size: 1rem;
        letter-spacing: 0.5rem;
    }

    .carousel-item {
        height: 40vh !important;
    }

    .sub-title {
        letter-spacing: 0.6rem;
    }

    .thumbnails {
        height: 20rem;
        max-height: 20rem;
    }

    #AutumnEvening {
        /*bottom: -200px;*/
    }

    #ColoredHydrandgea {
        /*bottom: -200px;*/
    }

    #Angel1 {
        /*top: -200px;*/
    }
}

/* Small | ≥576px */
@media (min-width: 576px) {
    .overlay h1 {
        font-size: 1rem;
        letter-spacing: 1rem;
    }

    .carousel-item {
        height: 40vh !important;
    }

    .sub-title {
        letter-spacing: 0.7rem;
    }

    .thumbnails {
        height: 30rem;
        max-height: 30rem;
    }

    #AutumnEvening {
        /*bottom: -200px;*/
    }

    #ColoredHydrandgea {
        /*bottom: -1200px;*/
    }

    #Angel1 {
        /*top: -200px;*/
    }
}

/* Medium | ≥768px */
@media (min-width: 768px) {
    .overlay h1 {
        font-size: 2rem;
    }

    .carousel-item {
        height: 40vh !important;
    }

    .thumbnails {
        height: 50rem;
        max-height: 50rem;
    }

    #AutumnEvening {
        bottom: -200px;
    }

    #ColoredHydrandgea {
        /*bottom: -1200px;*/
    }

    #Angel1 {
        top: -200px;
    }
}

/* Large | ≥992px */
@media (min-width: 992px) {
    .overlay h1 {
        font-size: 3rem;
    }

    .carousel-item {
        height: 70vh !important;
    }

    .thumbnails {
        height: 50rem;
        max-height: 50rem;
    }

    #AutumnEvening {
        bottom: -200px;
    }

    #ColoredHydrandgea {
        /*bottom: -1200px;*/
    }

    #Angel1 {
        top: -200px;
    }
}

/* Extra Large | ≥1200px */
@media (min-width: 1200px) {
    .overlay h1 {
        font-size: 3rem;
    }

    .carousel-item {
        height: 80vh !important;
    }

    .thumbnails {
        height: 50rem;
        max-height: 50rem;
    }

    #AutumnEvening {
        bottom: -200px;
    }

    #ColoredHydrandgea {
        bottom: -200px;
    }

    #Angel1 {
        top: -200px;
    }
}

@media (min-width: 1600px) {
    .overlay h1 {
        font-size: 3rem;
    }

    .carousel-item {
        height: 80vh !important;
    }

    .thumbnails {
        height: 50rem;
        max-height: 50rem;
    }

    #AutumnEvening {
        bottom: -200px;
    }

    #ColoredHydrandgea {
        bottom: -1200px;
    }

    #Angel1 {
        top: -200px;
    }
}