/*
Author: Jada Williams
Date: 2/1/26
File Name: Styles.css
*/
/* CSS Reset */
 body, header, nav, main, footer, u1, section, article, aside{
 margin: 0;
 padding: 0;
 border: 0;
 }
 
 
 /* Style rule for images */
img {
max-width: 100%;
display: block;
}
/* style rule for box sizing applies to all elements*/
*{
    box-sizing: border-box;
}


/*Style rules for mobile viewport*/


/*Hide tab-desk class */
.tab-desk {
    Display: none;
}
section {
    background-color: #183440;
    color: #fff;
    margin-top: 4%;
    padding: 3%;
}
article {
    margin-top: 1%;
    padding: 2%;
}
aside {
    background-color: rgba(24, 52, 64, 0.3);
    color: #183440;
    padding: 2%;
    margin-top: 1%;
    box-shadow: 4px 4px 10px #183440;
}
figure{
    position: relative;
    max-width: 275px;
    margin: 2% auto;
    border: 8px solid #373684;
}
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;
}


/* 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) {
    /*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;
    }
       .grid {
            display: grid;
            grid-template-columns: auto auto;
            grid-gap: 20px;
       }
    aside {
        grid-column: span 2;
     }
    }
    /* 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;
        }
    .grid {
        grid-template-columns: auto auto auto auto;
     }
     aside {
         grid-column: span 4;
     }
    }
    figcaption{
        font-size: 1em;
    }
    /* 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;
}

aside {
    background-color: f4f4f4;
    padding: 1em;
    margin: 1em 0;
}