@keyframes popup-appear {
    0%{
        transform: scale(80%);
    }
    100%{
        transform: scale(100%);
    }
}

.popup-bg{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	z-index:3;
    display:flex;
}

.popup-box{
	margin:auto;
	background-color:var(--secondary-bg);
	width:min(400px,80%);
	border-radius:0.5em;
	overflow:hidden;
    animation: 0.2s popup-appear;
    animation-timing-function: cubic-bezier(0.095, 0.515, 0.325, 1.510);;
    transform-origin: 50% 50%;
}

.popup-box.wide{
    width: min(35em,80%);
}

.popup-text h2{
    margin:0;
    font:inherit;
    color:inherit;
}

.popup-text a{
    color:var(--subtle-font)
}

:where(.popup-text span){
    color:var(--subtle-font);
    font-size: 0.95em;
}

.popup-text{
	padding:1em;
	position:relative;
}

.popup-button-area{
	position:relative;
	padding:0.5em;
	background-color:var(--primary-bg);
	height:max-content;
	text-align:right;
}

.popup-buttons{
	all:unset;
	padding:0.5em 1em;
	border-radius:0.5em;
	cursor:pointer;
}

.popup-buttons *{
	color: inherit;
	text-decoration: inherit;
}

.popup-buttons.filled{
    background-color: var(--accent-clr);
}

.popup-bg.hidden{
    display:none
}