yawn-popup {
    background:var(--colorF);
    z-index:2;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow:auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

yawn-popup .show { display: block; }
yawn-popup .hide { display: none; }
.hide { display: none; }

yawn-popup.fade-in {
    opacity: 0;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    transform: translateY(5%);
}
yawn-popup.fade-in.hide {
    display: none;
}
yawn-popup.fade-in.show {
    opacity: 1;
    transform: translateY(0%);
}
yawn-popup.fade-out {
    opacity: 0;
    transform: translateY(5%);
    transition: opacity 0.3s, transform 0.3s;
}