.popup {
    --_theme-color: var(--clr-text);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.3s ease, visibility 0.3s ease;
}

.popup-content {
    /* color: white; */
    background-color: color-mix(in srgb, var(--clr-background-2) 100%, transparent 0%); 
    /* backdrop-filter: blur(10px); */
    padding: var(--padding-xxl);
    padding-inline: 6rem;
    border-radius: var(--radius-xxxl);
    border: 10px solid var(--clr-background);
    position: relative;
    width: 90%;
    max-width: 1600px;
    max-height: 90%;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    scale: 0;
    /* transform: translateY(-100%); */
    /* transition: scale 0.3s ease-in-out, transform .3s ease-in-out; */
    overflow-y: scroll;
    box-shadow: inset 0px -26px 24px -20px rgba(70, 70, 70, 1);

}

.popup-container {
    height: auto;
}

.popup-content .close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: var(--font-xxl);
    cursor: pointer;
    color: white;
}

.popup.visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
    visibility: visible;
    transition: visibility 0.3s ease, background-color .3s ease,  opacity .3s ease;
}

.popup.visible .popup-content {
    border-radius: 50px;
    scale: 1;
    /* transform: translateY(0); */
    animation: scale-bounce .5s ease forwards;
}

.popup-title {
    font-size: var(--header-xxl) !important;
    color: var(--_theme-color);
    /* color: transparent; */
    /* background: linear-gradient( 160deg,
        color-mix(in srgb, var(--_theme-color) 50%, var(--clr-background)) 10%,
        var(--_theme-color) 80%);
    background-attachment: fixed;
    background-clip: text;
    -webkit-text-fill-color: transparent; */

    width: fit-content;
    margin-inline: auto;
}

.popup ul {
    font-size: var(--font-xl);
    /* list-style-type: disc !important; */
    overflow: visible;
    margin-left: var(--margin-xl);
}

.popup ul li {
    position: relative;
    margin-block: var(--margin-m);
    line-height: 1.1;
    width: 100%;
}

.popup ul li::before {
    content: '';
    position: absolute;
    inset: calc(50% - .5rem);
    /* top: 50%; */
    left: -30px;
    width: .7rem;
    height: .7rem;
    border-radius: 100%;
    background-color: color-mix(in srgb, black 50%, var(--_theme-color));
}

.popup h3 {
    font-size: var(--header-xxl);
    padding-bottom: var(--padding-xxl);
    text-align: center;
}

.popup p {
    font-size: var(--header-s);
    line-height: 1.2;
    margin-bottom: var(--margin-m);
}

#popup-scroll-to-bottom {
    position: absolute;
    bottom: 7rem;
    right: 10rem;
    width: 5rem;
    height: 5rem;
    background-color: var(--clr-background);
    border-radius: 50%;
    border: .4rem solid var(--_theme-color);
    /* opacity: 0; */
    /* visibility: hidden; */
    z-index: 1000;
}

#popup-scroll-to-bottom i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 4rem;
    color: var(--_theme-color);
    transform: translate(-50%, -50%) rotate(180deg);
}

@keyframes scale-bounce {
	0% {
		/* scale:0; */
        opacity: 0;
        filter: blur(20px);
	}

    20% {
        filter: blur(10px);
    }
	100% {
        opacity: 1;
		scale: 1;
        filter: blur(0px);
	}
}

@media  (max-width: 1000px) {
    .popup-content {
        padding-inline: 2rem;
    }
}