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

/*CSS Reset*/
body, header, nav, main, footer, img, mobile, aside, figure, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
}

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

/*Style Rules for mobile viewport */
mobile {
  display:block;
}

/*Style Rules to show mobile class and hide tab-desk class*/
.tab-desk {
  display: hidden;
}


/*Style Rules for header area*/
h1 {
  text-align: center;
  font-family: 'Emblema One', cursive;
  padding: 2%
}
h3 {
  text-align: center;
  font-family: 'Lora', serif;
  padding: 2%
}
body {
 background-color:#f6eee4 ;
}

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

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

nav li {
  display:block;
  font-size:1.5em;
  font-family: geneva,Arial,sans-serif;
  font-weight: bold;
  border-top: 0.5px;
  border-top-color: #f6eee4;
}
nav li a {
  display: block;
  color: #f6eee4;
  text-align: center;
  padding:0.5em 2em;
  text-decoration: none;
}

/* 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: #4d3319;
  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;
  text-shadow: 4px 4px 10px #c5a687;
}

figure {
 border: 4px solid #2a1f14;
 box-shadow:6px 6px 10px #c5a687;
 max-width:400px;
 margin:2% auto;
}

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

#contact {
  text-align:center;
}

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

.tel-link a  {
 color: #f6eee4;
 text-decoration: none;
 font-weight: bold;
}
/* Style rules for footer content*/
footer {
  text-align:center;
  font-size: 0.85em;
  background-color: #2a1f14;
  color: #f6eee4;
  padding: 1% 0%;
}

footer a {
  color: #f3e6d8;
  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 {
 display: none; 
}
/*Tablet viewport: style rules for nav area */
nav li {
  border-top: none;
  display: inline-block;
  font-size:1.25em;
}
nav li a {
  padding:0.5em;
}

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

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

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

/*Desltop 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: linear-gradient #f6eee4 #78593a;
}
  #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: #000;
 }
}