@font-face {
    font-family: 'Segoe';
    src: url('fonts/SegoeUI-Light.woff2') format('woff2'),
        url('fonts/SegoeUI-Light.woff') format('woff');
    font-weight: 300;font-style: normal;
}
@font-face {
    font-family: 'Segoe';
    src: url('fonts/SegoeUI-Semilight.woff2') format('woff2'),
        url('fonts/SegoeUI-Semilight.woff') format('woff');
    font-weight: normal;font-style: normal;
}
@font-face {
    font-family: 'Segoe';
    src: url('fonts/SegoeUI-Bold.woff2') format('woff2'),
        url('fonts/SegoeUI-Bold.woff') format('woff');
    font-weight: bold;font-style: normal;
}

@font-face {
    font-family: 'Minecraft Ten';
    src: url('fonts/MinecraftFiftySolid.woff2') format('woff2'),
        url('fonts/MinecraftFiftySolid.woff') format('woff');
    font-weight: normal;font-style: normal;font-display: swap;
}

:root {
	--c-white: #DFE3E9;
    --c-bg: #191e24 !important;
    --c-gray: #333B46 !important;
	--c-blue: #4C83E2;
    --c-dgray: #272d36;

    --s8-bg: rgba(25, 30, 36, 0.8);

	--s3-blue: rgba(76, 131, 226, 0.3);
	--s5-blue: rgba(76, 131, 226, 0.5);

	--m-shad: -3px 3px var(--c-dgray);
	--p-shad: -2px 2px var(--c-dgray);

	--c-switch: #DFE3E9;
	--c-switch2: #191e24;
}


::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: var(--c-switch2);}
::-webkit-scrollbar-thumb {background: var(--c-blue);border-radius: 0.35vw;}

::selection  {background-color: var(--c-blue);color: var(--c-white);}
.cant-select {cursor:not-allowed !important;pointer-events: auto !important;}
.cant-select * {cursor:not-allowed !important;pointer-events: auto !important;}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

body, html {
    width: 100%;height: 100%;margin: 0;padding: 0;
    color: var(--c-white);font-weight: normal;
    font-family: Segoe;background-color: var(--c-bg);
    overscroll-behavior-x: none;
}
body {overflow-x: hidden !important;}
.no-scroll {
    overflow: hidden;
}
a {color: var(--c-blue);text-decoration: underline;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}

.phone-switch, .phone-copyright {display:none !important;position:relative;}

*:not(.stp-no) {position: relative;}
h1, h2, h3, h4, h5, h6 {font-weight: norma;display:block;position:relative;margin: 0;padding: 0;}
.f-mc {font-family: Minecraft Ten;font-weight: normal !important;}
.f-se {font-family: Segoe;}
.bold {font-weight: bold;}
.center {Text-align: center;}
.extra-large {font-size: 2.25vw;line-height: 1.25;font-weight: normal;}
h1 {font-size: 35px;line-height: 1;font-weight: normal;}
h2 {font-size: 24px;line-height: 1;font-weight: normal;}
h3 {font-size: 20px;line-height: 1;font-weight: normal;}
h4 {font-size: 18px;line-height: 1;font-weight: normal;}
h5 {font-size: 16px;line-height: 1;font-weight: normal;}
h6 {font-size: 14px;line-height: 1;font-weight: 300;}
.shadow {text-shadow: 2px 2px black;}
.white {color: var(--c-white);}
.blue {color: var(--c-blue);}
.dark {color: var(--c-dgray);}
.bg {color: var(--c-bg);}
.red {color: #D23F3F;}
.switch {color: var(--c-switch);}
.switch2 {color: var(--c-switch2);}
.gray {color: gray;}
.h-pad {padding: 1vw 0;}

.increase-line {line-height: 1.4;}
.large-line {line-height: 1.6;}
.pointer {cursor: pointer;}


@keyframes fadeAnn {
    0%{opacity:1;display:block;}
    99% {opacity: 0;display:block;}
    100% {opacity: 0;display:none;}
}
.fade-out-ann {
    animation: fadeAnn 0.2s ease-in-out 4s forwards;
}
.annotation {
    position: fixed;bottom:0%;left: 0%;width: 90%;padding: 1.5vh 5%;
    text-align: center;z-index: 998;display: none;transition: bottom 0.2s ease-in-out;
}
.blue-a {background-color: var(--c-blue);display: block;}
.green-a {background-color: #83e751;display: block;}
.yellow-a {background-color: #DBAD6A;display: block;}
.red-a {background-color: #e75151;display: block;}
.annotation-img, .annotation-text {position:relative;display: inline-block;vertical-align: middle;}
.annotation-img {margin-right: 2vh;width: 3vh;}.annotation-text {max-width: calc(100% - 5vh);color: white;}
.close-annotation {position:absolute;right: 2vh;top: 50%;height: 3vh;transform: translateY(-50%);cursor: pointer;}
.annotation a {color: var(--c-white);text-decoration: underline;}

iframe {position:relative;border:none;outline:none;background-color: transparent;}

.load {
	position: fixed;top:0;left:0;width:100%;height:100%;
	z-index: 999;color: var(--c-white);
	background-color: var(--c-blue);text-align: center;
	background: linear-gradient(to bottom right, #81C3FF, #7D85FF);
}

@keyframes logospin {
    from {transform: rotateY(0deg)}
    to {transform: rotateY(360deg)}
}
.load img {
    height: 8vh;margin-top: 46vh;
    animation: logospin 2s ease-in-out 0.2s infinite;
}

.cookies-msg {
    position:fixed;bottom: 0;left: 0%;width:95%;padding: 1.5vh 2.5%;background-color: var(--c-blue);display: none;
    z-index: 900;text-align: center;
}
.cookies-msg img {height: 4vh;}
.cookies-msg .close-cookie {height: 3vh;margin-left: 2vw;cursor: pointer;}

.pc-menu {
	position:fixed;top:0;left:0;width:90%;z-index: 996;border: none;outline: none;margin: 0;
    padding: 5vh 5%;transition: all 0.2s ease-in-out;
}
.logo-left, .links-right {display: inline-block;position:relative;vertical-align: middle;}

.logo-left img {height: 4vh;display: inline-block;vertical-align: middle;}
.logo-left .logo-text {display: inline-block;vertical-align: middle;margin-left: 1vh;color: var(--c-switch);text-decoration: none;}
.logo-left {
	width: 30%;text-align: left;font-family: 'Minecraft Ten';
	color: var(--c-dgray);font-size: 4vh;transition: all 0.2s ease-in-out;
}
.links-right {text-align: right;width: 70%;}

.menu-icons {
    position:relative;display: inline-block;text-align: right;margin-left: 2vh;
    padding: 1vh 2vh;white-space: nowrap;transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.menu-h, .menu-icons img {
    position:relative;display: inline-block;vertical-align: middle;
}
.menu-h {
    opacity: 0;width: 0;white-space: nowrap;overflow: hidden;margin-right: 1vh;
    font-size: 3vh;color: var(--c-switch);transition: all 0.2s ease-in-out;
}
.menu-icons img {height: 4vh;}

.menu-icons:hover {background-color: var(--c-blue);}
.gold-menu:hover {background-color: #DBAD6A !important;}
.menu-icons:hover .menu-h {opacity: 1;width: calc(100% - 5vh);}
.theme-switch {padding-right: 0;margin-right: 0;margin-left: 3vh;cursor: pointer;}
.theme-switch:hover {background: transparent !important;}


.notif-drop {margin-top: 0 !important;}
#notification-icon {height: 4vh !important;width: 4vh !important;}
.profile-drop {
    position:relative;display:inline-block;vertical-align: middle;
    padding: 1vh 2vh;margin-top: -1vh;
}
.menu-pfp {position:relative;display:block;}
.img-wrap {position:relative;overflow:hidden;height:6vh;width:6vh;border-radius:100%;}
.menu-pfp-in {height:6vh;width:6vh;object-fit: cover;border-radius:100%;}


.menu-level {
    position:absolute;top: 80%;left:50%;display:block;transform: translateX(-50%);
}

.menu-drop {
    padding: 2vh 1vh;position: absolute;top: -100vh;left: 50%;display: block;
    transform: translateX(-50%);background-color: #2B2B2B;z-index: 998;text-align:left;
    transition: opacity 0.3s ease-in-out;opacity: 0;
}
.menu-drop::before {
    content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:998;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);width:25px;height:15px;background-color: #2B2B2B;
}
.menu-drop::after {
    position:absolute;top:-10vh;left:calc(50% - 2.5vh);width:5vh;height:10vh;content:"";
}
.drop-icon {height: 2.5vh;margin-right: 1vh;}
.drop-link {
    padding: 1.5vh 1vh;margin-bottom:1vh;display:block;
    position:relative;white-space: nowrap;cursor: pointer;
    transition: all 0.2s ease-in-out;margin-left: 1vh;margin-right: 1vh;
}
.drop-link:last-child {margin-bottom: 0 !important;}

.drop-link:hover {background-color: rgba(0,0,0,0.5) !important;}
.drop-separator {
    position:relative;display:block;width:calc(100% - 4vh);
    margin: 3vh 0 2vh 2vh;height: 1px;background-color: var(--c-white);
}
.drop-link.theme-switch {margin-left: 1vh !important;}

.profile-drop:hover .menu-drop, .menu-drop:hover {
    top: 120%;opacity: 1;
}


.notif-drop {margin-left: 2vw;margin-right: 2vw;}
.notif-drop .menu-drop {min-width: calc(10vw + 6vh);}
.notification-in {
    text-decoration: none;grid-template-columns: min-content auto;
    column-gap: 5%;min-width: 12vw;padding: 1.5vh 1vh;margin-bottom:1vh;
    transition: all 0.2s ease-in-out;margin-left: 1vh;margin-right: 1vh;
    width: auto !important;
}
.notification-in:last-child {margin-bottom: 0 !important;}
.notification-in:hover {background-color: rgba(0,0,0,0.5) !important;}
.notif-ping {
    position:absolute;top:-0.5vh;right: -0.5vh;height:1.5vh;width:1.5vh;
    background-color: #D23F3F;border-radius:100%;
}
.notif-title {margin-bottom: 0.5vh;margin-top: -3px;}


.notification-in .two-grid {gap: 1vh;grid-template-columns: repeat(2, 1fr);margin-top:1vh;}
.notification-in .button:hover {transform: none !important;cursor: pointer;}



.scrolled-menu {padding: 0.5% 5%;background-color: var(--c-blue);}
.scrolled-menu .logo-text {color: var(--c-white) !important;font-size: 3vh;}
.scrolled-menu .logo-left {color: var(--c-white);font-size: 3vh;}
.scrolled-menu .logo-left img {height: 3.5vh;}
.scrolled-menu .menu-icons img {height: 3.5vh;}
.scrolled-menu .menu-h {color: var(--c-white);}
.scrolled-menu .logo-text .blue {color: var(--c-white) !important;}

.buttons {text-align: left;display:block;margin: 1% 0 1% 0;}
.buttons .switch {margin-bottom: 2vh;}
.button {
	position:relative;display:inline-block;text-align: center;padding: 0.75vh 1.5vh 1vh 1.5vh;
	color: var(--c-white);font-size: 2.5vh;text-decoration: none;white-space: nowrap;
	cursor: pointer;background-color: var(--c-blue);transition: all 0.2s ease-in-out;
}
.white-button {background-color: var(--c-white);color: var(--c-dgray);}
.dark-button {background-color: var(--c-dgray);color: var(--c-white);}
.red-button {background-color: #e75151;color: var(--c-white);}
.transparent-button {background-color: transparent;}
.button-ep {padding: 1.25vh 2.5vh 1.25vh 2vh;}
.button-ep.f-mc {padding: 1.6vh 2.5vh 1.25vh 2vh;}
.button font, .button img, .intext font, .intext img {position:relative;z-index: 3;display: inline-block;vertical-align: middle;}
.button-mup font {margin-top: -0.45vh;}
.button img {height: 3vh;margin-right: 1vh;}
.button:hover:not(.no-button-hover) {transform: scale(1.05);}
.inline {display: inline-block;vertical-align:middle;}
.spaced-inline {margin: 0 1vw;}


.button-shared {
    padding: 1.5vh 2.5vh;position:relative;display: inline-block;cursor: pointer;
    box-sizing: border-box;transition: all 0.2 ease-in-out;
}
.button-shared h3 {font-size:24px;}
.button-main {background-color: var(--c-blue);}
.button-semi {border: solid 1px var(--c-blue);}
.button-inactive {background-color: var(--c-gray);cursor:not-allowed;}

.button-shared:hover:not(.button-inactive) {transform: scale(1.05);}

.extra-l-i {height: 2em;}
.move-right {margin-right: 1vh;}
.move-left {margin-left: 1vh;}

.category-in:hover .category-img {
    transform: scale(1.05);
}
.category-in:hover {
    box-shadow: 0 1vh 6vh 0 rgba(76,131,226,0.6);
}
article {margin-top: 3vh;}

.center-text {
    position:absolute;top:50%;left:15%;
    transform: translateY(-50%);z-index:4;
    text-align: center;width: 70%;
}
.center-text .f-mc {margin-bottom:1vh;}


.upscale-pix {
    image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;
}


.btn {
    position:relative;background-color: var(--c-blue);display: inline-block;cursor: pointer;
}
.button-part {
    position:relative;border-bottom:solid 6px rgba(0,0,0,0.6);padding:1.25vh 2vh 1vh 2vh;
    box-shadow:
        inset -4px -4px 0 rgba(0,0,0,0.2),
        inset 4px 4px 0 rgba(255,255,255,0.2);
}
.active-button {background-color: var(--c-blue) !important;}
.button-icon {height: 3vh;margin-right: 1vh;}
.large-button {padding: 2vh 3vh;border-bottom:solid 10px rgba(0,0,0,0.6);}
.btn:hover {margin-top: 3px;}
.large-hover:hover {margin-top:8px !important;}
.btn:hover .button-part {border-bottom: solid 3px rgba(0,0,0,0.6) !important;}
.btn:focus, .btn:active {margin-top: 6px;}
.btn:focus .button-part, .btn:active .button-part {border-bottom: solid 0px rgba(0,0,0,0.6);}

.tooltip {
    position:absolute;left: 50%;transform: translateX(-50%);
    background-color: var(--c-white);padding: 0.75vh 0.75vh 0.65vh 0.75vh;
    font-size: 1.25vh;color: var(--c-dgray);z-index: 10;text-align: center;
    box-shadow: 0 0 3px 0 black;white-space: nowrap;font-family: Segoe;
    opacity: 0;bottom: 100%;transition: all 0.2s ease-in-out;font-weight: bold;
    pointer-events: none;
}
.tooltip::before {
    border-style: solid;content: "";position:absolute;bottom: -9px;
    left: calc(50% - 10px);border-width: 10px 10px 0 10px;
    border-color: var(--c-white) transparent transparent transparent;
    pointer-events: none;
}
.tooltip-trigger:hover .tooltip {opacity: 1;bottom: 140%;}
.button:hover .tooltip {opacity: 1;bottom: 140%;}
.red-tooltip {background-color: #D23F3F;color: var(--c-white);}
.red-tooltip::before {border-color: #D23F3F transparent transparent transparent;}

.inline-button {display: inline-block;vertical-align: middle;margin-right: 1vh;}
.active-button {background-color: var(--c-blue);}
.transparent-button {background-color: transparent;}
.white-button {background-color: var(--c-white);color: var(--c-dgray);}
.gray-button {background-color: var(--c-gray);}
.dgray-button {background-color: var(--c-dgray);}
.not-allowed-button {cursor: not-allowed !important;}
.not-allowed-button * {cursor: not-allowed !important;opacity: 0.3;}
.not-allowed-button .tooltip {opacity: 0;}
.buttons .button.f-mc {padding: 1vh 2vh 0.75vh 2vh;}
.extra-padded-button {padding: 1.5vh 2.5vh 1.75vh 2vh !important;}
.extra-padded-button-n {padding: 1.5vh 2vh 1.5vh 2vh !important;}
.extra-padded-button2 {padding: 1.55vh 2.5vh 1.8vh 2vh !important;}
.block-button {display:block;}
.mup-b {margin-top: 2vh;}


.grid {position:relative;display: grid;width: 100%;}
.one-grid {grid-template-columns: 100%;gap: 4vh;}
.two-grid {grid-template-columns: repeat(2, 1fr);gap: 4vh;}
.tri-grid {grid-template-columns: repeat(3, 1fr);gap: 4vh;}
.four-grid {grid-template-columns: repeat(4, 1fr);gap: 4vh;}
.five-grid {grid-template-columns: repeat(5, 1fr);gap: 4vh;}
.swap-grid {grid-template-columns: repeat(5, 1fr);gap: 4vh;}

.large-grid {grid-template-columns: repeat(4, minmax(0, 1fr));column-gap: 4vh;}
.small-grid {grid-template-columns: repeat(6, minmax(0, 1fr));column-gap: 4vh;}
.eight-grid {grid-template-columns: repeat(8, minmax(0, 1fr));column-gap: 4vh;}

.in-grid {position:relative;display: inline-grid;}
.in-grid-first {position: relative;width: 100%;overflow: hidden;}
.in-grid a {text-decoration: none;}
.in-grid-gray {background-color: var(--c-gray);}
.grid-banner-wrap {
    width: 100%;display:block;overflow: hidden;position:relative;
}
.res, .new {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
.grid-banner-wrap .res {position:absolute;z-index: 5;bottom: 2.5%;right: 2.5%;}
.grid-banner-wrap .new {position:absolute;z-index: 5;bottom: 2.5%;left: 2.5%;}
.asp {position:relative;display:block;width:100%;}
.grid-banner {
    position:absolute;left:0;top:0;width:100%;height: 100%;
    transition: all 0.2s ease-in-out;object-fit: cover;
}
.grid-text {
    display:block;margin-top: 1vh;transition: transform 0.2s ease-in-out;
}
.grid-text h3, .grid-text h4 {
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    width: 100%;display:block;transition: all 0.2s ease-in-out;
}
.aspect {position:relative;display:block;width:100%;}
.res-banner {position:absolute;bottom:5%;right:5%;}
.pack-info-box {
    display:grid;position:relative;margin-top:1.5vh;
    grid-template-columns: 6vh calc(95% - 6vh);gap: 5%;
}
.pack-pfp {
    display:block;width:100%;aspect-ratio: 1 / 1;
    border: solid 3px var(--c-blue);
}
.pack-pfp img {display:block;width:100%;height:100%;object-fit:cover;}
.pack-inf {
    position:relative;white-space: nowrap;padding: 0.75vh 1.25vh;border-radius: 5px;
    background-color: rgba(51, 59, 70, 0.5);
}
.pack-inf-ico {margin-right: 1vh;}
.pack-inf-ico img {height: 2.25vh;}
.dow-ico img {transform: scale(0.9);}
.pack-title {white-space: nowrap;overflow: hidden;}
/*.stats-grid {display:grid;grid-template-columns: repeat(4, 1fr);gap: 1.25vw;margin-top:0.5vh;}*/
.stats-grid {display:flex;gap:1vh;margin-top:0.5vh;align-items:center;}

.pack-hov:hover .grid-banner {transform: scale(1.05);}


.flex {display:flex;align-items: center;}
.in-flex {display: inline-flex;position:relative;}

@keyframes shine {
    0% {left: -20%;}
    80% {left: -20%;}
    100% {left: 120%;}
}
@keyframes shine2 {
    0% {left: -50%;}
    30% {left: 150%;}
    100% {left: 150%;}
}
.popular-hover {
    position:absolute;top:0;left:-50%;height:100%;width:20%;
    z-index: 100;background-color: white;opacity:0.3;
    transform: skewX(-30deg) scale(1.5);
}
.in-grid:hover .popular-hover {animation: shine2 3s ease-in-out infinite;}


.dots {
    position:relative;display: block;text-align: center;
    margin-top: 5%;
}
.dots span {
    position:relative;display: inline-block;vertical-align: middle;
    height: 1.25vh;width: 1.25vh;background-color: var(--c-switch);
    margin: 0 1vh;border-radius: 0;cursor: pointer;transition: all 0.2s ease-in-out;
}
.active-dot {background-color: var(--c-blue) !important;}
.dots span:hover {transform: scale(1.2);}


header {overflow: initial;}
section {width: 90%;padding: 5%;}
#grid-results-recents, #grid-results-popular {margin-top: 4vh;position:relative;}
.pages-amount {margin-top: 3vh;}
.pages-amount div {
    padding: 0.6vh 1.25vh;font-size: 1.5vh;color: var(--c-switch2);font-weight: bold;
    background-color: var(--c-switch);display:inline-block;vertical-align: middle;
    transition: all 0.2s ease-in-out;cursor: pointer;
}
.pages-amount .active-page {background-color: var(--c-blue);}
.pages-amount div:hover {transform: scale(1.2);}


.pack-tags-list {margin-top:2vh;}
.pack-tags {
    position:relative;display:inline-block;padding: 0.5vh 1vh;border-radius: 4px;
    background-color: rgba(200,200,200,0.3);margin-right: 1vh;cursor:pointer;
    text-decoration: none;color: var(--c-white);vertical-align: top;
    text-transform:capitalize;
}
.tag-ico {height: 1.5vh;margin-right:0.5vh;display:inline-block;vertical-align: middle;}
.pack-tags font {display:inline-block;vertical-align: middle;position:relative;}
.pack-tags:hover {transform:scale(1.05);}

.yt-tw {
    text-align: center;background: linear-gradient(to bottom right, #81C3FF, #7D85FF);
    padding: 5%;
}
.yt-tw h1 {margin-bottom: 2vh;}
.yt-tw .button .icon-button {height: 4vh;vertical-align: middle;}
.yt-tw .button font {margin-top: 0.25vh;}
.yt-tw h1 font {display: inline-block;position: relative;}
#social-yt {margin-left: 1vw;}


.star-imgm {height: 1.5vh;margin-top: 4px;margin-right: 2px;}

.dc {
    text-align: center;background: linear-gradient(to bottom right, #81C3FF, #7D85FF);
    padding: 8% 5% !important;width: 90%;
}
.dc::before {
    position:absolute;top:0;left:0;width:100%;height:100%;content: "";
    background-image: url("../assets/dc.png?v=2");background-size: cover;
    background-position: center bottom;z-index: 1;
}
.dc::after {
    position:absolute;top:0;left:0;width:100%;height:100%;content: "";
    background-color: var(--c-bg);opacity: 0;z-index: 2;
}
.dc * {position:relative;z-index: 3;}
.dc h1 {color: white;}
.dc .button {margin: 2vh 0;}
.joindc:hover {transform: scale(1.05);}




.category-in {
    aspect-ratio: 16 / 9;
    transition: all 0.3s ease-in-out;
}
.in-grid-wrap {
    position:relative;overflow:hidden;
    display:block;
}
.category-img {
    display:block;width:100%;height:100%;
    object-fit: cover;transition: all 0.3s ease-in-out;
}

#categories {
    margin-top: -4vh;z-index:10;padding-top:0 !important;
    transform-origin: top center;
}
#gr-1 {
    grid-column-start: 1;grid-column-end: 3;
    grid-row-start: 1;grid-row-end: 3;
}
#gr-2 {
    grid-column-start: 3;grid-column-end: 5;
    grid-row-start: 1;grid-row-end: 3;
}
.category-in a::before {
    position:absolute;top:0;left:0;content:"";
    width:100%;height:100%;z-index:2;
    background: rgba(66, 66, 66, 0.6);opacity: 0.5;
}
.category-grid .f-mc {
    position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
    z-index:4;
}
.secondary-category {margin-top: 4vh;position:relative;}

.arrow-cover {
    position: absolute;padding:1.5vh;border-radius:100%;background-color: var(--c-blue);z-index:10;
    cursor: pointer;top: 50%;transform: translateY(-50%);transition: transform 0.2s ease-in-out;
}
.arrow-in {height:2.5vh;position:relative;}
.left-arrow {left: -4vh;}
.left-arrow img, .flip {-webkit-transform: scaleX(-1);transform: scaleX(-1);}
.right-arrow {right: -4vh;}
.arrow-cover:hover {transform: scale(1.1) translateY(-45%);}
.inactive-arrow {opacity:0.5;cursor: not-allowed !important;}


.panel-login {cursor: pointer;}
.auth-bg {
	position:fixed;top:0;left:0;width:0%;height:0%;background-color: var(--c-blue);
	opacity: 0.5;z-index: 996;transition: opacity 0.3s ease;opacity: 0;
}
.show-auth-bg {width:100%;height:100%;opacity: 1;}
.auth-box {
	position:fixed;top: 0;right: -100%;height:90%;padding: 5%;width: 45%;
    background-color: var(--c-switch2);text-align: left;z-index: 998;
    transition: all 0.2s ease-in-out;
}
.show-auth-top {right: 0%;}
.auth-box .text-under {margin: 1vh 0 5vh 0;}
#login-box {display: none;}
.input-field {margin-bottom: 2.5vh;position:relative;}
.submit-field h4 {text-align: center;width: calc(100% - 1.5vw);margin-top: 2vh;cursor: pointer;}
.input-title {font-family: Segoe;margin-bottom: 0.25vw;}
input, textarea {
    border: none !important;background-color: var(--c-gray);
    outline: none;color: var(--c-white);font-family: Segoe;
    font-weight: bold;font-size: 1.5vh;padding: 1.5vh;
    width: calc(100% - 3vh);
}
input:-webkit-autofill {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-box-shadow: 0 0 0 50px var(--c-gray) inset;
    -webkit-text-fill-color: var(--c-white);
    font-size: 1.5vh;padding: 1.5vh;font-family: Segoe;font-weight: bold;
}
input[type="submit"] {
    margin-top: 1vh;background-color: var(--c-blue) !important;
    color: var(--c-white);cursor: pointer;font-size: 2vh;
}
::placeholder {font-family:Segoe;font-weight:bold;}

.first-checkbox {margin-top: 5vh;}
.checkbox {width: 1.5vw;display: inline-block;height: 1.5vw;vertical-align: middle;position:relative;}
input[type="checkbox"] {
    top:0;left:0;position:absolute;width: 1.5vw;cursor: pointer;
    padding: 0 !important;margin: 0 !important;height: 1.5vw;
    background-color: var(--c-blue);border: none;outline: none;
}
input[type="checkbox"]::before {
    background-color: var(--c-blue);
    content: "";position:absolute;top: 0;left: 0;width: 1.5vw;height: 1.5vw;
    background-image: url(../assets/sprites/unchecked.png);background-size: 100%;
    background-position: center;background-repeat: no-repeat;
}
input[type="checkbox"]:checked::before {
    content: "";display: block;position: absolute;width: 1.5vw;height: 1.5vw;
    top: 0;left: 0;background-color:var(--c-blue);
}
input[type="checkbox"]:checked::after {
    content: "";position:absolute;top: 0;left: 0;width: 1.5vw;height: 1.5vw;
    background-image: url(../assets/sprites/checked.png);background-size: 100%;
    background-position: center;background-repeat: no-repeat;
}
.input-next {display: inline-block;vertical-align: middle;margin-left: 1vw;width: calc(100% - 3vw);}
.password-field {display: inline-block;width: calc(100% - 8vh);}
.view-p {
    position:relative;display: inline-block;vertical-align:top;height:5vh;width:5vh;
    background-image: url(../assets/icons/show.png);background-size: 70%;background-position: center;
    background-repeat: no-repeat;background-color: var(--c-blue);cursor: pointer;
}
.shown-p {background-image: url(../assets/icons/hide.png) !important;}
.error-line {color:#D23F3F;text-align: center;display:block;}



.download-section {margin: 10vh 0;}

.download-numbering {display:flex;gap:12%;}
.number-step {width:33.34%;}
.sm-step {width:50% !important;}
.number-step span {
    position:absolute;top:calc(50% - 1px);left:0;
    width:150%;height:2px;background-color: var(--c-gray);
}
.sm-step span {width: 130%;}
.number-step .number-box {
    height:5vh;width:5vh;display:inline-block;background-color: var(--c-gray);z-index:3;
    position:relative;
}
.number-step h2 {
    position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
.active-step .number-box {outline: solid 2px var(--c-blue);}
.finished-step .number-box {background-color: var(--c-blue);}
.finished-step span {background-color: var(--c-blue);}

.download-steps {display:grid;gap:12%;margin-top:4vh;grid-template-columns: repeat(3, 1fr);}
.step-in {display:inline-grid;position:relative;}
.step-in h2 {margin-bottom: 1vh;}
.self-end {align-self: end;}
.download-twostep {grid-template-columns: repeat(2, 1fr) !important;}



footer {
	position:relative;display:block;width:80%;padding: 5% 10% 2.5% 10%;
	background-color: var(--c-dgray);text-align: center;
	color: var(--c-white);
}
.footer-grid {
    grid-template-columns: 30% 65%;column-gap: 5%;row-gap: 0;
}
.left-footer {
    background-color: var(--c-gray);padding: 10%;
    text-align:left;
}
.left-footer h1 {margin-bottom: 2vh;}
.footer-right .in-grid {text-align: left;}
.footer-right h4 {margin: 2vh 0;transition: color 0.2s ease-in-out;}
.footer-right .in-grid .bold {margin-bottom: 3vh;}
.footer-right a h4:hover {color: var(--c-white);}
.content-grid-footer {align-self: center;}


.copyright {
	position:relative;display:block;margin-top: 5vw;
}



.pfp, .umatch-info {position:relative;display:inline-block;vertical-align: top;}
.pfp {width: 7vw;height:7vw;margin-right:2.5%;border-radius:100%;overflow: hidden;}
.umatch-info {width: calc(92.5% - 7vw);padding:2.5%;height:95%;margin-top: -1vh;}
.pfp img {display:block;width:100%;height:100%;object-fit: cover;}




.plus-slots {
    position:relative;display:block;padding: 2.5%;
    background-image: url(../assets/update-bg.jpg);
    background-size: cover;background-position:center;
    margin-top: 2vh;
}
.plus-slots::before {
    content: "";position:absolute;top:0;right:0;height:100%;width:100%;
    z-index: 3;background: radial-gradient(circle at 80% 50%, rgba(76, 131, 226,0.4) 0%, var(--c-blue) 50%);
}
.plus-slots::after {
    content: "";position:absolute;top:0;right:0;height:100%;width:100%;
    z-index: 4;background-image: url(../assets/grad.jpg);background-size:cover;opacity:0.5;
}
.home-plus {width: 85%;margin-left: 5%;}

.plus-slots h2, .plus-slots h4, .plus-slots a {z-index: 10;}
.plus-slots h2 img {height: 4vh;margin-right: 1vh;}
.plus-slots h2 font {margin-top: -0.75vh;}
.plus-slots h4 {margin: 1vh 0 4vh 0;}
.plus-slots a {background-color: #DBAD6A;}



.important-box {
    display:flex;width:calc(100% - 2vh);padding:1vh;
    background-color: #de3a1d;align-items: center;
    gap: 2vh;margin-top:4vh;
}
.important-box img {height:2vh;}




.phone-menu, .phone-logo, .phone-footer {display: none;}
@media (max-width: 980px) and (orientation: portrait) {
    h1 {font-size: 30px;line-height: 1;font-weight: normal;}
    h2 {font-size: 20px;line-height: 1;font-weight: normal;}
    h3 {font-size: 18px;line-height: 1;font-weight: normal;}
    h4 {font-size: 16px;line-height: 1;font-weight: normal;}
    h5 {font-size: 14px;line-height: 1;font-weight: normal;}
    h6 {font-size: 12px;line-height: 1;font-weight: 300;}
    
    .annotation {text-align: left;bottom: auto;top:0;}.annotation-text {max-width: calc(100% - 10vh);}
    ::-webkit-scrollbar {width: 0;}
    html, body {overflow: auto;}
    .extra-large {font-size: 3.75vh;line-height: 3.75vh;font-weight: normal;}
    .button {font-size: 2vh;}
    section {padding: 10% 5%;}

    .phone-logo {display:block;text-align: center;margin-top: 2vh;}
    .phone-logo img {display: inline-block;vertical-align: middle;height: 4vh;}
    .phone-logo h1 {
        display: inline-block;vertical-align: middle;
        color: var(--c-switch);margin-top: 1vh;margin-left: 1vh;
    }

    .pc-menu {display: none;}
    .phone-menu {
        display:block;position:fixed;bottom:0;left:0;width:100%;
        background-color: var(--c-blue) !important;z-index: 998;height: auto;
        padding: 0;text-align: center;margin: 0;
    }
    .phone-menu a {
        cursor: pointer;justify-self: center;text-align: center;justify-items: center;
    }
    .phone-menu a img {height: 3vh;padding: 1.75vh 0;}
    .phone-menu h5 {color: var(--c-white);margin-bottom: 1vh;}
    .theme-switch {margin-left: 0;}
    .yt-tw h1 font {display: block;position: relative;}

    .pc-footer {display: none;}
    .phone-footer {display:block;}
    .social-footer {margin-top: 2vh;}
    .social-footer .in-grid {justify-self: center;align-self: center;}
    .social-footer .in-grid img {height: 4vh;}
    .social-footer .dc-s img {height: 2.75vh;}
    .footer-links {display:block;text-align: center;margin: 4vh 0;}
    .footer-links a {
        color: var(--c-white);font-size: 2vh;display: inline-block;
        text-decoration: none;position:relative;padding:1vh 1.5vh;
    }
    .copyright {margin-top: 2vh;font-size: 1.5vh;opacity: 0.8;}
    footer {padding-bottom: calc(2% + 7vh);}


    .auth-box {width:90%;}
    .auth-box .text-under {margin: 1vw 0 4vw 0;}
    .input-field {margin-bottom: 3vw;}
    .submit-field h4 {width: calc(100% - 4vw);margin-top: 4vw;}
    .input-title {font-family: Segoe;margin-bottom: 0.75vw;}
    input, textarea {font-size: 3vw;padding: 2vw;width: calc(100% - 4vw);}
    input:-webkit-autofill {font-size: 3vw;padding: 2vw;}
    
    .first-checkbox {margin-top: 3vw;}
    .checkbox {width: 5vw;height: 5vw;}
    input[type="checkbox"] {width: 5vw;height: 5vw;}
    input[type="checkbox"]::before {width: 5vw;height: 5vw;}
    input[type="checkbox"]:checked::before {width: 5vw;height: 5vw;}
    input[type="checkbox"]:checked::after {width: 5vw;height: 5vw;}
    .input-next {margin-left: 1vw;width: calc(100% - 10vw);}

    #social-yt {margin-left: 0;}

    .dots {margin-top: 8%;}
    .small-grid {grid-template-columns: repeat(2, minmax(0, 1fr));column-gap: 2%;row-gap: 2vh;}
    #add-pack {grid-column-start: 1;grid-column-end: 3;}


    
    .pages-amount div {
        padding: 0.75vh 1.75vh 0.85vh 1.75vh;font-size: 2vh;margin: 0 0.25vh;
    }
    .yt-tw, .dc {padding: 10% 5% !important;}
    .one-grid {row-gap: 6vh;}
    .one-grid h3 {font-size: 3vh;line-height: 3vh;}


    .swap-grid {grid-template-columns: 49% 49%;column-gap: 2%;row-gap: 4vh;}

    footer {padding: 5% 5% 2.5% 5%;width: 90%;}
    .footer-grid {grid-template-columns: 100%;column-gap: 0%;row-gap: 5%;}
    .left-footer {padding: 5%;}
    .footer-right {
        grid-template-columns: 47.5% 47.5%;column-gap: 5%;row-gap: 5%;padding: 0;width:100%;
    }
    .copyright {margin-top: 10vh;}

    
    .pfp {width: 15vw;height:15vw;margin-right:2.5%;border-radius:100%;overflow: hidden;}
    .umatch-info {width: calc(92.5% - 15vw);padding:2.5%;height:95%;margin-top: -1vh;}

    .plus-slots h2 img {display: none;}
    .plus-slots {padding: 5%;}.home-plus {width: 80%;}
    .cookies-msg {margin-bottom: 15%;text-align: center;}
    .cookies-msg h3 {display:block;}
    .close-cookie {margin-left: 0;margin-top: 1vh;}
    .cookies-msg img {margin-left: 0 !important;margin-right: 0 !important;}

    .announcement-box {width: 85% !important;margin-left:2.5% !important;}
    .announcement-or {display: none;}
}
@media (max-width: 1100px) and (min-width: 981px) {
    .notif-drop .menu-drop {min-width: calc(20vw + 6vh);}
    .extra-large {font-size: 6vh;line-height: 6.5vh;font-weight: normal;}
    .button {font-size: 2vh;}
    section {padding: 10% 5%;}

    footer {padding: 5% 5% 2.5% 5%;width: 90%;}
    .footer-grid {grid-template-columns: 100%;column-gap: 0%;row-gap: 5%;}
    .left-footer {padding: 5%;}
    .footer-right {padding: 0 5%;width:90%;}
    .copyright {margin-top: 10vh;}
    .announcement-box {width: 65%;padding: 2.5% 5%;margin-left: 12.5%;}

    .pack-info-box {
        margin-top:2vh;grid-template-columns: 6vh calc(90% - 6vh);
        gap: 10%;
    }
    .pack-title {font-size: 16px;}
    .stats-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 1440px) and (min-width: 1101px) {
    .notif-drop .menu-drop {min-width: calc(16vw + 6vh);}
    .extra-large {font-size: 3vw;line-height: 1.25;font-weight: normal;}

    footer {padding: 5% 7.5% 2.5% 7.5%;width: 85%;}
    .footer-grid {grid-template-columns: 40% 55%;column-gap: 5%;}
    .announcement-box {width: 65%;padding: 2.5% 5%;margin-left: 12.5%;}


    .pack-title {font-size: 16px;}
    .stats-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 1920px) and (min-width: 1440px) {
    .notif-drop .menu-drop {min-width: calc(14vw + 6vh);}
    .extra-large {font-size: 2.75vw;line-height: 1.25;font-weight: normal;}
    .announcement-box {width: 60%;padding: 2.5% 5%;margin-left: 15%;}
}



.rek-window {
    display:block;padding-top: 10%;background-color: rgba(0,0,0,0.5);
}

/* old prem #69d183 */
.rank-premium, .rank-plus {color: #ffe136;} 
.rank-creator {color: #AF6AE9;} 
.rank-moderator {color: #FF7979;} 
.rank-manager {color: #D23F3F;} 
.rank-developer {color: #FEA060;} 
.rank-admin {color: #EB1819;} 



.tag-red-color {border-color:red !important;}
.tag-blue-color {border-color:blue !important;}
.tag-pink-color {border-color:pink !important;}
.tag-yellow-color {border-color:yellow !important;}
.tag-brown-color {border-color:brown !important;}
.tag-purple-color {border-color:purple !important;}
.tag-black-color {border-color:black !important;}
.tag-white-color {border-color:white !important;}
.tag-green-color {border-color:green !important;}
.tag-orange-color {border-color:orangered !important;}
.tag-gray-color {border-color:gray !important;}
.tag-rainbow-color {border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%) !important;border-image-slice: 1 !important;}
.tag-candy-color {border-color:#ffbcd9 !important;}
.tag-lime-color {border-color:lime !important;}
.tag-peach-color {border-color:peachpuff !important;}
.tag-gold-color {border-color:gold !important;}
.tag-cyan-color {border-color:cyan !important;}



.switch-order, .grid-switch {
    display: inline-block;vertical-align: middle;position:relative;
    margin-right: 1vw;cursor: pointer;transition: color 0.2s ease-in-out;
}
.grid-switch {margin-right: 0 !important;margin-left: 1vw;line-height:0.8;}
.switch-order:hover, .grid-switch:hover {color: var(--c-blue);}
.pending-order, .pending-grid-order {position:relative;display:inline-block;vertical-align: middle;width:50%;}
.pending-grid-order {text-align: right;}
.pend-pack-grid .grid-text {text-shadow: 0 0 1px black;}


@media (max-width: 980px) and (orientation: portrait) {
    .pending-grid-order {display:none;}
    .pending-order {width:100%;display:block;}
    .switch-order {margin-right: 2vh;}
    .large-tools {margin-top: 2vh;}
    .right-stats {padding: 2vh 1vh;text-align: center;}


    .announcement-effe::after {left:-60%;width:25%;}
    .announcement-box {width: 90%;padding: 5% 2.5%;text-align: center;display: inline-block;margin-left: 2.5%;}
    .announcement-over {text-align: center;}
    .cube, #oran {display: none;}
    .hide-announcement {height: 2.5vh;width:2.5vh;top: -0.25vh;}
    .hide-announcement .tooltip {display: none !important;}
}




#announcement {padding: 5% 0;width:100%;text-align:left;}
.announcement-box {
    position:relative;display:inline-block;width: 50%;margin-left: 20%;
    padding: 2.5% 5%;background-color: var(--c-blue);
}


.announcement-effe {
    position:absolute;top:0;right:0;height:100%;width:100%;z-index: 1;overflow: hidden;
}

.announcement-effe::before {
    content: "";position:absolute;top:0;right:0;height:100%;width:100%;
    z-index: 3;background: radial-gradient(circle at 80% 50%, rgba(76, 131, 226,0.4) 0%, var(--c-blue) 50%);
}
.announcement-effe::after {
    content: "";position:absolute;top:0;left:-20%;height:100%;width:10%;
    z-index: 4;background-color: white;opacity:0.1;
    transform: skewX(-30deg) scale(1.5);
    animation: shine 6s ease-in-out infinite;
}
.announcement-bg {position:absolute;top:0;right:0;height:100%;width:100%;object-fit: cover;z-index: 2;}
.announcement-over {
    position:relative;z-index: 5;display:block;text-align: left;
}
.hide-announcement {position:absolute;top:1vh;right:0;z-index: 6;cursor:pointer;height: 4vh;width:4vh;}
.hide-announcement::before, .hide-announcement::after, .hide-announcement span {
    position:absolute;top:0;left:0;width:100%;height:6px;content: "";
    background-color: white;z-index: 3;transition: all 0.2s ease-in-out;
}
.hide-announcement::before {transform:rotate(45deg);box-shadow: 1px 3px 0 0 black;}
.hide-announcement::after {transform:rotate(-45deg);}
.hide-announcement span {z-index:1;transform:rotate(-45deg);box-shadow: -3px 2px 0 0 black;}
.hide-announcement:hover::before, .hide-announcement:hover::after, .hide-announcement:hover span {top: -2px;}

@keyframes cube1 {
    from{transform: translateY(-2px);}
    to{transform: translateY(2px);}
}
@keyframes cube2 {
    from{transform: translateY(2px);}
    to{transform: translateY(-2px);}
}

.cube {
    position:absolute;background-color: var(--c-blue);
}
.c1 {
    bottom: -4vh;right:-2vh;height:2vh;width:2vh;
    animation: cube1 3s ease-in-out 0.1s infinite alternate;
}
.c2 {
    bottom: -0.5vh;right:-5vh;height:3vh;width:3vh;
    animation: cube2 3s ease-in-out 0.3s infinite alternate;
}
.c3 {
    bottom: -5.5vh;right:-5.5vh;height:1.5vh;width:1.5vh;
    animation: cube2 3s ease-in-out 0.6s infinite alternate;
}
.c4 {
    top: -5.5vh;left:-1vh;height:3vh;width:3vh;
    animation: cube1 3s ease-in-out 0.2s infinite alternate;
}
.c5 {
    top: -2vh;left:-4.5vh;height:2vh;width:2vh;
    animation: cube2 3s ease-in-out 0.4s infinite alternate;
}