/* Author:Tsvetana Yvanova; File Name: styles.css for "music"
            Date: September 27, 2024 |  Update : Oct3, 2024 | Updated: OCT 11,2024 
            CSS Reset  STEP 1 RESET ALl |  BRAND NEW editing OCT 18, - edit 2.0 */
            /* <!-- UPDATED OCT 24, 2024  for TABLES--> */
            /* NOV 8 REVISED & UPDATED 9:38 PM PST _EDITED NOV22_24+ NOV25+
  NEW BOOTSTRAP EDITION_ NOV 25 2024*/
  /* edition for ABBY projectNov230 */


body, header, nav, main, footer, img, h1, section, figure, figcaption {
            margin: 0;
            padding: 0;
            border: 0;
       }
    
 /* Style rule for body and images = STEP 2 IMAGES */
img {
    max-width: 100%;
    display:flex;
    display: block;
    }

/*  Oct 3,24 Style rules for mobile viewport */
*{    
     box-sizing: border-box;     
    } 
/* _________________NOV_7,24___test nov8 move to media query__________________ */
 /* 📒 📒 📒 📒 📒 📒 📒 📒 📒 📒 📒 📒 📒 */
    .mobile-nav a {
        color: #fff;
            text-align: center;
            font-size:0.90em;
            text-decoration: none;
            padding: 2%;                        
            display: block;
            border-top:0.5px solid rgb(172, 168, 168);
            /* font-family:Verdana,Tahoma, sans-serif; */
            font-family:'Optima','Lucida Sans', 'Lucida Sans Regular', 
            'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .mobile-nav a.menu-icon {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            }         
    .menu-icon div {
            color:#4b1a04;
            height:60px;
            width:60px;
            background-color: transparent;
                    }  
/* ________________________________________________ */
  /* Hide tab-desk class */

.tab-desk, #menu-links {
    display:none;
    }

.round{
    border-radius: 15px;
}

body{
    max-width:100%;
    background-color: white;

    }
/* Style rules for header content = STEP 3 HEADER */
/* Updated headerstyle - for FONT to 1.5 em - for mobile */

/* ADDED 🎶🎸DIFFERENT FONT - better for music theme */
header {
    text-align: center;
    font-size: 1.5em;
    color: #f9f4f2;
    font-family: 'Optima','Lucida Sans', 
    'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
       } 

header h1 {
    font-style:normal;
    color: #3a071d;
    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
    'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        } 
/* Style rules for navigation area = STEP 4 NAV */
/* chnged color of nav bar - cannotsee the page lo inks */
nav {
    background-color: #32041b;
    color:white;
    }
/* 🟨 OCT_10 CORRECTION <ul> to <li> as originally instructed */ 

nav li {
    list-style-type: none;
    text-align: center;
    color:white;
}
/* +🧲+MOVED TO TABLET MEDIA QUERY NOV 07 */
ul {
    font-size:0.85em;
    margin:0;
    padding:0;
    list-style:none;
   } 
/* .tab-desk{
    display:none;
    } */
#menu-links{
    display:none;
    }
/*  🟢 CHANGED form ul to li*/
      
 nav li{ 
    display: block;
    border-top: 1px solid #e5e9fc;
    border-bottom:1px solid white;
    text-decoration:none;
    text-align:center;
    font-size:1.1em;
    color:white; 
    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
    'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
/* 🎹______________________changed to ransparent */
nav li a {
    display:block;
    color: #ffffff; 
    background-color:transparent;
    text-decoration: none;
    font-size:1.1em;
    margin:auto;
    font-family: 'Optima','Lucida Sans', 
    'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/* NOV 7,24 ADDED stylerule  */

h1{  
    font-size: 1.25em;
    padding: 4%;
    margin-right: 15%;
    }

/* Style rules for main content; #id, .class = STEP 5 MAIN*/
/* CHANGED FONTR _ TESTONLY nov25 */
/* 🦚🦚🦚🦚🦚🦚🦚🦚🦚🦚🦚INTRODUCED OLIVE GREE COLOR _ TESTING */
main {
    padding: 3%;
    /* background-color: #e5e9fc; */
    background-color: rgba(21, 30, 23, 0.863); ;
    overflow: auto;

    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    } 
main h3 { 
        font-size:1em ;
        } 

nav li  {  
    padding:.5em 1em;


}
nav li :hover {
    color:#5c3704;
    background-color:#e5e9fc;
}  
/* /*  MAINCONTENT #Desktop Viewport: Style rules for main content.  */
#info ul{
    margin-left:5% ;
}
/* __________ */

/* 🟦 */
#id, li{
    font-size:0.85em;
}
p {
    margin-left:auto;
    font-size:0.75em;

    }
main p {
    font-size:0.75em;
    color:#f2f2f7;
     }

     /* This mrgin is for the Lessons bullet [points of services they provide */
#id {
    margin-left: 2em;;
}     
/* Oct3 Changed the font size to 1.25em; */
.action {
    font-size:1em;
    color: #37071b;
    font-weight: bold;
    }
/* Remover 'float,width' form #piano #guitra, #voliun  */
#piano, #guitar, #violin {
    /* width: 29%;
    float: left; */
    margin: 0 2%;
    }

#info {
    clear: left;
    background-color: #c0caf7;
    padding: 1% 2%;
    }
#contact.email-link {
    text-align: center;
    
}
      
/* Oct3_24_ adde the following .tel-link (from the instryuctions) */
.tel-link {
    background-color: #85eaad;
    padding: 2%;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    border-radius: 5px;
   }
.tel-link a {
    color: #3db827;
    text-decoration: none;
    font-size: 1.25em;
    display: block;
} 

#contact a {
    color: #4645a8;
    text-decoration: none;
    font-weight: bold;
}
       
.map {
    border:3px solid #1c1b3c;
    width:95%;
    height:50%;
    }
    /* Style rules for footer content = STEP 6 FOOTER */
footer,.copyright {
    /* text-align: center; */
    font-size: 0.85em;
    clear: left;
    text-indent:10px;
/* .copyright {
    text-indent:10px;
        } */
         
.social img{
        display: inline-block;
        height:35px;
        width:35px;
        padding: 4%;         
        } 
    }
footer a {
    color: #5c9090;
    text-decoration: none;
    }

       
/* 🟠 MOBILE VIEWPORT 🟠- NEWLY CREATED  MEDIA QUERY ; Not sure why was it not created earlier? */
 @media screen  and (max-width:550px) {

    .tab-desk .hero {
        background-size: contain;
        background-position: center;
    }
nav li  {  
    padding:1em 0.5em;

}
nav li :hover {
        color:#4e0d22;
        background-color:#e5e9fc;
}
      /*CORRECTED SIZE OF NAv TEXT  to 1em  */
nav li { 
    display: block;
    border-top:1px solid white;
    border-bottom:1px solid white;
    text-decoration:none;
    text-align:center;
    font-size:.9em;
    /* font-family:Verdana,Tahoma, sans-serif; */
    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white; 
    }

nav li a {
    display:block;
    color: white; 
    background-color:#3b081f;
    text-decoration: none;
    padding:5px; /* Added padding around links */
    font-size:.9em;
    margin:auto;
    /* font-family:Verdana,Tahoma, sans-serif; */
    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
aside{
    text-align:center;
    font-size:0.85em;
    font-weight:bold;
    color:#55b4f4;
    /* text-shadow: 3px 3px 10px #f4f4f6; */
    }
figure{     
    position: relative; 
    max-width: 275px;
    margin: 2% auto;      
    border:1px solid #55b4f4; 
    box-shadow:6px 6px 13px;color:#161b3c;
}
figcaption{
    position: absolute;
    bottom: 0;
    background: #58b4f0;
    color: #fff;
    width: 100%;
    padding: 5% 0;
    text-align: center;
    /* font-family:Verdana,Tahoma, sans-serif; */
    font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:0.85em;
    font-weight: normal;
    }  

    /* Adding the nav style rule from point 4. Instructions  */
    	
    .mobile-nav a {

        color: #f4f4f8;                        
        text-align: center;
        font-size:0.85em;
        text-decoration: none;
        padding: 2%;                        
        display: block;
        /* font-family:Verdana, Tahoma, sans-serif; */
        font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

     }
  .mobile-nav a.menu-icon {
        display: block;
        position: absolute;
        background-color: transparent; 
        right: 0;
        top: 0;
             }
 /* 🟪🌻🟪🌻🟪🌻🟪*/         
    .menu-icon div {
        /* height: 70px; */
        width:70px;
        background-color:transparent;
        border: none;
        size:60px 60px;
      }
     } 
     .social img{
        display: inline-block;
        padding: 4%;  
               
    }


#contact, #rental h2 {
        
        }

     
fieldset legend{
    margin-right:3%;
    font-weight:normal;
    margin-left:20px;
    font-size:1.1em;
    color:white;
    font-family:'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
fieldset,input{
    margin-right:3%;
    margin-bottom:3%;
    display:grid;
    margin-left:20px;
    margin-right:0px;
    font-size:.95em ;
    font-style:italic;
    color:rgb(15, 103, 235);

    }   
label{ 
    margin-right:3%;
    display:block;
    padding-top:2%;
    padding-left: 3%;
    color:white;
    }

    
#submit{
    margin:5%;
    display:block;
    box-sizing:20px 200px;
    padding-right:42%;
    padding-left:42%;
    background-color: rgba(78, 155, 250, 0.979);
    font-size:.95em;
    font-family:'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* color:#37071b; */
    font-style: bold;
    text-align:center;
    border-radius:6px; 

    }
     

 /* 🟨  TABLET VIEWPORT 🟨 MEDIA QUERY FOR///Media Query for Tablet Viewport */
/* BRAND NEW*/
/* NOV 07 -added the 'nav li a ' from /mobile' to 'tabler -as instrut=sted */

 @media screen and (min-width: 550px) { 
    nav li a{
        display:block;
        color: #ffffff; 
        background-color:#36031d;
        text-decoration: none;
        font-size:.9em;
        /* font-family:Verdana,Tahoma, sans-serif; */
        font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
        'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        margin:auto;  
    }
    header, h1{
        margin:0;
        padding:0;
        font-size:1.5em;
        }

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-column-gap:10px; 
    }
    aside {
        grid-column:0.85; 
        grid-column:span 2;

    }

/* Tablet Viewport: Show tab-desk class, hide mobile class */
    .tab-desk {
        display: block;
    }
    .mobile {
        display: none;
    }

/* Tablet Viewport: Style rule for header content */
    .tab-desk span {
        display: inline;
    }
/* #Tablet Viewport: Style rules for nav area. */
nav li a { 
        display:inline-block;
        color: #ffffff; 
        text-align:center;
        text-decoration: none;
        padding:0.25em 0.5em;
        font-size:.9em;
        margin:flex;
        /* font-family:Verdana, Geneva, Tahoma, sans-serif; */
        font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        border-right:0.1em solid grey;
} 
nav li {
    border-right: .95px solid #310518; 
}

nav li:last-child {
    border-right: none; 
}

nav li {
    padding:0.25em 0.5e;
    }
/*  #Tablet Viewport: Style rule for map. */
ul {
    font-size:.95em;
    margin:0;
    padding:0;
    list-style:none;
    } 
.map {
    width:500px;
    height:450px;
        }
/* 📈 Style rules for table */
    table {
        border:0.5px solid #373684;
        border-collapse: collapse;
        margin: 0 auto;
        width: 100%;
    }
        caption {
        font-size:1em;
        font-weight: bold;
        padding: 1%;
    }
        th, td {
        border: 1px solid #075542;
        padding: 2%;
    }
        th {
        background-color: #0a6338;
        color: #fff;
        font-size: 1em;
        background-color: #b7b7e1;
 }
            
 /* ___________________________ */
 
    aside{
        text-align:center;
        font-size:1em;
        font-weight:bold;
        color:hsla(210, 92%, 57%, 0.927);
        /* text-shadow: 3px 3px 10px #8280cb; */
        }
    figure{     
            position: relative; 
            max-width: 275px;
            margin: 2% auto;      
            border:1px solid #5775eddd; 
            box-shadow:6px 6p 10px; color:#8280cb;
        }
        figcaption{
            position: absolute;
            bottom: 0;
            background: #3d7df2c5;
            color: #fff;
            width: 100%;
            padding: 5% 0;
            text-align: center;
            /* font-family: Verdana, Arial, sans-serif; */
            font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
            'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size:0.85em;
            font-weight: normal;
            }   
    /* .tab-desk,#menu-liks,.mobile-nav{
        display:none;
        }    */
      
    .copyright {                
        float: left;                  
        width: 65%; 
    }
    .social {
        float: right;                
        width: 25%; 
    } 
    }               
/* BRANDNEW GRID CLASS  */
/* @media screen and (min-width: 550px) and (max-width: 768px) { */

/* 🟪DESKTOP VIEWPORT 🟪- #Media Query for Desktop Viewport */
@media screen and (min-width: 769px) {
    .tab-desk {
        display: block;
    }
    nav li a { 
        display:inline-block;
        color: #ffffff; 
        text-align:center;
        text-decoration: none;
        padding:0.25em 0.5em;
        font-size:0.85em;
        margin:flex;
        /* font-family:Verdana, Geneva, Tahoma, sans-serif; */
        font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
        'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        border-right:0.1em solid grey;
} 
    nav li a:hover{
        transform: scale(1.2);
           }
        
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-column-gap:10px; 
    }
    aside {
        grid-column: 1; 
        grid-column: span 4;

    }
    .mobile{
          display:none;
        }      
        /* #Desktop Viewport: Style rule for header. */
        header{
            padding:2%;
        }

        /* #Desktop Viewport: Style rules for nav area. */
        nav li  { 
            padding:.5em 1ch;

        }

        nav li :hover {
            color:#32041b;
            background-color:#e5e9fc;
        }  
        /* /*  MAINCONTENT #Desktop Viewport: Style rules for main content.  */
        #info ul{
            margin-left:5% ;
        }
        main h3 { 
            font-size:1em ;
            } 
        
        #piano, #guitar, #violin {
        width:29%;
        float:left; 
        margin: 0% 2%;
        }
        /* ADDED same treatment as in the tablet viewpirt and in mobile vp */
        aside{
            text-align:center;
            font-size:1em;
            font-weight:bold;
            color: #5775eddd;
            /* text-shadow: 3px 3px 10px #8280cb; */
            }
        figure{     
                position: relative; 
                max-width: 275px;
                margin: 2% auto;      
                border:1px solid  #5775eddd;
                box-shadow:6px 6px 13px;color:#3f4162; 
            }
        figcaption{
                position: absolute;
                bottom: 0;
                background:  #5973ddf0;
                color: #fff;
                width: 100%;
                padding: 5% 0;
                text-align: center;
                /* font-family: Verdana, Arial, sans-serif; */
                font-family: 'Optima','Lucida Sans', 'Lucida Sans Regular', 
                'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                font-size: 1em;
                font-weight: bold;
                }  

        table {
            width: 70%;
            }
        .copyright {                
            float: left;                  
            width: 65%; 
        }
        .social {
            float: right;                
            width: 25%; 
        } 
        /* TESt FOR IMAGE */
        .social img{
            display:inline-block;
            padding:0;
        }

}
      /* MEDIA QUERY FOR PRINT  */
      
    @media print {
        body {
        background-color:#fff;
        color: #000;
              }
          }