/*  
Author: Dakotta Wheeler 
File Name: styles.css
Date: 09/24/2023
*/

/*CSS Reset*/

body, header, nav, main, footer, img, h1, h3, h4, h5, h6, article, aside, section, figure, figcaption, audio{
margin: 0;
padding: 0;
border:0;
}
/*Style rules for header and headings*/
header{
  text-align: left;
  font-family:'Inria Sans', serif;
}
h4{
  font-size: 2em;
}
h5{
  font-size: 1.2em;
}

/*Style rules for body and images*/
body{
  background-color:#d9b38c;
  text-align: center;
  font-family: 'Inria Sans', sans-serif;
  font-size: .7em;
  text-decoration: none;
}
body a{
  text-decoration: none;
  color:#000000
}
img{
  max-width: 100%;
  display: block;
  float: 100%;
}
/*Style rules for mobile viewport*/
.round{
  border-radius: 6px;
}
/*Style rules for navigation area*/
nav{
  background-color: #996633;
  position: sticky;
  top: 0px;
}
nav ul{
  list-style: none;
  margin: 0;
  text-align: center;
}
nav li{
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Inria Sans', san-serif;
  font-weight: bold;
}
nav li a{
  display: block;
  color: #ffffcc;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 2em;
  padding-right: 2em;
  text-decoration: none;
}
  nav li a:hover {
    background-color: #4d2600 ;
    color: #cc9900 ;
}
/*Style rules for main content*/
main{
  padding:2%;
  font-family: "Inria Sans",sans-serif;
}
main p{
  font-size: 1.25em;
  text-decoration: none;
}
main h3{
  padding-top: 2%;
}
main ul{
  list-style-type: square;
}

/*Style rules for form elements*/
fieldset, input, textarea{
  margin-bottom: 2%;
}
fieldset legend{
  font-weight: bold;
  font-size: 1.25em;
}
label{
  display: block;
  padding-top: 2%;
}
form #submit{
  margin: 0 auto;
  display: block;
  padding: 2%;
  background-color: #cc6600;
  color: #ffffcc;
  font-size: 1.25em;
  border-radius: 10px;
}
/* Style rules for footer content*/
footer{
  text-align: center;
  font-size: 1.3em;
  background-color:#663300;
  color:#ffffcc;
  padding-top:1%;
  padding-bottom:1%;
  padding-left:0%;
  padding-right:0%;
}
footer a{
  color:#ffffcc;
  text-decoration: none;
}
footer a:hover {
  background-color:#663300;
  color:#cc9900 ;
}
section {
  color: #fff;
  padding: 3%;
  background-color: #4d2600;
  margin: 1% 0;
}

article {
  padding: 2%;
}

aside {
  background-color: #4d2600;
  padding: 2%;
  margin-top: 1%;
  color: #fff;
  border-radius: 15px;
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-shadow: 4px 4px 8px #1a0d00;
  box-shadow: 4px 4px 10px #183440;
}
figure{
  border: 4px solid #1a0d00;
  max-width: 2000px;
  margin: auto;
}
figcaption{
  padding: 2%;
  border-top: 4px solid #1a0d00;
}
/* Style rules for table */
table{
  border: 1px solid #2a1f14;
  border-collapse: collapse;
  margin: 0 auto;
}
caption{
  font-size: 1.5em;
  font-weight: bold;
  padding: 1%;
}
th, td{
  border: 1px solid #4d2600;
  padding: 1%;
}
th{
  background-color: #4d2600;
  color: #fff;
  font-size: 1.15em;
}
tr{
  background-color: #ecd9c6;
}
.social{
  display: inline-block;
  padding: 4%;
}
/*Media Query for Tablet Viewport*/
@media (min-width: 420px), print{
/* Media element for Tablet Nav*/
  nav{
    font-size: 1.5em;
    display: block;
  }
  /* Media element for Tablet Main*/
  main{
    font-size: 1.5em;
  }
  .grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  }
      aside{
        grid-column: 1/ span 2;
      }
  .social{
   float: right;
   width: 25%;
}
/*Media Query for Desktop Viewport*/
@media (min-width:1000px), print{

  /*Media element for Desktop nav*/
nav li a:hover {
  background-color:#4d2600 ;
  color:#cc9900 ;
}
  /*Media element for Desktop nav*/
  footer a:hover {
    background-color:#663300 ;
    color:#cc9900 ;
  }
  body a:hover{
  background-color:#cc9900 ;
  color:#ffffcc
}
  /*Desktop Viewport: Style rules for form elements*/
  form{
    width: auto;
  }
  .form-grid{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;
  }
}