body {
    background-color: #31403F;   
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
}

.container {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 2.6fr 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "header header"
      "main main"
      "footer footer";    
    border: rgba(170, 170, 170, 0.75) solid 1px;
}
  
.header { 
    grid-area: header;  
    font-family: 'Montserrat', sans-serif; 
    background-color: #403631;           
}

.headertext {
    margin-top: 50px;       
}
.headertext a {
    color: white;
}
.header a:hover {
    color: azure;
    text-decoration: none;
}

.logo img{      
    float: left;
    border: black solid 1pt; 
    width: 25%;
    margin: 15px;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
}
.header h1 {
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26);
}


.main {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "navigation navigation"
        "mainimage mainimage"
        "hours hoursimage"
        "aside about"
        "contact contact";
    grid-area: main;    
}

.navigation {
    grid-area: navigation; 
    font-family: 'Montserrat', sans-serif;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    
}
ul {
    list-style-type: none;
    margin: 0;    
    padding: 0;
    overflow: hidden;
    background-color: #222222;
}  
li {
    float: left; 
    margin-left: 10px;   
}
li a {
    display: block;  
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    text-transform: uppercase;
}  
li a:hover {
    background-color: #070707;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    
}   

.mainimage {
    grid-area: mainimage; 
    background-image: url(https://jennabeach.ca/clients/buffersbottledelivery/Unsplash_Beer.png); 
    background-repeat: no-repeat;  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;   
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);         
}
.imagetext {
    text-align: center;    
    font-weight: bold;       
}
.imagetext a {
    color: white;
}
.imagetext a:hover {
    color: azure;
    text-decoration: none;
}
.imagetext h2 {
    font-size: 50px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26);         
}
.imagetext h3 {  
    font-size: 40px; 
    line-height: 0.50;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26);    
}
.imagetext h4 {
    font-size: 20px;     
}

.hours { 
    grid-area: hours;  
    text-align: center;  
}
.hourstext {
    background-color: #63807E;
    color: whitesmoke;   
    margin: auto;
    margin-top: 25px;
    width: 50%;
    padding: 25px;
    border: white solid 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hours h2, .abouttext h2 {
    font-size: 35px;
    margin-top: 10pt;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26);
    text-transform: uppercase;  
}
.hours h3, .abouttext h3 {
    font-size: 28px;    
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26);  
}
.hours h4 {
    font-size: 20px;    
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26); 
    line-height: 0.50;    
}
.hoursimage {
    grid-area: hoursimage;
    padding: 5px; 
    padding-right: 15px;            
}
.hoursimage img {
    margin-top: 10px;
    width: 100%;
    border: black solid 1pt;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 0.90;        
}

.about {
    grid-area: about;
    text-align: center;
    padding-bottom: 35px;   
}
.abouttext {
    background-color: #63807E;
    color: whitesmoke;   
    margin: auto;
    margin-top: 25px;
    width: 75%;
    padding: 25px;
    border: white solid 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h2, .about h2 a:link {
    font-size: 35px;  
    color: white;
}
.about h2 a:hover {
    text-decoration: none;
    color: azure;
}

.about h4 {
    font-size: 25px;  
    font-weight: bold; 
    color: black; 
}
.about p {
    font-size: 20px;
}
.disclaimer {
    line-height: 1.5;   
    
}
.abouttext a:link {    
    font-weight: bold;
    font-size: 25px;
    color: #252525;
}
.abouttext a:visited {   
    color: #252525;
}
.abouttext a:hover { 
    color: white;  
    text-decoration: none; 
}

  
.aside { 
    grid-area: aside;               
}
.aside img {    
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%; 
    width: 50%;
    border-radius: 50%;
    border: black solid 1pt;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    opacity: 0.90;     
}

.contact {
    grid-area: contact;
    background-color: #63807E;   
    text-align: center;          
}
.contact h2 {
    font-size: 35px;
    text-transform: uppercase;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.26); 
}
.contact a {    
    color: white;
}
.contact a:hover {
    color: azure;
    text-decoration: none;
}

.footer { 
    grid-area: footer;
    background-color: #403631; 
    text-align: center; 
    padding-top: 15px;
}
.btnTop {
    background-color: #63807E;
    border: none;   
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btnTop a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;    
}
.btnTop:hover {
    background-color: #65BFB9;
    
}
.btnTop:hover a {
    color: black;
}

/*Media Queries*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    img {
        visibility: hidden;
    }
    body {
        font-size: 15px;
    }
    .container {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr 2.6fr 0.2fr;
        gap: 0px 0px;
        grid-auto-flow: column;
        grid-template-areas:
          "header"
          "main"
          "footer";    
        border: none;
    }
    .header {         
        padding: 0;     
    }
    .headertext {
        text-align: center;
    }  
    li {
        float: center;          
    }   
    .navigation {
        box-shadow: none;       
    }
    .main {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr;
        gap: 0px 0px;
        grid-auto-flow: column;
        grid-template-areas:
            "navigation"           
            "hours"
            "about"
            "contact";
        grid-area: main;    
    }    
    h1 {
        font-size: 20px;
    }  
    h2 {
        font-size: 18px;
    }
    h3, h4, li a {
        font-size: 15px;
    }
    .logo, .imagetext, .hoursimage, .aside{
        display: none;
    }
    .mainimage {
        background-image: none;
    }
    .hours h4 {
        line-height: normal;
    }
    .hourstext, .abouttext {
        width: 80%;       
    }
    .footer { 
        grid-area: footer;      
        text-align: center; 
        padding: none;       
    }   
}

/* Medium devices (landscape tablets) */
@media only screen and (min-width: 600px) and (max-width: 852px) {
    .container {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr 2.6fr 0.2fr;
        gap: 0px 0px;
        grid-auto-flow: column;
        grid-template-areas:
          "header"
          "main"
          "footer";    
        border: none;
    }
    .main {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr;
        gap: 0px 0px;
        grid-auto-flow: column;
        grid-template-areas:
            "navigation"
            "mainimage"           
            "hours"
            "about"
            "contact";
        grid-area: main;    
    }   
  
    h1 {
        font-size:20px;
    }  
    h2 {
        font-size: 18px;
    }
    h3, h4, li a {
        font-size: 15px;
    }
    .imagetext, .hoursimage, .aside{
        display: none;
    }
    .hours h4 {
        line-height: normal;
    } 
    .footer { 
        grid-area: footer;      
        text-align: center; 
        padding: none;       
    }   

}