/*
Author: Ta'Bria Key
Date: 2/18/26
File Name: styles.css
*/

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

/*Style rules for body and images*/
    body{
        background-color: #f6eee4;
    }
    
    img, video{
         max-width: 100%;
         display: block;
         
    }
    
    
    /*Style rule for mobile viewpoint*/
    
    
    /*Style rule to show mobile class and hide tab-desk class*/
    .mobile {
        display: block;
    }
    
    .mobile-tablet,.desktop, #nav-links {
        display: none;
    }
    
    .tab-desk {
        display: none;
    }

/*Style rules for header area*/

    .mobileh1,.mobileh3 {
       padding: 2%; 
       text-align: center;
    }

    .mobileh1 {
        font-family: 'Emblema One';cursive;
        margin: 2% 0 0 3;
    }
    
    .mobileh3 {
        font-family: 'Lora', serif;
    }
    
    /*Style rules for navigation area*/
    nav{
        background-color: #2a1f14;
    }
    
    .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: #f6eee4;
        padding: 2%;
    }
    
    .nav-icon div {
        height: 40px;
        width: 40px;
        color: #2a1f14;
    }
    
        
    /*Add 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-style: 4px solid #2a1f14;
       box-shadow: 6px 6px 10px #c5a687;
       max-width: 400px;
       margin:2% auto;
    }
    
    figcaption{
        padding:2%;
        border-top:4px solid #2a1f14;
    }
    
    #infoul {
        margin-left: 10%;
    }
    
    #contact, #form h2 {
        
        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;
    }
    
    #question 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%;
    }
    
    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: #f6eee4;
        text-decoration: none;
    }


/*Media Query for Tablet Viewport*/
@media screen and (min-width:620px), print {


/*Tablet viewpoint: Show tab-desk class, hide mobile class*/
    .tab-desk {
        display: block;
    }
    
    .mobile, .mobile-nav {
        display: none;
    }

   
    
/*Tablet veiwpoint: Style rules for nav area*/

    nav ul{
        list-style-type: none;
        text-align: center;
    }
    
    nav li {
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        border-top:none;
        display: inline-block;
        font-size: 1.25em;
    }
    
    nav li a {
        padding: 0.5em;
        display: block;
        color: #f6eee4;
        text-decoration: none;
    }
    

 .grid {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
    }
    
    aside {
        grid-column: 1/span 2;
    }
    
/*Tablet viewport: Style rule for form element*/    

    form {
        width:70%;
        margin:0 auto;
    }

}

/*Media Query for Desktop Viewport: show desktop class, hide mobile-tablet*/
@media screen and (min-width:1000px), print{

    .desktop{
        display:block;
    }
    .mobile-tablet {
        display: none;
    }


/*Desktop veiwpoint: Style rules for nav area*/
    nav li {
        font-size: 1.25em;
    }

    nav li a {
        padding: 0.5em 1.5em;
    
    }    

    nav li a:hover {
        color: #2a1f1f;
        background-color: #f6eee4;
        opacity: 0.5;
    }
 }
 
/*Desktop veiwpoint: Style rules for main area*/
    #infoul {
        margin-left: 5%;
    }
    
    .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 {
        border:1px solid #2a1f14;
        padding:1%;
    }
    
    th{
        background-color:#2a1f14;
        color:#ffffff;
        font-size:1.15em;
    }
    
    tr:nth-child(odd) {
        background-color:#deccba;
        
    }

    /*Desktop viewport: Style rule for form element*/   
    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 Viewport*/
@media screen and (min-width:1921px), print {

/*Style rules for Large Desktop Viewports*/
    body {
        background-image: linear-gradient(#f6eee4, #78593a);
    }
    
    #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:#ffffff;
        color:#000000;
    }
}