@charset "utf-8";

/*
   
   Filename: styles.css

*/

/* HTML and Body Styles */
main {
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
   margin-top: 70px;
}


body {
   font-family: Verdana, Geneva, sans-serif;
   color: rgb(91, 91, 91);
   background-color: ivory;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}
/* Heading Styles */

header {

text-align: center;
padding: 20px;

}

h1 {
   text-align: center;
}

h2 {
font-size: 1.3em;
display: block;
width: 100%;
}

main >img {
   width: 25%;
   padding: 25px;
   float: right;
}

header img {
   width: 100%;
}

/* Aside and Blockquote Styles */


/* Navigation Styles */	
/* nav {
   background-color: rgba(106, 78, 6, 0.508);
   padding: 15px;
   text-align: center;
}
nav > a {
   padding: 0px 10px 0px 10px;
   text-decoration: none;
   color: black;
}

nav a:hover {
   text-decoration: underline;
   color: white;
}
*/

/*Validation Styles*/
input:focus, select:focus, textarea:focus{
   background-color: rgb(220 255 220);
}

input#name:focus:valid,
input#zipcode:focus:valid,
input#phone:focus:valid,
input#email:focus:valid{
   background: rgb(220 255 220);
}

input#name:focus:invalid,
input#zipcode:focus:invalid,
input#phone:focus:invalid,
input#email:focus:invalid{
   background: rgb(255 232 233);
}

/* List Styles */
nav ul {
   list-style: none;
   list-style-image: none;
   margin: 0;
   padding: 0;
}

nav li {
   float: left;
   width: 20%;
   display: block;
}

nav a{
text-decoration: none;
display: block;
background-color: rgba(106, 78, 6, 0.508);
line-height: 2.8em;
text-align: center;
color: black;
}

nav a:hover {
   background-color: rgb(89, 76, 39);
   color: white;
   font-size: 1.2em;
   transition: background-color 0.5s ease-in 0.2s, color 0.5s ease-in 0.2s, font-size 1s ease;
}

/* Footer Styles */
body > footer {
   background-color: rgba(87, 68, 21, 0.558);
   color: rgba(8, 6, 1, 0.515);
   font-weight: bold;
   font-size: 0.9em;
   line-height: 3em;
   text-align: center;
   margin-top: 10px;
   padding: 10px;
   clear: both;
}

/*Flexbox for Images*/
div.gallery {
   display: flex;
   flex-flow: wrap;
}


div.imgGallery {
   flex: 25%;
   max-width: 25%;
   padding: 5px;
   box-sizing: border-box;
}

div.imgGallery img {
   width: 100%;
}

/* media query for flexbox 50% w */

@media screen and (max-width: 1100px) {
div.imgGallery {
   flex: 50%;
   max-width: 50%;
}
}

/*desktop stuffs*/

@media screen and (min-width: 769px) {
html {
   background-image: url(images/top-view-arrangement-cornflowers.jpg);
   background-size: cover;
}

form{
   width: 90%;
}
fieldset{
   width: 90%;
   padding: 5px;
   margin-right: 10px;
   margin-bottom: 10px;
}
input, select{
   display: block;
   position: relative;
   left: 30%;
   padding: 5px;
   height: auto;
   width: 60%;
}
label{
   display: block;
   position: absolute;
   padding: 5px; 
   width: 30%;
}
input[type=radio]{
   display: inline;
   position: inherit;
   left: 0;
   width: auto;
}
label.radio{
   display: inline;
   position: inherit;
}
input[type="submit"], input[type="reset"]{
   display: block;
   float: left;
   left: 0;
   text-align: center;
   width: 40%;
   padding: 10px;
   margin-left: 5%;
   margin-right: 5%;
   margin-bottom: 10px;
}

}

/*Table Styles*/
table{
   width: 100%;
   border: 10px solid rgb(89, 76, 39);
   border-collapse: collapse;
   
}

th, td{
   height: 35px;
   border: 2px solid rgb(89, 76, 39);
   padding: 10px;
}

thead, tfoot{
   background-color: rgb(92, 137, 216);
   color: ivory;
}

tbody tr:nth-of-type(even){
   background-color: rgba(87, 68, 21, 0.265);
}

/* tablets*/

@media screen and (max-width: 768px) {
html {
   background-color: beige;
}

   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;
   }
   
   div.imgGallery {
      flex: 100%;
      max-width: 100%;
   }

table, tbody, tr, td, th{
   display: block;
}
thead, tfoot{
   display: none;
}
tbody td{
   position: relative;
   padding-left: 40%;
   height: auto;
}
td::before{
   content: attr(data-label);
   position: absolute;
   top: 0px;
   left: 0px;
   padding: 10px;
   width: 40%;
}

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;
}

}