/*
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 {
        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: #2a1f14;
}

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

nav li {
	display: block;
	border-width: 0.5px;
	border-style: solid; 
	border-color: #f6eee4;
	font-size: 1.5em; 
	font-family: Geneva, Arial, sans-serif;
	font-weight: bold;
}

nav li a {
	display: block;
	color: #f6eee4;
	padding: 0.5em;
	text-decoration: none;
} 


/* Style rules for main content */ 
main { 
    padding: 2%;
   font-family: "Lora", serif;
}

main p {
    font-size: 1.25em;
}

main {
    padding-top: 2%;
}

main ul {
    list-style: square;
}

.link {
    color: #4d3319;
    text-decoration: none; 
    font-weight: bold;
    font-style: italic;
}

.action { 
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
}

#contact {
    text-align: center;
}
/* Style rules for main content */ 
main {
    padding: 2%; 
	font-family: Verdana, Arial, sans-serif;
} 
.lora-font {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

main p {
	font-size: 1.25em;
}

main {
	padding-top: 2%;
}

main ul {
	list-style: 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;
  }

/* Style rules for form elements */

fieldset, input, textarea {
    width: 100%;
    margin-bottom: 2%;
}

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

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

#submit {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: 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: #f6ee4; 
	padding: 1% 0%;
}
 
footer {
	color: #f6eee4;
	text-decoration: none; 
}

/* Media Query for Tablet Viewport */ 
@media screen and (min-width: 620px) {
    
 /* Tablet Viewport: Show tab-desk 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.25;
 }
 
 nav li a {
     padding: 0.5em;
 }
 
 .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 Large Desktop Viewports */ 
@media screen (min-width: 1921px) {

    body {
        background: linear #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: white;
        font color: black;
    }
}
/* Media Query for Desktop Viewport */ 
@media screen and (min-width: 1000px) print {
  
/* Desktop Viewport: Style rules for nav area */  

   .mobile-tablet {
       display: none;
   }  
   
   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;
   } 
   
   .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;
}
/* Desktop Viewport: Style rules for main content */
   #info ul { 
       margin-left: 5%;
   }