.bodydev {
    display: flex;
    flex-direction: column;           /* Arrange children elements in a column */
    justify-content: center;          /* Center the content vertically */
    align-items: center;              /* Center the content horizontally */
    /* width: auto; */                /* Uncomment to automatically adjust width based on content */
    /* height: 100vh; */              /* Uncomment to set the height to 100% of the viewport height */
    margin: 0;                        /* Remove default margin */
    /* background: linear-gradient(135deg, #1f1c2c, #928dab); */ /* Uncomment to add a gradient background */
    font-family: 'Arial', sans-serif; /* Set the font family to Arial */
}

.score-container {
    /* background-color: rgba(255, 255, 255, 0.1); */ /* Uncomment to add a semi-transparent background */
    border-radius: 2.5px;            /* Round the corners slightly */
    padding: 5px;                    /* Add some padding inside the container */
    box-shadow: 0 1px 3.5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for a 3D effect */
}

.score {
    font-size: 1px;                 /* Set the size of the score text */
    color: yellow;                   /* Set the initial color of the score text */
    letter-spacing: 0.1em;           /* Add some spacing between the letters */
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); /* Add a shadow to the text for depth */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth transition on transform and color change */
}

.score-container:hover .score {
    transform: scale(1.1);           /* Slightly enlarge the score on hover */
    color: #ffde00;                  /* Change the score color to a brighter yellow on hover */
}