@font-face {
    font-family: 'Minecraft';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.cdnfonts.com/s/25041/1_MinecraftRegular1.woff') format('woff');
}

@font-face {
    font-family: 'Minecraft';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.cdnfonts.com/s/36662/MinecraftTen-VGORe.woff') format('woff');
}


body {
    font-family: "Minecraft", Lato, sans-serif !important;
    font-size: 1.1rem;
}

p {
    font-size: 1.1rem;
}

h1 {
    font-weight: 900;
    font-size: 2rem;
}

.banner {
    display: flex;
    width: 15rem;
    height: auto;
    justify-content: center;
    padding: 0.25rem 1rem;
    position: absolute;
    
    left: 50px;
    top: 50px;
    box-sizing: border-box;
    transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
    background: #F85C5C;
    box-shadow: 0px 2px #d93838;
}

.banner .content {
    font-size: 1.4rem;
    text-align: center;
    word-wrap: normal;
    word-spacing: 1000px;
    text-shadow: #2d2d2d 2px 2px;
}

.card.coming-soon {
    background: #585858;
    background: linear-gradient(49deg, rgba(142,142,142,1) 50%, rgba(45,45,45,1) 100%);
    border-bottom: 5px solid #2d2d2d;
    text-shadow: #2d2d2d 2px 2px;
}

.card.coming-soon > .bg-container > .bg {
    filter: grayscale(100%);
}

.card.coming-soon > .img-container > .image > img {
    filter: grayscale(100%);
}

.site-header {
    padding: 2rem;
    /*background-color: var(--color-brighter-bg);*/
}

.site-title {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.site-title p {
    font-weight: 100;
}

.site-title svg {
    width: 2rem;
}

.site-title>.left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: start;
    width: 200px;
}

.site-title>.left * {
    margin: 0;
}

.site-title>.right {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 1rem;
    text-align: end;
    width: 200px;
}

.site-title>.right * {
    margin: 0;
}

.site-title .sub {
    color: gray;
    font-size: 0.85rem;
}

.site-title img {
    /*min-width: 20rem;*/
    max-width: 100%;
    /*position: absolute;*/
}

.site-title .logo {
    transition: all 0.1s ease-in-out;
}

.site-title .logo:hover {
    transform: translateY(-5px) scale(1.05);
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cards-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: stretch;
}

.cards-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    align-items: stretch;
}

.products-list.events {
    display: grid;
    gap: 1rem;
    flex: 1;
    grid-template-columns: repeat(2, 1fr);
}

@media (width <= 960px) {
    .cards-row {
      flex-direction: column;
    }
  
  
    .products-list.events {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.widget.card {
    overflow: hidden;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    min-height: 15rem;
    box-sizing: border-box;
}

.widget.card.large {
    min-height: 30rem;
}

.widget.card.medium {
    min-height: 20rem;
}

.widget.card.small {
    min-height: 10rem;
}

.widget.card.large h1 {
    font-size: 3rem;
}

.widget.card .info {
    min-width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.5rem;
    transition: all 0.1s ease-in-out;
    z-index: 2;
}

.widget.card>div.img-container {
    flex: 1;
    position: relative;
}

.widget.card>div.img-container>div.image {
    position: absolute;
    right: 0;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.widget.card>.bg-container {
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 1px;
    top: 1px;
    overflow: hidden;
    border-radius: 5px;
}

.widget.card>.bg-container>img.bg {
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    object-position: center;
    
    transition: all 0.05s ease-in-out;
    
    z-index: 0;
    mix-blend-mode: soft-light;
    opacity: 0.4;
      /*-webkit-mask:radial-gradient(circle at 50% 50%, #fff, transparent 70%);*/
      /*        mask:radial-gradient(circle at 50% 50%, #fff, transparent 70%);*/
}

.widget.card>div.img-container>div.image>img.hero {
    object-fit: cover;
    height: 105%;
    transition: all 0.1s ease-in-out;
    z-index: 1;

    will-change: transform;
    backface-visibility: visible;
}

.widget.card>div.img-container>div.image>div.shadow {
    position: absolute;
    bottom: 2px;
    background: radial-gradient(circle,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 100%;
    height: 8px;
    width: 100%;
    transition: all 0.2s ease-in-out;

    will-change: transform, opacity;
    backface-visibility: visible;
}

.widget.card:not(.no-hover):hover .bg-container>img.bg {
    transform: scale(1.05) rotateZ(2deg);
    opacity: 0.5;
    transition: all 0.075s ease-in-out
}

.widget.card:not(.no-hover):hover div.image>img.hero {
    will-change: transform;
    backface-visibility: visible;
    transform: translateY(-10px) scale(1.05);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.widget.card:not(.no-hover):hover div.image>div.shadow {
    will-change: transform, opacity;
    backface-visibility: visible;
    transform: translateY(1px);
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.widget.card:not(.no-hover):hover>.info {
    transform: translateX(4px) rotateZ(-1deg);
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 2.55);
}

.widget.gray {
    background: #0F0F0F;
    border-bottom: 5px solid #b54b00;
    text-shadow: #0F0F0F 2px 2px;
}

.widget.orange {
    background: #FF8C32;
    background: linear-gradient(49deg, rgba(255, 140, 50, 1) 0%, rgba(210, 85, 0, 1) 100%);
    border-bottom: 5px solid #b54b00;
    text-shadow: #b54b00 2px 2px;
}

.widget.yellow {
    background: #F6CB11;
    background: linear-gradient(49deg, rgba(246, 203, 17, 1) 0%, rgba(203, 141, 5, 1) 100%);
    border-bottom: 5px solid #c49a0b;
    text-shadow: #c49a0b 2px 2px;
}

.widget.green {
    background: #46DB7C;
    background: linear-gradient(49deg, rgba(70, 219, 124, 1) 0%, rgba(20, 164, 73, 1) 100%);
    border-bottom: 5px solid #27a95b;
    text-shadow: #27a95b 2px 2px;
}

.widget.blue {
    background: #5CA2F8;
    background: linear-gradient(49deg, rgba(92, 162, 248, 1) 0%, rgba(38, 100, 234, 1) 100%);
    border-bottom: 5px solid #3878d9;
    text-shadow: #3878d9 2px 2px;
}

.widget.red {
    background: #F85C5C;
    background: linear-gradient(49deg, rgba(248, 92, 92, 1) 0%, rgba(234, 38, 38, 1) 100%);
    border-bottom: 5px solid #d93838;
    text-shadow: #d93838 2px 2px;
}

.widget.discord {
    background: #5562ea;
    background: linear-gradient(49deg, #5562ea 0%, #333eab 100%);
    border-bottom: 5px solid #333eab;
    text-shadow: #333eab 2px 2px;
}

.widget.ip {
    background: #f04ddc;
    background: linear-gradient(49deg, #f04ddc 0%, #8c238a 100%);
    border-bottom: 5px solid #8c238a;
    text-shadow: #8c238a 2px 2px;
}

.site-footer-inner {
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;
}

.site-footer-inner img.store-logo {
    height: 4rem;
    filter: grayscale(1);
}

.widget.return {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.widget.return .right {
    display: flex;
    align-items: center;
}

.widget.return .right .user-actions {
    display: flex;
    gap: 1rem;
}


@media (width <= 960px) {
  .widget.return .right .user-actions button.open-basket {
      display: none;
  }
  
  .widget.return .right .user-actions a.btn-glyph-text {
      font-size: 1rem !important;
      color: var(--btn-color-text) !important;
  }
  
  .package-section > .package-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
    flex: 1;
  }
}

.widget.return a:not(.user-name) {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget.return a div {
    line-height: 1rem;
    transition: all 0.1s ease-in-out;
}

.widget.return a span.home-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    font-size: 1.5rem;
    border-radius: 4px;
    width: 3rem;
    height: 3rem;
    transition: all 0.1s ease-in-out;
}

.widget.return a:hover span.home-button {
    background: var(--color-primary);
    transition: all 0.1s ease-in-out;
}

.widget.return a:hover div {
    color: var(--color-primary);
    transition: all 0.1s ease-in-out;
}
.category-description h1 {
    margin-bottom: 0 !important;
}
.category-description {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.store-product>.product-title>a {
    font-size: 2rem;
}

.hover-bg {
    padding: 0.5rem;
    border-radius: 0.2rem;
    max-width: 10rem;
}

.hover-bg:hover {
    background-color: var(--color-brighter-bg);
}

.package-section {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 5px;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--color-brighter-bg);
}

.package-section > h2 {
    font-size: x-large;
}

.package-section > .package-list {
    display: grid;
    gap: 1rem;
    flex: 1;
    grid-template-columns: repeat(5, 1fr);
    /*grid-column-gap: 10px;*/
    /*grid-row-gap: 10px;*/
}

.package-section.limited span {
    color: gray;
}

.store-product.mini {
    background-color: var(--color-bg);
    border-radius: 5px;
    position: relative;
}

.store-product.mini .price strong {
    font-size: 1rem;
}

.store-product.mini .product-title > a {
    font-size: 1rem !important;
}

.store-product.mini .image {

}

.sections-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.effect-type-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--color-brighter-bg);
    box-sizing: border-box;
    border-radius: 0.5rem;
}

.effect-rarity {
    position: absolute;
    bottom: 0.5rem;
    left: 1rem;
    padding: 0.2rem 0.5rem;
}

@keyframes PackJiggle {
    0% {
        transform: rotateZ(1deg);
    }
    10% {
        transform: rotateZ(-1deg);
    }
    20% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

.pack {
    animation: PackJiggle 3s ease-in-out infinite;
    box-shadow: 0 0 15px #FB4BAE;
    flex: 2 !important;
    width: 20rem;
    /*background: linear-gradient(45deg, rgba(102, 252, 241, 0.5) 0%, rgba(102, 252, 241, 0) 150%) !important;*/
}

.pack.limited {
    background: linear-gradient(45deg, #FB4BAE7F 0%, #FB4BAE00 100%) !important;
}

@keyframes CelestialPulsating {
    0% { box-shadow: 0 0 0 #66FCF1; }
    100% { box-shadow: 0 0 5px #66FCF1; }
}

.celestial {
    /*animation: CelestialPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 10px #66FCF1;
    /*background: linear-gradient(45deg, rgba(102, 252, 241, 0.5) 0%, rgba(102, 252, 241, 0) 150%) !important;*/
}

.celestial.limited {
    background: linear-gradient(45deg, rgba(102, 252, 241, 0.5) 0%, rgba(102, 252, 241, 0) 150%) !important;
}

@keyframes AncientPulsating {
    0% { box-shadow: 0 0 0.0 #FF3131; }
    100% { box-shadow: 0 0 2px #FF3131; }
}

.ancient {
    /*animation: AncientPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 5px #FF3131;
    /*background: linear-gradient(45deg, #FF31317F 0%, #FF313100 150%) !important;*/
}

.ancient.limited {
    background: linear-gradient(45deg, #FF31317F 0%, #FF313100 150%) !important;
}

@keyframes MythicPulsating {
    0% { box-shadow: 0 0 0.1rem #BF00FFDA; }
    100% { box-shadow: 0 0 0.8rem #BF00FFCC; }
}

.mythic {
    /*animation: MythicPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 0.5rem #BF00FFDA;
    /*background: linear-gradient(45deg, #BF00FF7F 0%, #BF00FF00 150%) !important;*/
}

.mythic.limited {
    background: linear-gradient(45deg, #BF00FF7F 0%, #BF00FF00 150%) !important;
}

@keyframes LegendaryPulsating {
    0% { box-shadow: 0 0 0.1rem #FFB731DA; }
    100% { box-shadow: 0 0 0.8rem #FFB731CC; }
}

.legendary {
    /*animation: LegendaryPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 0.5rem #FFB731DA;
    /*background: linear-gradient(45deg, #FFB7317F 0%, #FFB73100 100%) !important;*/
}

.legendary.limited {
    background: linear-gradient(45deg, #FFB7317F 0%, #FFB73100 100%) !important;
}

@keyframes EpicPulsating {
    0% { box-shadow: 0 0 0.1rem #C03CFFDA; }
    100% { box-shadow: 0 0 0.8rem #C03CFFCC; }
}

.epic {
    /*animation: EpicPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 0.5rem #C03CFFDA;
    /*background: linear-gradient(45deg, #C03CFF7F 0%, #C03CFF00 100%) !important;*/
}

.rare {
    /*animation: EpicPulsating 1s ease-in-out infinite alternate forwards;*/
    box-shadow: 0 0 0.5rem #339DFFDA;
    /*background: linear-gradient(45deg, #339DFF2F 0%, #339DFF00 100%) !important;*/
}