/* Name:Daniela Moreno Date:9/20/2023 file name:Styles.css */
/* CSS Reset */
 body,header,nav,main,footer,img,h1,ul,aside,figure,figcaption {
     margin: 0;
     padding: 0;
     border: 0;
}
/* Style rule for body and images */
 body {
     background-color:white;
}
 img {
     max-width: 100%;
     display: block;
}
/* Style rules for mobile viewpoint */
/* Style rules show mobile class and hide tab-desk class */
 .mobile, .mobile-tablet {
     display: block;
}
 .tab-deck, .desktop {
     display: none;
}
/* style rules for header area */
 .mobile h1, .mobile h3{
     padding: 2%;
     text-align: center;
}
 .mobile h1 {
     font-family:'Emblema One', cursive;
}
 .mobile h3 {
     font-family:'Lora', serif;
}
/* Style rules for navigation area */
 nav {
     background-color: white;
}
 nav ul {
     list-style-type: none;
     text-align: center;
}
 nav li {
     display: block;
     font-size: 1.5em;
     font-family: Geneva, Arial, sans-serif;
     border-top: 0.5px brown;
     font-weight: bold;
}
 nav li a {
     display: block;
     color: brown;
     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-type: square;
}
 .link {
     color:#4d3319;
     text-decoration:none;
     font-weight:bold;
     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;
}
 #info ul {
     margin-left: 10%;
}
 #info, #contact, #form h2 #welcome {
     text-align:center;
}
 .tel-link {
     color: #2a1f14;
     padding: 2%;
     width:80%;
     margin:0 auto;
}
 .tel-link a {
     color: #f6eee4;
     text-decoration: none;
     font-weight: bold;
}

/* style rules for form elements */
fieldset, input, textarea {
    margin-bottom:2%;
}

fieldset,ledend {
    font-weight: bold;
    font-size: 1.25em;
}

lable {
    display: block;
    padding-top: 2%;
}

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

/* Style rules for footer content */
 footer {
     text-align: center;
     font-size: 0.85em;
     background-color:white;
     color:brown;
     padding:1% 0;
}
 footer a {
     color: brown;
     text-decoration: none;
}
/* Media Query for tablet Viewport */
 @media screen and (min-width: 620px), print {
     
    /* Tablet 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:auto auto;
        grid-gap:20px;
    }
    aside {
        grid-column:1 / span 2;
    }
    
    /* Tablet Viewport: Style rule for form element*/
    form {
        width:70%;
        margin:0 auto;
    }
}
/* Media query for desktop viewport */
 @media screen and (min-width:1000px), print {
     
     /*Desktop Viewport: show desktop class, hide ,hide mobile-table class*/
     .desktop {
         display:block;
     }
     
     .mobile-tablet {
         display:none;
     }
    /* desktop viewport: style rules for nav 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 {
        display:grid;
        grid-template-columns: auto auto auto; 
        grid-gap:30px;
    }
    aside {     
        grid-column: 1 / span 3;
        font-size:2em;
    }
        
    /* 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 {
        background:1px solid #2a1f14;
        padding:1%;
    }
    
    th {
        background-color:#2a1f14;
        color:#fff;
        font-size:1.15em;
    }
    
    tr:nth-child(odd) {
        background-color:#deccba;
    }
    
    /*Desktop Viewport:style rules for form elements*/
    form {
        width:auto;
    }
    
    .form-grid {
        display:grid;
        grid-template-columns:auto auto;
        grid-gap:20px;
    }
    
    .btn {
        grid-column:1 /span 2;
    }
}
/* Media Query for Large Desktop Viewports */
 @media screen and (min-width:1921px), print {
     body {
         background: linear-gradient(#f6eee4, #7859a);
    }
     #wrapper {
         width: 1920px;
         margin: 0 auto;
    }
     main {
         background-color: #f6eee4;
    }
    .grid {
        grid-template-columns: auto auto auto auto;
    }
    aside {
        grid-column: 1 / span 4;
        font-size:3em;
    }
}
/* Media Query for Print */
 @media print {
     body {
         background-color:#fff;
         color:#000;
    }
}