/*
Author: Jada Williams
Date: 2/21/26
File Name: Styles.css
*/
/* CSS Reset */
 body, header, nav, main, footer, u1 {
 margin: 0;
 padding: 0;
 border: 0;
 }
 
 
 /* Style rule for images */
img {
max-width: 100%;
display: block;
}


/*Style rules for mobile viewport*/


/*Hide tab-desk class */
.tab-desk {
    Display: none;
}


/* Style rules for header content */
header {
text-align: center;
font-size: 1.5em;
color: #373684;
}
header h1 {
font-style: italic;
}

.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}




/* Style rules for navigation area */
nav {
background-color: #373684;
}
nav ul {
list-style-type: none;
margin: 0;
text-align: center;
}
nav li {
display: block;
border-top: 1px solid #e5e9fc;
font-size: 2em;
}
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: Verdana, Arial, sans-serif;
}
main p {
font-size: 1.25em;
}
.action {
font-size: 1.25em;
color: #373684;
font-weight: bold;
}
#piano, #guitar, #violin {


margin: 0 2%;
}
#info {
clear: left;
background-color: #c0caf7;
padding: 1% 2%;
}
#info ul {
    margin-left: 10%;
}
.round {
    border-radius: 8px;
}
#contact {
text-align: center;
}
.email-link {
color: #4645a8;
text-decoration: none;
font-weight: bold;
}
.email-link {
    /*styling here */
}
.tel-link{
    background-color:#373684;
    padding: 2%;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    border-radius: 5%;
}
.tel-link a {
color: #fff;
text-decoration: none;
font-size: 1.5em;
display: block;
}
.map {
border: 5px solid #373684;
width: 95%;
height: 50%;
}








/* 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: style rules for nav area*/
    nav li {
        border-top: none;
        display: inline-block;
        font-size: 1.5em;
        border-right: 1px solid #e59e1c;
    }
    nav li: last-child {
        border-right: none;
    }
    nav li a {
        padding: 0.25em o.5em;
    }
    
    /* Media query for desktop viewport */
    }
    @media screen and (min-width:769px) {
    /*Desktop viewport: style rules for header*/
    header{
        padding: 2%;
    }
        nav li a {
            padding: 0.5em 1.5em;
        }
        nav li a:hover{
            color: #373684;
            background-color: #e59e1c;
        }
    }
    /* desktop viewport: style rules for main content*/
    #info ul {
        margin-left: 5%;
    }
    Main h3{
        font-size: 1.5em;
    }
    #piano, #guitar, #violin {
        width: 29%;
        float: left;
        margin: 0 2%;
    }
    /*Media query for print */
    @media print {
        body{
            background-color: #fff;
            color: #000;
        }
    }
/* Tablet Viewport: show tab-desk class , hide mobile class */
.tab-desk{
    display: block;
}
    .mobile{
    display: none;
}
/* Tablet Viewport: Style rule for header content */
span.tab-desk {
display: inline;
}
/* Tablet Viewport: style rules for map */
.map {
    width: 500px;
    height: 450px;
}