@charset "utf-8";

html{
    background:rgb(217, 216, 222) url(background_image.jpg) center center / cover no-repeat fixed;
}


p{
    text-shadow:0px 0px 1px rgb(242, 25, 195);
}

ul{
    list-style-type: square;
    text-shadow:0px 0px 1px rgb(242, 25, 195);
}

header{
    text-align: center;
    padding: 20px;
    text-shadow: 4px 6px 5px gray;
}

header img{
    width: 100%;
}

h1, h2 {
    font-size: 1.3em;
    text-shadow: 4px 6px 5px greenyellow;
}

a#navicon{
    display: none;
}

nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: darkcyan;
    text-align: center;
}

nav li{
    display: block;
    width: 100%;
    float: none;
}

nav a{
    text-decoration: none;
    display: block;
    line-height: 4.0em;
    text-decoration: none;
    text-align: center;
    color: black;
    padding: 20px;
    border-bottom: 1px solid #444;
    flex-direction: column;
}

nav a:hover{
    background-color: white;
    color: white;
    font-size: 2.0em;
    transition: background-color 1s ease-in 0.5s, color 1s ease-in 0.5s, font-size 1s ease-in 0.5s;
}

body {
    margin: 0;
    width: 100%;
}

body > footer{
    background-color: black;
    color: azure;
    font-weight: bolder;
    font-size: 1.5em;
    line-height: 5em;
    text-align: center;
    margin-top: 15px;
    padding: 15px;
    clear: both;
}

main {
  padding: 20px;
  margin-top: 35px;
}

main img{
    float: right;
    width: 30%;
    padding: 15px;
}


/*Flexbox Styles for Drink Images*/
div.gallery {
  display: flex;
  flex-direction: column;
  column-gap: normal;                 
}

div.imgGallery {
  max-width: 100%;          
  height: auto;
  float: right;
}


/*Right Column Styles*/

section#rightColumn {
    float: left;
    width: 67%;
}

section#rightColumn img{
    display: block;
    width: 100%;
}

section#rightColumn nav.horizontalNavigation li{
    width:25%;
}


/*Media Query for Styles for Tablets - screen sizes up to max-width 1100px*/  
@media only screen and (max-width:1100px){

nav li{
    display: block;
    width: 20%;
    float: right;

}

nav a{
    display: block;
    padding: 15px;
    border-bottom: 1px solid #444;
}

div.imgGallery{
        flex: 48%;
        max-width: 50%;
    }

}

/* ==========================================================================
   1. GLOBAL STYLES (Applies to all screen sizes, including mobile)
   ========================================================================== */

   @media only screen and (max-width: 768px) {

header{
    text-align: center;
    padding: 20px;
    text-shadow: 4px 6px 5px gray;
}

div.imgGallery{
    flex: 100%;
    max-width: 100%;
    padding: 0 5px;
}

a#navicon{
    display: block;
    font-size: 24px; 
    margin: 10px auto;
}

a#navicon img {
  width: 35px;  
  height: 35px;
}

nav.horizontal ul{
    display: none;
}

a#navicon:hover+ul, nav.horizontal ul:hover{
    display: block;
}

form {
    width: 100%;
    font-size: large;
}

fieldset {
    width: 100%;
    padding: 5px;
    margin: 0;
}

input, select {
    position: inherit;
    display: block;
    height: 50px;
    padding: 5px;
    width: 90%;
}

label {
    position: inherit;
    display: block;
    height: 50px;
    width: 90%;
}

input[type="submit"], input[type="reset"] {
    float: none;
    width: 90%;
    margin: 10px;
    font-size: 1.2em;
}

body{
    width: 100%;
    margin: 0;
}

nav li{
    float: none;
    font-size: x-large;
    width: 100%;
}
    
nav a{
    border-bottom:solid black 1px;
}

main>img{
    width: 90%;
    float: none;
    padding: 0px;
}

table, tbody, tr, td, th{
    display: block;
}

thead, tfoot{
    display: none;
}

tbody td{
    position: relative;
    padding-left: 40%;
    overflow: visible;
    height: auto;
}

td::before{
    content: attr(data-label);
    position:absolute;
    top: 0px;
    left:0px;
    padding: 10px;
    width: 40%;
    white-space: nowrap;

}
}

 /*Media Query for Styles for Desktops - screen sizes min width 769px and wider*/ 
@media only screen and (min-width: 769px){

html{
  background-color: white;  
}
nav li{
    display: block;
    width: 33.33%;
    float: left;
}
}

/*Table Styles*/

table{
     width: 100%;
     border: 10px double black;
     border-collapse:collapse;
}

th, td{
    height: 25px;
    border: 1px solid black;
    padding: 10px;
}

thead, tfoot{
    background-color: darkcyan;
    color: white;
}

tbody tr:nth-of-type(even){
   background-color: peachpuff;
}

/* Validation Styles */
input:focus, select:focus, textarea:focus{
    background-color: peachpuff;
}

input#name:focus:valid,
input#phone:focus:valid,
input#mail:focus:valid{
    background: peachpuff url(rb_valid.png) bottom right/contain no-repeat;
}

input#name:focus:invalid,
input#phone:focus:invalid,
input#mail:focus:invalid{
    background: peachpuff url(rb_valid.png) bottom right/contain no-repeat;
}

/* Validation Styles */
input:focus, select:focus, textarea:focus{
    background-color: peachpuff;
}

input#name:focus:valid,
input#phone:focus:valid,
input#mail:focus:valid{
    background: peachpuff url(rb_valid.png) bottom right/contain no-repeat;
}

input#name:focus:invalid,
input#phone:focus:invalid,
input#mail:focus:invalid{
    background: peachpuff url(rb_valid.png) bottom right/contain no-repeat;
}

/* Form Styles */

form{
    width: 90%;
}


fieldset{
    width: 90%;
    padding: 5px;
    margin: 0px 10px 10px 0px;
}

input, select{
    display: block;
    position: relative;
    left: 30%;
    padding: 5px;
    height: auto;
    width: 60%;
}

label{
    display: inline-block;
    padding: 5px;
    width: 30%;
    vertical-align: top;
    text-shadow:0px 0px 1px greenyellow;
}

input[type="radio"]{
    display: inline;
    position: inherit;
    left: 0;
    width: auto;
}

label.radio{
    display: inline;
    position: inherit;
}

input[type="submit"], 
input[type="reset"] {
  display: inline-block;
  left: 0;
  text-align: center;
  width: 40%;
  padding: 10px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}