/* Name:Daniela Moreno Date:9/20/2023 file name:Styles.css */
/* CSS Reset */
 body,header,nav,main,footer,img,h1,ul,aside,figure,figcaption,video {
     margin: 0;
     padding: 0;
     border: 0;
}
/* Style rule for body and images */
 body {
     background-color:#f6eee4;
}
 img video {
     max-width: 100%;
     display: block;
}
.welcom {
    position: absolute;
    top: 40%;
}
.display-1{
    font-size: 4em;
}
.bg-brown {
    background-color: #2a1f14;
}
.hero {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url(../images/baby-hawk.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    
}
/* Style rules for skip navigation link */
.skip {    
    position: absolute;
    left: -999px;
}
.skip:focus {    
    color: #fff;    
    background-color: #2a1f14;    
    text-decoration: none;    
    padding: 0.5%;    
    top: auto;    
    left: auto;    
    right: 1px;    
    z-index: 1;
    
}
/* Style rules for mobile viewpoint */
 .mobile-nav a {
    color: #fff;
    text-align: center;
    font-size: 2em;
    text-decoration: none;
    padding: 3%;
    display: block;
}

 .mobile-nav .nav-icon {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     color: #f6eee4;
     padding: 2%;
 }
 
 .nav-icon div {
     height: 40px;
     width: 40px;
     color: #2a1f14;
 }
 
 #questions p {   
     cursor: pointer;
 }
 #answer  {   
     text-align: center;   
     font-weight: bold;   
     width: 80%;   
     margin: 0 
     auto;
 }
 #answer h2 {   
     display: none;
 }
/* Style rules show mobile class and hide tab-desk class */
 .mobile, .mobile-tablet {
     display: block;
}
 .tab-deck, .desktop, #nav-links{
     display: none;
}
/* style rules for header area */
 .mobile h1, .mobile h3{
     padding: 2%;
     text-align: center;
}
 .mobile h1 {
     font-family:'Emblema One', cursive;
     margin: 2% 0 0 3%;
}
 .mobile h3 {
     font-family:'Lora', serif;
}
/* Style rules for navigation area */
 nav {
     background-color: #2a1f14;
}
 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 #f6eee4;
     font-weight: bold;
}
 
/* 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:#2a1f14;
     color:#f6eee4;
     padding:1% 0;
}
 footer a {
     color: #f3e6d8;
     text-decoration: none;
}
 .social {
     display: inline block;
     padding: 4%;
 }
/* 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;
         display: block;
         color: #f6eee4;
         text-align: center;
         text-decoration: none;
    }
    .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;
    }
    
    .mobile-nav {
        display: none;
    }
}
/* Tablet Viewport: Style rules for footer area */
footer{
    overflow: auto;
}
.copyright {
    float: left;
    width: 25%;
}
.social{
    float: right;
    width: 25%;
}
/* 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;
    }
}