body:has(.popup) > main, body:has(.popup) > header {
    filter: blur(10px);
    backdrop-filter: blur(10px);
}

body > :not(.popup) {
    transition: filter 100ms ease-out;
}

.popup {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,0.5);
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup .card {
    display: flex;
    flex-direction: column;
    position: relative;
    scale: 1.1;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 2px;
    box-sizing: content-box;
    transition: scale 110ms ease-out;
    will-change: scale;
}

.close-btn:hover {
    scale: 1.1;
}

.popup.newAchievements .card {
    width: min-content;
}

.popup .card > h1 {
    text-align: center;
    white-space: nowrap;
}

.popup.newAchievements h1 {
    padding: 0 2em;
}

.popup-dismiss {
    position: absolute;
    height: 100vh;
    width: 100vw;
    cursor: default;
}

@media (max-width: 1015px) {
    .popup .card {
        display: flex;
        flex-direction: column;
        position: relative;
        scale: 0.9;
    }
    .popup.newAchievements h1 {
        padding: unset;
        padding-right: 1.4em;
    }
    .close-btn {
        top: 43px;
  right: 35px;
  scale: 2;
    }
}