/*
Student Name: Kayembe Kanyinda
Date: 2/19/2025
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 rules for mobile viewport */ 

 

/* Style rule 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 and (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; 

    } 

     

}