body{
            background-color:#dddddd;
        }
        .index-page{
            font-family: Arial, Helvetica, sans-serif; 
        }        
        .index-header{
            display: flex ;
            width: 100% ;
            height: 100px ; 
            margin: 0 ;
        }
        .header-logo{
            flex: 1 ;
        }
        .header-logo img{

            height:  100% ;
        }
        .header-headline{
            background-color: black ;
            color: white ;
            flex: 9 ; 
            display: flex ;
            justify-content: center;
            align-items: center;
        }
        .header-headline h1{
            text-align: center ;
            
        }
        .index-body{
            height: auto ;
            background-color: whitesmoke ;
            border-radius: 1% ;
            padding: 2% ;
            margin: 0 ;
        }




        .saraliswaras-header{ 

            padding-bottom: 10px ;
            text-align: center ;
            font-size: 80% ;  
            font-weight: bold ;          
        }

        .sarali-head{
            margin-top: 1%  ;
        }

        .saraliswaras-nav{
            border-top: 2px solid black ;
            border-bottom: 1px solid black ;
            padding: 0.5% ;
            display: flex ;
            justify-content: space-around;
            margin-bottom: 2% ;
            font-weight: bold ;

        }

        .saraliswaras-nav a{
            text-decoration: none ;
            font-size: large;
            color:dodgerblue

        }

        .saraliswaras-nav a:hover{

            font-size: x-large ;
            color:rgb(16, 72, 128)

        }

  
       


        .saraliswaras-container {
            max-width: 960px;
            margin: 0 auto;
        }     

        .speed-row {
            display: flex;
            justify-content: space-between;
        }

        .speed-col {
            flex: 1;
            text-align: center;
        }

        .speed-col a {
            text-decoration: none;
            color: #34269f;
            padding: 2px;
            display: block;

        }

        .speed-col a:hover{
            color: rgb(154, 21, 21) ;
            font-size: 120%; 
        }

        .display-frame {
            display: flex;
            overflow:hidden ;
        }

        iframe {
            width: 100%;
            height: 200vh;
            border: none;
            display: none ;
            
        }

        iframe.active {
            display: block;
        }

        


        .footer-nav{
            background-color: rgb(230, 234, 237) ;
            height: 3rem ;
            display: flex ;
            justify-content: space-evenly; 
            align-items: center ;
        
        }
        
        .footer-home a,
        .footer-music-theory a{
            text-decoration: none;
            color:darkgreen;
            font-weight: bolder; 
        }
        
        .footer-home a:hover,
        .footer-music-theory a:hover{
            color:fuchsia ;
            font-size: 120% ;
        }


        .index-footer{
            height: 100px ;
            width: 100% ;
            background: linear-gradient(rgb(121, 19, 19),black );
            color: white ;
            font-size: larger;
            padding: 1% ;
        }
        




        @media screen and (max-width: 600px) {

            .header-headline h1{

                font-size: larger;
            }

            .index-header{
                height: 3rem  ;
            }  

            iframe{
                height: 100vh ;
            }

            


            

        }