body{
    background-color:#dddddd;
}
.index-page{
    font-family: Arial, Helvetica, sans-serif; 
    height: auto ;
}        
.index-header{
    display: flex ;
    width: 100% ;
    height: 100px ; ;
}
.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 ;
    margin: 2%  ;
    border-radius: 1% ;
    padding: 5% ;
}


.composition-container{
    display: block;
    gap: 5px; /* Adjust gap size as needed */
    margin: 1% ;
}


.composition-container>.composition-intro{

    border: 1px solid black;
    border-radius: 10px ;
   
    }


.composition-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
}
      
.composition-headline {
        margin: 20px ; /* Optional: Add margin below the headline */
        
}
      
.composition-head-table {
        width: 80% ; 

}
      
.composition-head-table table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 10% ;
        
      }
      
.composition-head-table th, 
.composition-head-table td {
        text-align: left;
        border-bottom: 2px solid #ddd; /* Optional: Add border-bottom for each row */
      }

.compostion-headline{
    justify-content : center;
    align-items: center;
}

.colon{
    width: 10% ;

}

  
.composition-container>.composition-telugu{

    border: 1px solid black;
    padding: 5% 20% 5% 20% ;
    border-radius: 10px ;
    margin-top: 20px ;
    
}


.heading-pallavi, .heading-charanam{
    text-align: left;
    margin: 10px ;
    font-size: larger;
    font-weight: bold;

}
  


.compostion-text{
    font-size: 1.2rem ;
    font-family:nVerdana, Geneva, Tahoma, sans-serif
}

  
.composition-learning {

    margin: 0% ; 
    height: auto ;
    text-align: left;
        
}

#speed1{
    width: 100%;
    border-collapse: collapse; 
    margin-bottom: 20% ;
      
}    

#speed1 th,
#speed1 td {
        border: 1px solid #17c9433d;
        width: auto ;
        font-weight: bolder;
        padding: 2px ;
    }
      
.speed1 img {
        height: 2rem;
      }
  
.swara-row{
        color:black ;
        
      }
  
.sahithya-row{
        color: rgb(29, 141, 130) ;
        
      }
    
.laghu1{
          background-color: #64ed69;
        }
    
.laghu2{
          background-color: #64ed6990;
        }
    
.laghu3{
          background-color: #64ed6950;
        }
    
.laghu4{
          background-color: #64ed6920;
        }
    
.drutha1_1{
          background-color: #FFCF96;
        }
    
.drutha1_2{
          background-color: #FFCF9680;
        }
    
.drutha2_1{
          background-color: #CDF5FD;
        }
.drutha2_2{
          background-color: #CDF5FD70;
        }

.footer-nav{
    background-color: rgb(230, 234, 237) ;
    height: 3rem ;
    display: flex ;
    justify-content: center; 
    align-items: center ;

}

.footer-home a{
    text-decoration: none;
    color:darkgreen;
    font-weight: bolder; 
}

.footer-home a:hover{
    color:fuchsia ;
}



.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  ;
    }  

    .index-body{
        font-size: 80% ;
    }

    .index-body ul{
        margin-left: 0% ;
    }
    
    

}