/* Author:Issac Lee Date:03/05/2025 File Name:styles.css */ 

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

/* Style rule for body and images */ body { background-color: #f6eee4; } 

img { max-width: 100%; display: block; }  

/* Style rules for mobile viewpoint */ 

/* Style rules to show mobile class and hide tab-desk class */ 

.mobile { display: block; } 

.tab-desk { display: none; } 

/* Style rules for header area */ 

.mobile h1 { padding: 2%; text-align: center; font-family: 'Emblema One', sans-serif; } 

.mobile h3 { padding: 2%; text-align: center; font-family: 'Lora', sans-serif; } 

.main { font-family: 'Lora', sans-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; font-weight: bold; border-top: 0.5px solid #f6eee4; } 

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

/* Style rules for main content */ main { padding: 2%; font-family: Verdana, Arial, sans-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; } 

#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 footer content */ 

footer { text-align: center; font-size: 0.85em; background-color: #2a1f14; color: #f6eee4; padding: 1% 0% 1% 0%; } 

#info ul { margin-left: 10%; } 

footer a { color: #f3e6d8; text-decoration: none; } 

/* Style rules for form elements */ 

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

/* Tablet Viewport: Style rule for form element */ 

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

/* 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 Tablet Viewport */ 

@media (min-width: 620px), { /* 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; } 

nav a { padding: 0.75em 2em; } 

.grid { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; } 

aside { grid-column: 1 / span 2; } } 

/* Media Query for Desktop Viewpoint */ @media (min-width: 1000px), { 

.mobile-tablet { 
    display: none; 
} 
  

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

.grid { grid-template-columns: auto auto auto; grid-gap: 30px; } 

aside { grid-column: 1 / span 3; font-size: 2em; } } 

/* Desktop Viewpoint: Style rules for main content */ #info ul { margin-left: 5%; } 

/* Media Query for Large Desktop Viewports */ 

@media (min-width: 1921px) { 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: white; color: black; } }