/*
Name: Alyssa Grant 
File Name: styles.css 
Date: 9/23/2025 
/* 

/* 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 rules for mobile viewport */


/* Style rules to show mobile class and hide tab-desk class */
    .mobile, .mobile-tablet {
        display: block;
    }
        
    .tab-desk, .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;
}

.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;
}

/* 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%;
}

#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;
  }
  
#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%;
}

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 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 ul {
	list-style-type: none;
	text-align: center;
}

 nav li {
     border-top: none;
     display: inline-block;
     font-size: 1.25em;
     font-family: Geneva, Arial, sans-serif;
	 font-weight: bold;
 }
 
 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 */ 
@media screen and (min-width: 1000px) print {

/* Desktop Viewport: Show desktop class, hide mobile-tablet 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 {
       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: #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 (min-width: 1921px), print {

    body {
        background: 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: #fff;
        color: #000;
    }
}