.CalendarMaster {
    background: white;
    overflow: hidden;
    border-radius: 20px 20px 5px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    filter: drop-shadow(5px 5px 0 #db4a84);

}

.CalendarNavButtonContainer {
    padding: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
    padding: 0;
}

.CalendarButton {
    width: 50px;
    height: 50px;
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--Primary-Pink);
    border-radius: 10px;
    background-color: var(--Primary-BG);
    scale: 1;
    cursor: pointer;

    transition: all 100ms ease-in-out;
}

.CalendarButton:hover {
    background-color: var(--Primary-Pink);
    scale: 1.2;
}

.CalendarButton:hover .CalendarButtonGFX path {
    fill: var(--Primary-BG);
}

.MonthText {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #FC5C9C;
    font-weight: 400;
    font-family: Fredoka-One;
    font-size: 36px;
    word-wrap: break-word;
    margin: 0;
    line-height: 1;
    padding-top: .1em;
}

.Yeartext {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #FC5C9C;
    margin-bottom: 5px;
    padding-bottom: .25em;
    font-family: Fredoka;
    font-weight: 500;
    font-size: 20px;
    margin: 0;
    line-height: 1;
}

.Weekday {
    width: 110px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* overflow: hidden; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.Daytext {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.DaysRow {
    padding-left: 5px;
    padding-right: 5px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    display: inline-flex;
}

.TalentsFrame {
    width: 110px;
    height: 110px;
    left: 0px;
    top: 0px;
    position: absolute;
    /* overflow: hidden; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    display: inline-flex;
}

.calendar {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* sliding panels */
.calendar-panel {
    align-self: stretch;
    padding-top: 5px;
    padding-bottom: 3px;
    /* background: #D675CF; */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2.5px;
    display: flex;

    inset: 0;
    transition: transform 750ms ease-in-out, opacity 1s ease-in-out;
    /* will-change: transform, opacity; */
}

/* start positions */
.panel-enter-right {
    position: absolute;
    transform: translateX(100%);
    z-index: 2;
}

.panel-enter-left {
    position: absolute;
    transform: translateX(-100%);
    z-index: 2;
}

.panel-exit-left {
    transform: translateX(-100%);
    filter: grayscale(50%);
    opacity: 0;
}

.panel-exit-right {
    transform: translateX(100%);
    filter: grayscale(50%);
    opacity: 0;
}

/* active target */
.panel-active {
    transform: translateX(0);
    opacity: 1;
}

/* sliding panels end */

.DayFrame {
    width: 110px;
    height: 110px;
    left: 0px;
    top: 0px;    
    position: absolute;
    background: #F39FBE;
}

.activeDay {
    background: #F39FBE;
    border: 1px solid rgba(1, 1, 1, 0);
}

.inactiveDay {
    background: #EDCFDA;
}

.invisibleDay {
    background-color: transparent;
}

.birthdayDay {
    background-color: var(--Primary-Pink);
    border: 1px solid black;
    scale: 1;
    z-index: 3;
    /* outline: 10px inset black; */
    /* box-shadow: 0 0 5px var(--Secondary-Pink) inset; */

  --mask: linear-gradient(red, rgba(0, 0, 0, 0.1));

  transition: all 150ms ease-in-out;
  cursor:pointer;
}

.birthdayDay::before {
    position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 background: radial-gradient(var(--Secondary-Pink), transparent) 0 0/5px 5px space;
  -webkit-mask: var(--mask);
  mask: var(--mask);
    content: "";
}

.birthdayDay:hover {
    scale: 1.1;
    z-index: 6;
}



.DateNumberFrame {
    padding: 5px;
    left: 0px;
    top: 0px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}


.DateNumberText {
    align-self: stretch;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.birthdayDay .DateNumberText {
    color: var(--Secondary-Pink);

}

.DateNumberDecor {
    position: absolute;
    visibility: hidden;
         top: -5px;
  pointer-events: none;
  scale: 1;

}

.birthdayDay .DateNumberDecor {
    visibility: visible;
    
}

.birthdayDay:hover .DateNumberDecor {
    /* scale: 1.3; */

    animation: heartScale ease-in-out 500ms alternate infinite;
}



@keyframes heartScale {
    from {
        scale: 1;
        filter: blur(0px) brightness(100%);
    }
    to {
        scale: 1.2;
        filter: blur(1px) brightness(150%);
        
    }
}