/*
Author:Sara Goulart
Date 10/15/22
File Name: styles.css
*/

/*CSS Reset*/
body, header, nav, main, footer, img, mobile, aside, figure, figcaption, video {
  margin: 0;
  padding: 0;
  border: 0;
  color:#faad77;
  text-align:center;
}

/* Style rule for body & images */
img, video{
    
    max-width: 100%;
    display: block;
}

/*Style Rules for mobile viewport */
.mobile, .mobile-tablet {
  display:block;
}

/*Style Rules to show mobile class and hide tab-desk class*/
.tab-desk, .desktop, #nav-links {
  display: none;
}

/*Style rules for header area*/
.mobile h1{
    padding:2%;
    text-align:center;
    font-family: 'DM Serif Display', serif;
    margin: 2% 0 0 3;
}

.mobile h3{
    padding:2%;
    text-align:center;
    font-family: 'DM Serif Display', serif;
}

/*Style Rules for header area*/

body {
 background-color:#f4f3ee ;
}

/* Style rules for navigation area */
nav {
  background-color: #faad77;
}

.mobile-nav a {
 color: #fff;
 text-align: center;
 font-size: 2em;
 text-decoration:none;
 padding: 3%;
 display: block;
}

.mobile-nav a.nav-icon{
  display:block;
  position:absolute;
  left:0;
  top:0;
  color:#c8a796;
  padding: 2%;
}

.nav-icon div{
 height: 40px;
 width:40px;
 color: #eea888
}

/* Style rules for main content*/
main {
  padding: 2%;
  font-family: 'Lora', serif;
}

main p {
 font-size:1.25em; 
}

main h3 {
  padding-top: 2%;
}

main ul {
  list-style: Square;
}

.link { 
  color: #faad77;
  text-decoration: none;
  font-style: italic;
  
}
  
.action {
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
}

.round {
  border-radius: 6px; 
}

aside {
  text-align: center;
  font-size:1.5em;
  font-weight: bold;
}

figure {
 border: 4px solid #faad77;

 max-width:400px;
 margin:2% auto;
}

figcaption {
 padding: 2%;
 border-top: 4px solid #faad77;
}

#info ul{
  margin-left:10%;
}

#contact, #form h2 {
  text-align:center;
  color
}

.tel-link {
  background-color: #faad77;
  padding: 2%;
  width: 80%;
  margin: 0 auto;
}

.tel-link a  {
 color: #f9f8c0;
 text-decoration: none;
 font-weight: bold;
}

#questions p {
 cursor: pointer; 
}

#answer {
 text-align:center;
 font-weight:bold;
 width:80%;
 margin:0 auto;
}

#answer h2 {
 display: none; 
}
/*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%;
}

#submit{
 margin: 0 auto;
 display: block;
 padding: 2%;
 background-color: #faad77;
 color: #faad77;
 font-size: 1.25em;
 border-radius: 10px;
}

/* Style rules for footer content*/
footer {
  text-align:center;
  font-size: 0.85em;
  background-color: #faad77;
  color: #f9f8c0;
  padding: 1% 0%;
}

footer a {
  color: #f9f8c0;
  text-decoration: none;
}


/*Media Query for Tablet Viewport*/
@media screen and (min-width: 620px), Print {
 /*table viewport: show tab-desk class, hide mobile class */
 .tab-desk {
   display: block;
}
.mobile .mobile-nav {
 display: none; 
}


/*Tablet viewport: style rules for nav area */
nav li {
  border-top: none;
  display: inline-block;
  font-size:1.25em;
  font-family: 'DM Serif Display', serif;
  font-weight: bold;
  border-top-color: ##faad77;
  text-align: center;
}
nav li a {
  padding:0.5em;
  display: block;
  color: #f9f8c0;
  text-align: center;
  text-decoration: none;
}

nav ul {
 list-style-type: none;
 text-align: center;
 
}

.grid{
  display: grid;
  grid-template-columns: 2;
  grid-gap: 10px;
}

aside{
 grid-column: 1/span 2; 
}
}

/*Tablet Viewport:style rule for formelement*/
form{
width:70%;
margin: 0 auto;
color:#faad77;
}
/*Desktop Viewport: Show desktop class, hide mobile-tablet class */
.mobile-class{
 display:none; 
}

table{
  border: 1px solid #faad77;
  border-collapse: collapse;
  margin: 0 auto;
}

caption{
 font-size: 1.5em;
 font-weight: bold;
 padding: 1%;
}

th, td{
 
 padding: 1%;
}

th {
 background-color: #faad77;
 color: #faad77;
 font-size: 1.15em;
}

tr {
 background-color: #faad77; 
}

/*Desktop Viewport: Style rules for form elements */

form{
 width:auto;
 color: #faad77;
}

.form-grid{
 display: grid;
 grid-template-columns: auto auto;
 grid-gap: 20px;
}

.btn{
 grid-column: 1/span 2; 
}

/*Media Query for Desktop Viewport */
@media screen and (min-width: 1000px), {
  
  /* desktop Viewport: style rules for nanv area*/
  nav li{
    font-size:1.5em;
}
  
  nav li a {
   padding: 0.5em 1.5em; 
  }
  
  nav li a:hover {
    color: #2a1f14;
    background-color: #f6eee4;
    opacity: 0.5;
}

/*Desktop Viewport: style rules for main content */
#info ul{
  margin-left: 5%;
}
.grid{
 grid-template-columns: 3;
 grid-gap: 30px;
}

aside {
 grid-column: 1/span 3;
 font-size: 2em;
}

/*Media Query for Large Desktop Viewports */
@media screen and (min-width: 1921px) {
  body{
    background: #f6eee4 #faad77;
}
  #wrapper{
    width: 1920px;
    margin: 0 auto;
}
main{
  background-color: #f6eee4;
}
.grid{
        grid-template-columns: 4;
        grid-gap: 30px;
    }
    
    aside{
        grid-column:1/span 4;
        font-size: 3em;
    }

/*Media for Print */
@media print{
 body{
   background-color: #fff;
   font: #faad77;
 }
}