/****MEDIA QUERIES****/
/*1 rem = 1em = 16px*/

@media(max-width: 121em)
{

}

@media(max-width:91em)
{
    .aboutText {
        font-size: 1.8rem;
        padding: 4.2rem;
    }
}

/***Below 1024***/
@media(max-width: 65em)
{
    /*INDEX HOME PAGE*/
    

    .beerConsolePhoto {
        height: 36rem;
    }

    .headerTitle{
        font-size: 3.8rem;
    }

    .mainContainer{
        width:100%;
    }

    /***REVIEWS***/

    /***ABOUT/CRITS***/

    .aboutPageContainer{
        height: 80rem;
    }

    .aboutPageText{
        font-size: 2.8rem;
        padding: 0 8rem 0 8rem;
    }

    .critquesContainerTemp {
        /*height: 70rem;*/
    }
}

/***BELOW 768px */
@media(max-width: 49em)
{
    /*INDEX HOME PAGE*/
    .aboutText {
        padding: 3.6rem;
    }

    .beerConsolePhoto {
        height: 24rem;
    }

    .header-nav-link {
        padding: 1.4rem 2.2rem;
    }

    .header1 {
        padding-bottom: 1rem;
        padding-top: 1rem;
        width:100%;
    }
    

    .header-nav-link:link,
    .header-nav-link:visited {
        font-size: 2rem;
    }

    .header-nav-link:hover,
    .header-nav-link:active {
    }
    .reviewsGrid {
        grid-template-columns: repeat(2, 1fr);
    }


    /***REVIEWS***/
    /*Seems fine still may have to make a seperate mobile header*/
    /*About and Critques*/
    /*Also fine for now likely just going to change with the addition of a  mobile navigation menu*/
}

/**425 and Below***/
/*MOBILE NAVIGATION NECESSARY LARGE BREAKAGES*/
@media(max-width: 27em)
{
    .mobileMenu{
        display:block;
        padding-right: 2rem;
    }

    .mobileMenuIcon {
        height: 3.2rem;
        width: 3.2rem;
        color: #920CE8;
    }

    .mobileCloseIcon {
        height: 4.8rem;
        width: 4.8rem;
        color: #920CE8;
    }

    .header-nav-list {
        display:none; 
    }

    .newReviewImage{
        display: none;
    }

    .newReviewText{
        display:none;
    }

    .newReviewTextSmall{
        display:block;
        font-size: 3.2rem;
        grid-column-start: 1;
        grid-column-end: -1;
        text-align:center;
    }

    .beerConsolePhoto {
        display:none;
    }

    .aboutText {
       
    }
    /*mobile navigation*/
    .mobile-nav-list {
        position: absolute;
        top: 10%;
        left: 17%;
        padding: 3rem 6rem 3rem 6rem;
        background-color: rgb(255, 255, 255, 0.9);
        border: .3rem solid #920CE8;
        text-align: center;
    }

    .header-nav-link {
        display:inline-block;
    }

    .mobileNavLink {
        border: solid .3rem #920CE8;
        
    }

    .header-nav-link:link,
    .header-nav-link:visited {
        margin-top: 2rem;
        font-size: 2.8rem;
    }

    .header-nav-link:hover,
    .header-nav-link:active {
        margin-top: 2rem;
        font-size: 2.8rem;
    }

    .reviewsGrid{
        grid-template-columns: repeat(1, 1fr);
    }

    .reviewsContainer{
        grid-template-columns:repeat(2, 1fr);

    }

    /*Footer*/
    footer {
        padding: 2rem 2.8rem 2rem 2.8rem;
    }

    .logoFooter {
        height: 5.4rem;
    }

    .email {
        font-size: 1.8rem;
    }

    .socialIcon {
        width: 3.6rem;
        height: 3.6rem;
    }

    .show {
        display: block;
    }

    .hidden {
        display: none;
    }

    .underConstructionText{
        font-size:2.4rem;
        
    }

    .critquesContainerTemp{
        height:100rem;
    }

    .aboutPageContainer {
        height: 120rem;
        overflow: scroll;
        padding: 1rem;
    }

    .aboutPageText {
        font-size:2rem;
        padding: 2rem;
    }
}