.frame-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* .abc-notation-container {
    padding: 10px;
    font-size: 12px;
    overflow-x: auto;
} */

.google-calendar-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (adjust as needed) */
}

.google-calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.my-background {
    background-image: url('../images/notes.png'); /* Replace with your image path */
    background-size: 10%; /* Adjusts the image to cover the entire div */
    background-position: center; /* Centers the image within the div */
    background-repeat: repeat; /* Prevents the image from repeating */
}