.pack {
    cursor: pointer;
    transition-duration: 250ms;
    position: relative;
    .cost {
        --radius: 10px;
        position: absolute;
        left:0;
        bottom:.5rem;
        padding: .25rem .5rem;
        background-color: var(--background);
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }
    /* canvas {
        background-color: red;
    } */
}
.pack:hover {
    background-color: rgba(var(--container-rgb), .1);
}
#packex {
    display: none;
}
#pack_container {
    display: flex;
    padding-right: 30px;
    gap: 10px;
    align-items: center;
    background-color: var(--container);
}
#unlockScreen {
    background-color: rgb(180, 180, 180);
    width: 100vw;
    height: 100vh;
    position:absolute;
    left:0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 13;
    user-select: none;
}
#unlockScreen[hide] {
    display:none;
}
#unlockcenter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 13;
}
#unlockcenter[hide] {
    display:none;
}
#unlockcenter[shake] {
    animation-name: shake;
    animation-duration: 250ms;
    animation-iteration-count: infinite;
}
#unlockcenter[leaveframe] {
    animation-name: leaveFrame_pack;
    animation-duration: 500ms;
}
#unlockedblue {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 12;
}
@keyframes shake {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(5px)
    }

    50% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}
@keyframes leaveFrame_pack {
    from {
        transform: translate(0px, 0px);
    }
    to {
        opacity: 0;
        transform: translateY(750px);
        scale: .5;
    }
}
#shop_top {
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #0000001f; */
}
#allPacks{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
}
#specialex {
    display:none;
}
#allSpecials{ 
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#unlockSpecial {
    background-color: rgb(180, 180, 180);
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 13;
    user-select: none;
}
#unlockSpecial[hide] {
    display: none;
}
#unlockedimg {
    z-index: 12;
}
/* #specialUnlock {
    transition-duration: 250ms;
} */
#unlockedText{
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);

    transition-duration: 500ms;
    animation-timing-function: ease-in-out;
    font-size: 48px;
    font-weight: bold;
    z-index: 10;
}
#unlockedText[hide] {
    top: 50%;
    font-size: 1px;
}
@keyframes specialUnlock {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}
@keyframes unlocked {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
    100% {
        scale: 1;
    }
}
#tabs{
    display: flex;
    gap:10px;
}
#tabs > * {
    flex:1;
    font-size: 1.25rem;
}
.section:not([show]) {
    display: none;
}
.bottoms {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;

}
.tops {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;

}
.btn_notification{
    --font-size: 18px;
    position: absolute;
    right: calc(0px - (var(--font-size)/2));
    top:calc(0px - (var(--font-size)/2));
    width: calc(var(--font-size) + 10px);
    height: calc(var(--font-size) + 10px);
    background-color: var(--accent);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50px;
    font-size: var(--font-size);
    z-index: 9;
}
.btn_notification[show] {
    display: flex;
}
.suggestblues{
    display: flex;
    gap:10px;
    align-items: center;
}
#packbluessuggestex {
    display:none;
}
#bluesuggestions {
    display: flex;
    flex-direction: column;
    gap:5px;
}
#newUnlockScreen {
    background-color: rgb(180, 180, 180);
    width: 100vw;
    height: 100dvh;
    position:absolute;
    left:0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 13;
    user-select: none;
}
#newUnlockBackground {
    width: 100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
    opacity: .5;
}
#newUnlockScreen > canvas {
    z-index: 14;
}
#newUnlockScreen[hide] {
    display:none;
}
.unlockcenter {
    display: flex;
    align-items: center;
    gap:5px;
    scale:1.25;

    position: absolute;
    transform: translateY(0);
    opacity: 1;
    transition-duration: 1s;
}
.unlockcenter[hide] {
    opacity: 0;
}
.unlockcenter[offscreen] {
    bottom: 5%;
    transform: translateY(100px);
}
.unlockcenter > div {
    display: flex;
    flex-direction: column;
    gap:5px;
}
@media screen and (max-width:900px) {
    #tabs {
        flex-direction: column;
        > * {
            font-size: 1rem;
        }
    }
}