/*

Author:  TONYH

Date:  2026-03-16

Filename:  styles.css

Purpose:  Style sheet for CH6 LAB01

*/



/* Style rules for mobile viewport ========================================= */



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

ul,

section,

aside,

figure,

figcaption{

    margin: 0;

    padding: 0;

    border: 0;

}



/* Display the mobile class.  Hide the tablet/desktop class */



.mobile {

    /* Needed? Adding this class selector is not stated in the Lab instructions. */

    display: block;

}



.tab-desk {

    display: none;

}



/* Style rules for the entire webpage (not a particular section), in alphabetic order */



aside {

    text-align: center;

    font-size: 1.5em;

    font-weight: bold;

    color: #373684;

    text-shadow: 3px 2px 10px #8280cb;

}



figcaption {

    position: absolute;

    bottom: 0;

    background: rgba(55, 54, 132, 0.7);

    color: #fff;

    width: 100%;

    padding: 5% 0;

    text-align: center;

    font-family: Verdana, Arial, sans-serif;

    font-size: 1.5em;

    font-weight: bold;

}



figure {

    position: relative;

    max-width: 275px;

    margin: 2% auto;

    border: 8px solid #373684;

}



img {

    /* style rule for images */

    max-width: 100%;

    display: block;

}



/* Style rule for box-sizing, applies to all elements */



* {

    box-sizing: border-box;

}



section {

}



/* class selectors */



.action {

    font-size: 1.25em;

    color: #373684;

    font-weight: bold;

}



.map {

    border: 5px solid #373684;

    width: 95%;

    height: 50%;

}



.round {

    border-radius: 8px;

}



.tel-link {

    background-color: #373684;

    padding: 2%;

    margin: 0 auto;

    width: 80%;

    text-align: center;

    border-radius: 5px;

}



.tel-link a {

    color: #fff;

    text-decoration: none;

    font-size: 1.5em;

    display: block;

}



/* ID selectors */



#contact {

    text-align: center;

}



#contact .email-link {

    color: #4645a8;

    text-decoration: none;

    font-weight: bold;

}



#info {

    clear: left;

    background-color: #c0caf7;

    padding: 1% 2%;

}



#info ul {

    margin-left: 10%;

}



#piano,

#guitar,

#violin {

    margin: 0 2%;

}



/* Style rules for header content */



header {

    text-align: center;

    font-size: 1.5em;

    color: #373684;

}



header h1 {

    font-family: "DM Serif Display", serif;

}



/* Style rules for navigation area */



nav {

    background-color: #373684;

}



nav ul {

    list-style-type: none;

    text-align: center;

}



nav li {

    display: block;

    font-size: 2em;

    border-top: 1px solid #e5a9fc;

}



nav li a {

    display: block;

    color: #fff;

    text-align: center;

    padding: 0.5em 1em;

    text-decoration: none;

}



/* Style rules for main content */



main {

    padding: 2%;

    background-color: #e5e9fc;

    overflow: auto;

    font-family: "Roboto", sans-serif;

}



main p {

    font-size: 1.25em;

}



/* Style rules for footer content */



footer {

    text-align: center;

    font-size: 0.65em;

    clear: left;

}



footer a {

    color: #4645a8;

    text-decoration: none;

}



/* Media query for tablet viewport ========================================== */



@media screen and (min-width: 550px), print {

    /* Tablet viewport:  Show tab-desk class, hide mobile class */



    .tab-desk {

        display: block;

    }



    .mobile {

        display: none;

    }



    /* Table viewport:  Style rules across all sections of the webpage */



    aside {

        grid-column: 1 / span 2;

    }



    span.tab-desk {

        display: inline;

    }



    .grid {

        display: grid;

        grid-template-columns: auto auto;

        grid-gap: 20px;

    }



    .map {

        width: 500px;

        height: 450px;

    }



    /* Tablet viewport:  Style rule for header content */



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



    nav li {

        border-top: none;

        display: inline-block;

        font-size: 1.5em;

        border-right: 1px solid #e5e9fc;

    }



    nav li:last-child {

        border-right: none;

    }



    nav li a {

        padding: 0.25em 0.5em;

    }



    /* Tablet viewport:  Style rule for map */

}



/* Media query for desktop viewport ========================================= */



@media screen and (min-width: 769px), print {

    /* Desktop viewport:  Show tab-desk class, hide mobile class */



    .tab-desk {

        display: block;

    }



    .mobile {

        display: none;

    }



    /* Desktop viewport:  Style rules across all sections of the webpage */



    aside {

        grid-column: 1 / span 4;

    }



    .grid {

        display: grid;

        grid-template-columns: auto auto auto auto;

    }



    #info ul {

        margin-left: 5%;

    }



    #piano,

    #guitar,

    #violin {

        width: 29%;

        float: left;

        /* element floats to left of its container */

        margin: 0 2%;

    }



    /* Desktop viewport:  Style rule for header */



    header {

        padding: 2%;

    }



    /* Desktop viewport:  Style rules for nav area */



    nav li {

        padding: 0.5em 1.5em;

        /* display: block; ... comment out settings for mobile viewport ... */

        /* font-size: 2em; */

        /* border-top: 1px solid #e5a9fc; */

    }



    nav li a:hover {

        color: #373684;

        background-color: #e5e9fc;

        /* display: block; ... comment out settings for mobile viewport ... */

        /* color: #fff; */

        /* text-align: center; */

        /* padding: 0.5em 1em; */

        /* text-decoration: none; */

    }



    /* Desktop viewport:  Style rules for main comment */



    main h3 {

        font-size: 1.5em;

    }

}



/* Media query for print ==================================================== */



@media print {

    body {

        color: #000;

        background-color: #fff;

    }

}