.noto-serif-sinhala-900 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: blue;
}

.noto-serif-sinhala-2 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: blue;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

}

.noto-serif-sinhala-1 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: yellow;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.noto-serif-sinhala-3 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: red;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.noto-serif-sinhala-4 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: white;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.noto-serif-sinhala-5 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: orange;


    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.noto-serif-sinhala-6 {
    font-family: "Noto Serif Sinhala", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 75;
    color: yellow;


    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.circle-word {
    
    display: flex;
    /* Arrange letters horizontally */
    flex-wrap: wrap;
    /* Allow wrapping to multiple lines if needed */
    /* Adjust font size as desired */

}

.circle-word span {
    padding: 5px;
    font-size: 2rem;
    display: inline-block;
     Make each letter a block element 
    width: 2rem;
     Adjust width for circle size 
    height: 2rem;
     Adjust height for circle size 
    margin: .2rem;
     Add spacing between circles 
    text-align: center;
     Center text within circle 
    border-radius: 50%;
     Create a circle 
     background-color: #f0f0f0; 
    /*color: black;  */
    line-height: 2rem;
     Match line-height to height for vertical centering 
}
.footertext{
    font-size: 2rem;
    display: inline-block;
    /* Make each letter a block element */
    width: auto;
    /* Adjust width for circle size */
    height: 2rem;
    /* Adjust height for circle size */
    margin: .2rem;
    /* Add spacing between circles */
    text-align: center;
    /* Center text within circle */
    border-radius: 50%;
    /* Create a circle */
    /* background-color: #f0f0f0; */
    /*color: black;  */
    line-height: 2rem;
    /* Match line-height to height for vertical centering */

}

.noto-serif-sinhala-2 {
    animation: rotate 5.5s infinite;
    /* Animation name, duration, loop count */
}

.noto-serif-sinhala-1 {
    animation: rotate 5s infinite;
    /* Animation name, duration, loop count */
}

.noto-serif-sinhala-3 {
    animation: rotate 4.5s infinite;
    /* Animation name, duration, loop count */
}

.noto-serif-sinhala-4 {
    animation: rotate 4s infinite;
    /* Animation name, duration, loop count */
}

.noto-serif-sinhala-5 {
    animation: rotate 3.5s infinite;
    /* Animation name, duration, loop count */
}

.noto-serif-sinhala-6 {
    animation: rotate 3s infinite;
    /* Animation name, duration, loop count */
}

/*.a{*/
/*    display: flex;*/
/*    align-items: flex-start; */
/*    flex-direction: column;*/
/*}*/


@keyframes rotate {
    0% {
        transform: rotate(0deg) rotatey(0deg) scale(0.8);
    }

    25% {
        transform: rotate(3deg) rotatey(5deg) scale(1);
    }

    50% {
        transform: rotate(0deg) rotatey(0deg) scale(1.2);
    }

    75% {
        transform: rotate(-3deg) rotatey(-5deg) scale(1);
    }

    100% {
        transform: rotate(0deg) rotatey(0deg) scale(0.8);
    }

}