@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
.error-section {
  text-align: center;
  color: var(--font);
}
#oops {
  position: relative;
  font-size: 5em;
  letter-spacing: 10px;
  rotate: 10deg;
  animation: oops 2s ease-in-out forwards;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #oops {
    font-size: 7.5em;
  }
}
#not-found {
  margin: 0 20%;
  rotate: -7deg;
  font-size: 1.5em;
  width: 50%;
  margin-top: -40px;
  color: var(--first-color);
  font-weight: bolder;
  padding-left: 0;
  z-index: 1;
  margin-bottom: 2em;
}
@keyframes oops {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    rotate: 0deg;
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
    rotate: 0deg;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    rotate: 10deg;
  }
}
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

:root {
  --bg: #ccc;
  --first-color: #a70ca8;
  --second-color: #000;
  --third-color: #000;
  --font: #000;
  --scrollbar-size: 0.375rem;
  --scrollbar-minlength: 1.5rem;
  --scrollbar-ff-width: thin;
  --scrollbar-track-color: rgba(255, 255, 255, 0.15);
  --scrollbar-color: rgba(0, 0, 0, 0.3);
  --scrollbar-color-hover: rgba(0, 0, 0, 0.4);
  --scrollbar-color-active: #000;
  --wave-height: 200px;
}
body {
  background: var(--bg) !important;
  color: var(--font);
  font-family: 'Raleway', sans-serif !important;
}
html, body, #main-content {
  scroll-behavior: smooth;
  height: 100%;
}
body > #main-content {
  height: auto;
  min-height: 80vh;
}
::selection {
  /* WebKit/Blink Browsers */
  background: rgba(0, 78, 31, 0.5);
}
::-moz-selection {
  /* Gecko Browsers */
  background: rgba(0, 78, 31, 0.5);
}
a:not(.btn) {
  color: #1a1a1a !important;
}
a:not(.btn):hover {
  color: #000 !important;
}
input.invalid {
  box-shadow: 0 0 3px 3px rgba(255, 0, 0, 0.5) !important;
}
input.valid {
  box-shadow: 0 0 3px 3px rgba(0, 200, 0, 0.5) !important;
}
.input-group-append .input-group-text {
  background: #fff;
}
.btn-copy input[type=text] {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
}
.form-control:focus {
  border-color: var(--first-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 31, 0.5);
}
.custom-control-input:focus ~ .custom-control-label::before {
  border-color: #004e15 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 78, 21, 0.5);
}
.custom-control-input:active ~ .custom-control-label::before {
  background-color: #fff;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label {
  border: 0;
  box-shadow: 0 0 0 0 transparent;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  background: var(--first-color);
  border: 0;
  box-shadow: 0 0 0 0 transparent;
}
.modal-header, .modal-footer {
  border: 0;
}
table {
  border-collapse: collapse;
}
th, td {
  padding: 5px 10px;
  border: 1px solid #999;
}
th {
  background-color: #eee;
}
th[data-sort] {
  cursor: pointer;
}
tr.awesome {
  color: red;
}
.squircle {
  clip-path: url(#squircle);
}
.loading-cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  z-index: 99999;
}
.loading-cover .spinner-grow {
  scale: 2;
}
.alert {
  color: var(--font);
}
.alert a {
  color: inherit !important;
}
.alert.alert-success {
  background: rgba(125, 213, 146, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.alert.alert-warning {
  background: rgba(243, 231, 133, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.alert.alert-danger {
  background: rgba(220, 20, 60, 0.25) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.alert.alert-discord {
  background: rgba(94, 106, 240, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn-prime, .btn-facebook, .btn-google, .btn-discord {
  background: #a70ca8 !important;
  width: max-content;
  color: #000 !important;
  transition: all 0.5s ease-in-out !important;
}
.btn-prime:hover, .btn-facebook:hover, .btn-google:hover, .btn-discord:hover {
  filter: brightness(115%);
  scale: 1.05;
  box-shadow: 0 0 5px var(--first-color);
}
.btn-prime[disabled], .btn-facebook[disabled], .btn-google[disabled], .btn-discord[disabled] {
  pointer-events: none;
  opacity: 0.65;
}
.btn-facebook {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #1877f2 !important;
  color: #fff !important;
}
.btn-facebook span {
  display: inline-block;
  width: 100%;
}
.btn-google {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #e8322b !important;
  color: #fff !important;
}
.btn-google span {
  display: inline-block;
  width: 100%;
}
.btn-discord {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #5e6af0 !important;
  color: #fff !important;
}
.btn-discord span {
  display: inline-block;
  width: 100%;
}
.invisilink {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.05em;
  text-align: center;
  background: linear-gradient(to right, var(--first-color), var(--second-color));
  color: #fff !important;
  font-weight: bolder;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 999;
  transition: all 0.2s ease-in-out;
  translate: 0 -100px;
}
.invisilink:focus {
  translate: 0;
}
.hr-text {
  position: relative;
  margin: 3em 0;
  border-top: 2px solid var(--second-color);
}
.hr-text span {
  display: grid;
  place-items: center;
  background: var(--second-color);
  color: #fff;
  padding: 0.25em;
  margin: 0 auto;
  margin-top: -1.2em;
  width: max-content;
  border: 2px solid #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.back-btn {
  position: fixed;
  top: 1em;
  left: 1em;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  z-index: 99999;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 1.1em;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}
.pagination .item {
  cursor: pointer;
  padding: 1em;
  user-select: none;
  transition: all 0.2s ease-in-out;
}
.pagination .item:not(.pagenum):hover {
  scale: 1.1;
}
.pagination .item.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.pagination .pagenum {
  display: flex;
  align-items: center;
  font-weight: bolder;
  user-select: none;
  white-space: nowrap;
}
.pagination .pagenum input {
  display: none;
  max-width: 50px;
  margin-right: 0.5em;
}
.pagination .item:not(.pagenum) span {
  display: none;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .pagination .item:not(.pagenum) span {
    display: inline;
  }
}
.pagination .pageword {
  display: none;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .pagination .pageword {
    display: inline;
  }
}
.toast {
  position: absolute;
  bottom: 1em;
  left: 50%;
  text-align: center;
  translate: -50%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(1rem);
  color: #fff;
  white-space: nowrap;
  border-radius: 5px;
  padding: 0.5em 1em;
  box-shadow: 0 2px 15px #000;
  cursor: pointer;
  user-select: none;
  z-index: 99999;
  animation: fadeUp 0.5s ease-in-out;
}
a[id="fr-logo"] {
  display: none !important;
}
p[data-f-id="pbf"] {
  display: none !important;
}
a[href*="www.froala.com"] {
  display: none !important;
}
.gp-modal-bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  backdrop-filter: blur(0.2rem);
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}
.gp-modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  min-width: 300px;
  background: rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 2px 15px rgba(0, 0, 0, 0.7));
  z-index: 100000;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .gp-modal {
    top: 50%;
    left: 50%;
    width: 50%;
    translate: -50% -50%;
    border-radius: 20px;
  }
}
.gp-modal .gp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: #fff;
  padding: 1em;
  padding-bottom: 0;
}
.gp-modal .gp-modal-header i {
  cursor: pointer;
}
.gp-modal .gp-modal-header i:hover {
  scale: 1.1;
}
.gp-modal .gp-modal-body {
  margin-top: -0.5em;
}
.cookie-container {
  position: sticky;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
.cookie-container div:first-of-type {
  width: 100%;
}
.cookie-container div:last-of-type {
  padding-left: 1.2em;
}
.header_background {
  position: fixed;
  background-image: linear-gradient(to bottom, transparent, #a70ca8), url(https://get-pri.me/images/ksinbg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  mask-repeat: repeat-x;
  mask-image: url(https://get-pri.me/images/wave.png);
  mask-position: bottom left;
  mask-size: 80%;
  mask-image: url(https://get-pri.me/images/waveicepop.png);
  mask-size: 40%;
  width: 100%;
  height: 10vw;
  min-height: 100px;
  z-index: 998;
  pointer-events: none;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .header_background {
    background-position: center center, center -50px;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .header_background {
    mask-size: 20%;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .header_background {
    height: 8vw;
  }
}
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-width: 300px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff), radial-gradient(circle at 11% 37%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent 56%, transparent 56%, transparent 100%), radial-gradient(circle at 82% 7%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 46%, transparent 46%, transparent 88%, transparent 88%, transparent 100%), radial-gradient(circle at 81% 79%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 33%, transparent 33%, transparent 89%, transparent 89%, transparent 100%), radial-gradient(circle at 68% 96%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 8%, transparent 8%, transparent 26%, transparent 26%, transparent 100%), radial-gradient(circle at 69% 20%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 84%, transparent 84%, transparent 86%, transparent 86%, transparent 100%), radial-gradient(circle at 49% 22%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 71%, transparent 71%, transparent 78%, transparent 78%, transparent 100%), radial-gradient(circle at 23% 60%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 6%, transparent 6%, transparent 40%, transparent 40%, transparent 100%), radial-gradient(circle at 86% 33%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 13%, transparent 13%, transparent 98%, transparent 98%, transparent 100%), radial-gradient(circle at 38% 60%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 15%, transparent 15%, transparent 61%, transparent 61%, transparent 100%), linear-gradient(0deg, #fff, #fff);
  color: var(--font);
}
#app .header {
  user-select: none;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: max-width;
  height: 6em;
  padding: 0 1em;
  translate: calc(50dvw - 50%);
  z-index: 999;
}
@media only screen and (min-width: 500px) {
  #app .header {
    height: 7.5em;
  }
}
@media only screen and (min-width: 1500px) {
  #app .header {
    height: 7vw;
  }
}
#app .header .logo {
  cursor: pointer;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 250px;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  aspect-ratio: 16/5;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .header .logo {
    width: 25%;
    max-width: 350px;
    min-width: 350px;
  }
}
#app .header .logo:hover {
  filter: brightness(115%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  scale: 1.05;
}
#app .header .login-btn {
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: #fff;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  aspect-ratio: 1;
  color: var(--first-color) !important;
  text-decoration: none;
  font-size: 1.5em;
  border: 5px solid var(--first-color);
  border-radius: 100%;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .header .login-btn {
    width: 64px;
  }
}
#app .header .login-btn:hover {
  scale: 1.075;
  filter: brightness(115%);
  background-size: 105%;
}
#app .headernew {
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100dvw;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(0.5em);
  z-index: 1;
  padding: 1em 0 2em 0;
  mask: radial-gradient(100% 100% at top, #000 50%, transparent);
  height: 100px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .headernew {
    height: 170px;
    padding: 1em 0 4em 0;
    mask: radial-gradient(60% 100% at top, #000 50%, transparent);
  }
}
#app .headernew:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, transparent, #a70ca8), url(https://get-pri.me/images/ksinbg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  mask: linear-gradient(to bottom, #000, transparent);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .headernew:after {
    background-position: center center, center -50px;
  }
}
#app .logo {
  position: fixed;
  top: 1em;
  left: 50%;
  translate: -50%;
  cursor: pointer;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 250px;
  margin-top: -0.5em;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  aspect-ratio: 16/5;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .logo {
    top: 0.5em;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #app .logo {
    width: 25%;
    max-width: 350px;
    min-width: 350px;
    margin-top: 0;
  }
}
#app .logo:hover {
  filter: brightness(115%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  scale: 1.05;
}
#app .body {
  opacity: 0;
  flex: 1;
  height: 100vh;
  min-width: 300px;
  --body-padding: 0;
  padding: var(--body-padding);
  overflow: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  animation: fadeIn 1s 0.5s forwards;
}
@media only screen and (min-width: 500px) {
  #app .body {
    --body-padding: 3em;
  }
}
@media only screen and (min-width: 1500px) {
  #app .body {
    --body-padding: 10em;
  }
}
#app .body .body-inner {
  margin: 7em 5dvw;
}
@media only screen and (min-width: 500px) {
  #app .body .body-inner {
    margin: 7em 2dvw;
  }
}
@media only screen and (min-width: 1500px) {
  #app .body .body-inner {
    margin: 1em 2dvw;
  }
}
.display-pic {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  aspect-ratio: 1;
  border: 5px solid var(--first-color);
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: all 0.2s ease-in-out;
  z-index: 9999;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .display-pic {
    right: 1em;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .display-pic {
    width: 64px;
  }
}
.display-pic:hover {
  scale: 1.075;
  filter: brightness(115%);
  background-size: 105%;
}
.user-menu {
  display: none;
  position: absolute;
  top: 1.5em;
  right: 2.5em;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  padding: 0.25em;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: user-menu 0.5s ease-in-out;
  scale: 0.9;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .user-menu {
    top: 1em;
    right: 5em;
    scale: 1;
  }
}
.user-menu.active {
  display: flex;
}
.user-menu .item {
  text-decoration: none;
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 10px;
  color: #000;
}
.user-menu .item:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}
.user-menu .item:active {
  background: rgba(0, 0, 0, 0.2);
}
@keyframes user-menu {
  0% {
    scale: 0.9;
    translate: 0.5em -0.5em;
    opacity: 0;
  }
  100% {
    scale: 1;
    translate: 0 0;
    opacity: 1;
  }
}
.bottom-buffer {
  padding: 3em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .bottom-buffer {
    padding: 0;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(to bottom, #a70ca8, #000);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 70px;
  width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  z-index: 99;
  user-select: none;
}
@media only screen and (min-width: 500px) {
  .footer {
    max-width: 80%;
  }
}
@media only screen and (min-width: 1500px) {
  .footer {
    max-width: 60%;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .footer {
    bottom: 0.5em;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 0 15px 5px #000;
  }
}
.footer .item {
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.3em;
  color: #fff;
  text-shadow: 0 0 20px #000, 0 0 20px #000;
  filter: drop-shadow(0 0 0.75rem #000);
  border-radius: 10%;
  padding: 0.4em;
  padding-bottom: 0;
  height: 60px;
  aspect-ratio: 1 !important;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .footer .item {
    font-size: 1.5em;
  }
}
.footer .item i {
  display: grid;
  place-items: center;
  width: 30px;
  transition: all 0.2s ease-in-out;
}
.footer .item small {
  font-size: 0.55em;
  font-weight: bolder;
}
.footer .item img {
  translate: -0.5px -5px;
  scale: 1.5 2;
  width: 28px;
  height: 28px;
  margin-bottom: -0.2em;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .footer .item img {
    scale: 1.8 2.2;
    width: 30px;
    height: 30px;
  }
}
.footer .item:hover {
  scale: 1.075;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
.footer .item.active {
  scale: 1.075;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
.footer .item.active img {
  margin-top: -3px;
}
.footer .item.active i {
  margin-top: -5px;
}
.footer .item.active:after {
  display: none;
  content: " ";
  position: absolute;
  bottom: 2.5px;
  background: #fff;
  height: 5px;
  width: 5px;
  border-radius: 100%;
  box-shadow: 0 0 10px #000;
  animation: grow 0.2s ease-in-out;
}
.skin {
  padding: 0 1em;
  height: 100%;
  overflow: scroll;
  user-select: none;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .skin {
    padding: 0 5em;
  }
}
.skin .fences {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.75em;
  row-gap: 2em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .skin .fences {
    column-gap: 1em;
  }
}
.skin .fences .fence {
  padding: 0.5em;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5) inset;
}
.skin .fences .fence .label {
  padding: 0.25em 0.5em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.3em;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.skin .item {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 1em;
  border-radius: 100%;
  width: 110px;
  height: 110px;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5) inset;
  filter: grayscale(50%) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .skin .item {
    width: 150px;
    height: 150px;
  }
}
.skin .item.active {
  outline: 3px solid #fff;
  box-shadow: 0 0 5px 10px #000;
}
.skin .item.locked {
  pointer-events: none;
  filter: grayscale(50%) brightness(50%);
}
.skin .item:not(.locked).active {
  filter: grayscale(0%) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  scale: 1.2;
}
.skin .item:not(.locked).active:hover {
  scale: 1.25;
}
.skin .item:not(.locked):hover {
  filter: grayscale(0%) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  scale: 1.05;
  background-size: 105%;
}
.skin .item .label {
  position: absolute;
  display: block;
  font-size: 1.3em;
  font-weight: bolder;
  text-align: center;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: #000;
  text-shadow: 0 0 5px #fff;
  white-space: pre-wrap;
  user-select: none;
}
.skin .pane {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.75em;
  row-gap: 2em;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 20px 30px -10px;
  background: #fff;
  padding: 1em 3em;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-bottom: 1.5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .skin .pane {
    column-gap: 1em;
  }
}
.skin .pane .item {
  width: 100px;
  height: 100px;
}
.skin .pane .item .label {
  text-shadow: 0 0 0 transparent;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-weight: regular;
  font-size: 0.8em;
  border-radius: 10px;
  padding: 0.5em 1em;
  top: 100%;
  width: 120%;
  min-width: 100%;
}
.skin .lightdark {
  display: flex;
  justify-content: space-around;
  margin: 2em 0;
}
.skin .lightdark .light, .skin .lightdark .dark {
  cursor: pointer;
  width: 100px;
  border-radius: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease-in-out;
}
.skin .lightdark .light.active, .skin .lightdark .dark.active {
  outline: 4px solid #fff;
  box-shadow: 0 0 5px 10px #000;
}
.skin .lightdark .light:hover, .skin .lightdark .dark:hover {
  scale: 1.05;
  filter: brightness(110%);
}
.skin .lightdark .light {
  background: #fff;
}
.skin .lightdark .dark {
  background: #333;
}
.login {
  user-select: none;
  font-size: 0.9em;
}
@media only screen and (min-width: 1500px) {
  .login {
    padding: 0 15em;
  }
}
.login .btn-prime, .login .btn-facebook, .login .btn-google, .login .btn-discord {
  margin: 0.5em auto;
  width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .login .btn-prime, .login .btn-facebook, .login .btn-google, .login .btn-discord {
    width: 50%;
  }
}
.login .login-help {
  display: block;
  text-align: right;
  font-size: 0.95em;
  margin: 0.25em 0;
}
.login .form-check {
  filter: saturate(0);
  scale: 1.1;
}
.help-login {
  margin-top: 1em;
  scale: 1.1;
  translate: 0 10px;
}
.hr-text {
  border-color: var(--first-color);
}
.hr-text span {
  font-weight: bolder;
  color: var(--first-color);
  background: var(--bg);
  border-color: var(--first-color);
}
.page-main #contents {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.page-main #contents b {
  font-size: 1.2em;
}
.page-main #contents .cont_link {
  cursor: pointer;
  text-decoration: underline !important;
}
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 5dvw;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .news-header {
    margin: 0 2dvw;
  }
}
.news-header a {
  transition: all 0.2s ease-in-out;
}
.news-header a img {
  margin-bottom: -0.5em;
  width: 135px;
}
@media only screen and (min-width: 500px) {
  .news-header a img {
    width: 150px;
    margin-bottom: -0.25em;
  }
}
@media only screen and (min-width: 1500px) {
  .news-header a img {
    width: 200px;
    margin-bottom: -0.25em;
  }
}
.news-header a:hover {
  scale: 1.15;
}
.all-articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
  margin: 0 5dvw;
  margin-bottom: 2em !important;
}
@media only screen and (min-width: 500px) {
  .all-articles {
    margin: 0 -4dvw;
  }
}
@media only screen and (min-width: 1500px) {
  .all-articles {
    margin: 0;
  }
}
.all-articles .item {
  cursor: pointer;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 0.9em;
  aspect-ratio: 16/11;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 25px 20px -20px rgba(0, 0, 0, 0.45);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  opacity: 0;
  user-select: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px) {
  .all-articles .item {
    min-width: calc(20dvw + 200px);
    max-width: 28%;
    max-height: 330px;
    font-size: 0.8em;
    aspect-ratio: 1/1.2;
  }
}
@media only screen and (min-width: 1500px) {
  .all-articles .item {
    min-width: 500px;
    max-height: 400px;
    aspect-ratio: 1;
    font-size: 1.15em;
  }
}
.all-articles .item.fade-in {
  animation: fadeUp 1s ease-in-out;
}
.all-articles .item:hover {
  background-size: 110%;
  filter: brightness(110%);
  scale: 1.05;
}
@media only screen and (min-width: 500px) {
  .all-articles .item:hover {
    background-size: cover;
  }
}
.all-articles .item:hover .content .inner {
  scale: 1.025;
  translate: 0 -10px;
}
.all-articles .item .content {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 2em;
  width: 100%;
  height: 100%;
  color: #fff;
  background: linear-gradient(to bottom, transparent, #000);
  transition: all 0.2s ease-in-out;
}
.all-articles .item .content .inner {
  transition: all 0.2s ease-in-out;
}
.all-articles .item .content .inner .badge {
  width: max-content;
  background: var(--second-color);
  border-radius: 10px;
  box-shadow: 0 2px 15px #000;
  letter-spacing: 2px;
  text-shadow: 0 0 5px #000, 0 2px 15px #000;
  margin-bottom: 1em;
}
.all-articles .item .content .inner b {
  display: block;
  font-size: 1.2em;
}
.all-articles.smaller .item {
  display: block;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .all-articles.smaller .item {
    display: inline;
    width: 100px;
    aspect-ratio: 16/11;
  }
}
@media only screen and (min-width: 1500px) {
  .all-articles.smaller .item {
    font-size: 1em;
  }
}
.all-articles.smaller .item:nth-of-type(1n+4) {
  display: none;
}
.anim-fadeup {
  opacity: 0;
}
.article-view .article-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100dvw;
  height: auto;
  padding: 12em 0 6em 0;
  margin: 0 calc(var(--body-padding) * -1);
  margin-top: -5em;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 H1200 V90 Q1050,95 900,90 Q750,85 600,90 Q450,95 300,90 Q150,85 0,90 Z' fill='black'/></svg>");
  mask-size: 500% 100%;
  mask-position: bottom 200px;
  mask-repeat: no-repeat;
  margin-bottom: -3em;
  pointer-events: none;
}
@media only screen and (min-width: 1500px) {
  .article-view .article-hero {
    padding: 9em 0 6em 0;
    margin-top: -10em;
  }
}
@media only screen and (min-width: 1500px) {
  .article-view .article-hero {
    mask-size: 120% 100%;
    mask-position: bottom;
  }
}
@media only screen and (min-width: 1500px) {
  .article-view .article-hero {
    margin-bottom: 0;
  }
}
.article-view .article-hero .hero {
  position: absolute;
  height: 100%;
  width: 100%;
  scale: 1.1;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(1rem);
  z-index: -1;
}
.article-view .article-hero .content {
  margin: 0 1em;
  text-align: center;
  color: #fff;
}
.article-view .article-hero .content .icon {
  max-height: 300px;
  border-radius: 10px;
  margin-bottom: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-view .article-hero .content .icon {
    max-height: 350px;
  }
}
.article-view .article-share-btn {
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin-top: -3em;
  margin-right: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  width: 35px;
  height: 35px;
  font-size: 1.2em;
  color: #fff;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(40deg, var(--first-color), var(--second-color));
  padding: 0.5em;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-view .article-share-btn {
    margin-top: -6em;
  }
}
.article-view .article-share-btn:hover {
  scale: 1.1;
  filter: brightness(120%);
}
.article-view .split {
  display: block;
  margin: 0 5dvw;
}
@media only screen and (min-width: 1500px) {
  .article-view .split {
    display: flex;
    gap: 1em;
  }
}
@media only screen and (min-width: 500px) {
  .article-view .split {
    margin: 0;
  }
}
@media only screen and (min-width: 1500px) {
  .article-view .split {
    margin: 0;
  }
}
.article-view .split .article-body {
  opacity: 0;
  font-size: 1.1em;
  width: 100%;
}
.article-view .split .article-body blockquote {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1em;
  margin: 1em 0;
}
.article-view .split .article-body .thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  width: 100%;
}
.article-view .split .article-body .thumbs a {
  text-align: center;
}
.article-view .split .article-body .thumbs img {
  pointer-events: none;
  max-width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-view .split .article-body .thumbs img {
    max-width: 45%;
  }
}
.article-view .split .article-body .in-article-preview {
  color: #fff !important;
}
.article-view .split .article-body .in-article-preview.active {
  cursor: pointer;
  scale: 1;
  padding: 0.25em 0.5em;
  border-radius: 50px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  background: #111214;
}
.article-view .split .article-body .in-article-preview:hover {
  scale: 1.01;
}
.article-view .split .article-body .tiktok-embed {
  margin: 0 auto;
}
.article-view .split .article-body .twitter-embed {
  margin-top: 1em;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: max-content;
}
.article-view .split .article-body .twitter-embed .twitter-tweet {
  display: none;
  margin: 0 auto;
}
.article-view .split .article-related {
  position: sticky;
  top: 10px;
  flex: 1;
  height: max-content;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-view .split .article-related {
    min-width: 25%;
    max-width: 25%;
    padding-left: 2em;
    border-left: 1px solid rgba(0, 0, 0, 0.25);
  }
}
.article-view .split .article-related .cc-box {
  margin-top: 2em;
  background-image: url(https://get-pri.me/images/assets/candycreations/cc-blank.png);
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 100%;
  background-position: center;
  border-radius: 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-view .split .article-related .cc-box {
    margin: 0;
  }
}
.article-view .split .article-related .cc-box .cc-logo {
  max-width: 80%;
  margin-top: -4em;
}
.article-view .split .article-related .cc-box h3 {
  padding: 0.5em 0;
  font-weight: bolder;
  font-family: verdana;
  color: #fff;
  text-shadow: #212d64 5px 0px 0px, #212d64 4.90033px 0.99335px 0px, #212d64 4.60531px 1.94709px 0px, #212d64 4.12668px 2.82321px 0px, #212d64 3.48353px 3.58678px 0px, #212d64 2.70151px 4.20736px 0px, #212d64 1.81179px 4.6602px 0px, #212d64 0.84984px 4.92725px 0px, #212d64 -0.146px 4.99787px 0px, #212d64 -1.13601px 4.86924px 0px, #212d64 -2.08073px 4.54649px 0px, #212d64 -2.94251px 4.04248px 0px, #212d64 -3.68697px 3.37732px 0px, #212d64 -4.28444px 2.57751px 0px, #212d64 -4.71111px 1.67494px 0px, #212d64 -4.94996px 0.7056px 0px, #212d64 -4.99147px -0.29187px 0px, #212d64 -4.83399px -1.27771px 0px, #212d64 -4.48379px -2.2126px 0px, #212d64 -3.95484px -3.05929px 0px, #212d64 -3.26822px -3.78401px 0px, #212d64 -2.4513px -4.35788px 0px, #212d64 -1.53666px -4.75801px 0px, #212d64 -0.56076px -4.96846px 0px, #212d64 0.4375px -4.98082px 0px, #212d64 1.41831px -4.79462px 0px, #212d64 2.34258px -4.41727px 0px, #212d64 3.17346px -3.86382px 0px, #212d64 3.87783px -3.15633px 0px, #212d64 4.4276px -2.32301px 0px, #212d64 4.80085px -1.39708px 0px, #212d64 4.98271px -0.41545px 0px;
}
.article-view .split .article-related .similar-articles {
  display: none;
  flex-direction: column;
  gap: 0.5em;
}
@media only screen and (min-width: 1500px) {
  .article-view .split .article-related .similar-articles {
    display: flex;
  }
}
.article-view .split .article-related .similar-articles .item {
  position: relative;
  height: 170px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: all 0.2s ease-in-out;
}
.article-view .split .article-related .similar-articles .item .inner {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 10%, #000);
  color: #fff;
  text-shadow: 0 2px 5px #000, 0 2px 5px #000, 0 2px 15px #000;
  padding: 0.5em 1em;
  width: 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.article-view .split .article-related .similar-articles .item .inner small {
  opacity: 0.8;
  font-size: 0.8em;
}
.article-view .split .article-related .similar-articles .item:hover {
  scale: 1.1;
}
.article-view .article-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.article-view .article-tags a {
  background: #fff;
  border: 4px solid var(--first-color);
  border-radius: 20px;
  padding: 0.5em;
  font-weight: bolder;
  text-decoration: none;
  color: var(--font);
  transition: all 0.5s ease-in-out;
}
.article-view .article-tags a:hover {
  scale: 1.05;
  filter: brightness(120%);
}
.article-view .references {
  text-align: center;
}
.bmac-outer {
  display: inline-block;
  cursor: pointer;
  position: relative;
  background: linear-gradient(to bottom, #d52a36, #fff, #1da9d3) !important;
  color: #333 !important;
  font-weight: bolder;
  font-size: 1em;
  text-decoration: none;
  padding: 0.5em;
  padding-left: 3em;
  border-radius: 15px;
  box-shadow: 0 5px 15px #000;
  transition: all 0.2s ease-in-out;
}
.bmac-outer img {
  position: absolute;
  top: -60%;
  left: -10%;
  width: 90px !important;
  transition: all 0.2s ease-in-out;
  filter: drop-shadow(0 2px 15px #333);
}
.bmac-outer:hover {
  filter: brightness(115%);
  scale: 1.05;
}
.bmac-outer:hover img {
  scale: 1.1;
}
.article-info {
  display: flex;
  justify-content: space-around;
}
.article-info .written-by {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5em;
}
.article-info .written-by img {
  width: 15dvw;
  max-width: 65px;
  min-width: 50px;
  border-radius: 100%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
  margin-right: 1em;
}
.article-share {
  display: none;
  margin-top: -3em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-share {
    margin-top: -2em;
  }
}
.article-share .article-socials {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.article-share .article-socials a {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  width: 50px;
  aspect-ratio: 1/1;
  color: #fff !important;
  font-size: 1.5em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  background: #555;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}
.article-share .article-socials a:hover {
  scale: 1.1;
  filter: brightness(130%);
}
.article-share .article-socials a.share-fb {
  background: #4267b2;
}
.article-share .article-socials a.share-x {
  background: #000;
}
.article-share .article-socials a.share-redd {
  background: #ff4500;
}
.article-share .article-socials a.share-whatsapp {
  background: #00e676;
}
.article-share .article-socials a.share-messenger {
  background: #009afe;
}
.article-next-prev {
  display: flex;
  justify-content: space-around;
}
.article-next-prev .sep {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0.5em;
}
.article-next-prev .item {
  position: relative;
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 1em;
  transition: all 0.2s ease-in-out;
  padding: 1em;
  background-size: cover;
  background-position: center;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .article-next-prev .item {
    max-width: 25%;
  }
}
.article-next-prev .item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000);
  z-index: 1;
}
.article-next-prev .item .txt {
  z-index: 2;
}
.article-next-prev .item.prev {
  justify-content: flex-end;
}
.article-next-prev .item.next:hover {
  translate: -5px;
}
.article-next-prev .item.next:hover .fa {
  translate: -10px;
}
.article-next-prev .item.prev:hover {
  translate: 5px;
}
.article-next-prev .item.prev:hover .fa {
  translate: 10px;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1em;
}
.socials .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  line-height: 2em;
  transition: all 0.2s ease-in-out;
}
.socials .item:hover .fab {
  scale: 1.15;
}
.socials .item .fab {
  display: grid;
  place-items: center;
  background: #aaa;
  color: #fff;
  font-size: 2em;
  text-decoration: 0 0 15px #000;
  max-width: 70px;
  padding: 0.5em;
  margin: 0 auto;
  aspect-ratio: 1;
  transition: all 0.2s ease-in-out;
}
.socials .item.twitter .fab {
  background: #000;
}
.socials .item.youtube .fab {
  background: red;
}
.socials .item.facebook .fab {
  background: #3b5997;
}
.socials .item.tiktok .fab {
  background: linear-gradient(to right, #76f8f4, #000 10%, #000 50%, #000 90%, #fe2c55);
}
.socials .item.discord .fab {
  background: #5865f2;
}
.socials .item.youtube .fab {
  background: red;
}
.socials .item.instagram .fab {
  background: linear-gradient(to right, #ee9e2e, #e8474a, #8340c6);
}
.terms-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  font-size: 0.9em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .terms-links {
    justify-content: space-around;
    flex-direction: row;
    gap: 0.5em;
  }
}
.fr-element.fr-view {
  margin: 0 1em;
  font-size: 1.1em;
}
.fr-element.fr-view blockquote {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 1em;
  margin: 1em 0;
  color: #000;
}
.fr-element.fr-view .thumbs {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .fr-element.fr-view .thumbs {
    justify-content: center;
    flex-direction: row;
  }
}
.fr-element.fr-view .thumbs a {
  text-align: center;
}
.fr-element.fr-view .thumbs img {
  pointer-events: none;
  max-width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .fr-element.fr-view .thumbs img {
    max-width: 50%;
  }
}
.fr-element.fr-view .tiktok-embed {
  margin: 0 auto;
}
.fr-element.fr-view .twitter-embed {
  margin-top: 1em;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: max-content;
}
.fr-element.fr-view .twitter-embed .twitter-tweet {
  display: none;
  margin: 0 auto;
}
.jumbo {
  transition: all 0.2s ease-in-out;
}
.jumbo:hover {
  scale: 1.1;
  box-shadow: 0 0 15px 15px var(--first-color);
}
.emojis {
  display: flex;
  justify-content: space-around;
}
.emojis .item {
  display: flex;
  flex-direction: column;
  user-select: none;
  cursor: pointer;
  font-size: 3.5em;
  transition: 0.2s ease-in-out;
}
.emojis .item:hover {
  scale: 1.2;
}
.emojis .item:active {
  scale: 1.1;
}
.emojis .item span {
  display: block;
  margin-top: -0.5em;
  font-size: 0.5em;
}
@keyframes growText {
  from {
    font-size: 0;
  }
  to {
    font-size: 0.5em;
  }
}
.comments {
  margin: 0 2dvw;
  margin-bottom: 2em;
}
.comments .comment {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1em;
}
.comments .comment .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 0.5em;
  background-color: #ccc;
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.comments .comment .comment-block {
  padding: 0.5em;
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  width: 100%;
}
.comments .comment .comment-block .comment-title {
  margin-bottom: 0.25em;
}
.comments .comment .comment-block .comment-title .name {
  display: inline-block;
  font-weight: bolder;
  font-size: 1.1em;
  margin-right: 0.5em;
}
.comments .comment .comment-block .comment-title .date {
  opacity: 0.8;
}
.comments .comment .comment-block .comment-body {
  padding: 1em 0.5em;
}
.comments .comment .comment-block .comment-opts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  background: rgba(0, 0, 0, 0.1);
  margin: -0.5em;
  padding: 0.25em 0.5em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.comments .comment .comment-block .comment-opts .like {
  font-size: 1.25em;
}
.comments .comment .comment-block .comment-opts .btn {
  font-weight: bolder;
  font-size: 0.8em;
  padding: 0.25em 1em;
  transition: all 0.2s ease-in-out;
}
.comments .comment .comment-block .comment-opts .btn:hover {
  scale: 1.05;
}
.main-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100dvw;
  height: 450px;
  padding: 12em 0 6em 0;
  margin: 0 calc(var(--body-padding) * -1);
  margin-top: -5em;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 H1200 V90 Q1050,95 900,90 Q750,85 600,90 Q450,95 300,90 Q150,85 0,90 Z' fill='black'/></svg>");
  mask-size: 500% 100%;
  mask-position: bottom 200px;
  mask-repeat: no-repeat;
  margin-bottom: -2em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .main-hero {
    height: 550px;
  }
}
@media only screen and (min-width: 1500px) {
  .main-hero {
    padding: 9em 0 6em 0;
    margin-top: -10em;
  }
}
@media only screen and (min-width: 1500px) {
  .main-hero {
    mask-size: 120% 100%;
    mask-position: bottom;
  }
}
.main-hero .hero {
  position: absolute;
  height: 100%;
  width: 100%;
  scale: 1.1;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}
.main-hero:hover .content {
  scale: 1.05;
}
.main-hero .content {
  pointer-events: none;
  margin: 0 1em;
  text-align: center;
  color: #fff;
  margin-bottom: -5em;
  transition: 0.3s ease-in-out;
}
@media only screen and (min-width: 1500px) {
  .main-hero .content {
    margin-bottom: -10em;
  }
}
.main-hero .content.collectorseries {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(232, 169, 25, 0.5);
  backdrop-filter: blur(0.5em);
  border-radius: 1em;
  padding: 0.5em 1em;
}
.main-hero .content.orangekream {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(243, 131, 2, 0.5);
  backdrop-filter: blur(0.5em);
  border-radius: 1em;
  padding: 0.5em 1em;
}
.main-hero .content.orangekream {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(167, 12, 168, 0.5);
  backdrop-filter: blur(0.5em);
  border-radius: 1em;
  padding: 0.5em 1em;
}
.filter-heading {
  margin: -1em;
}
.filter-heading h3 {
  background: linear-gradient(to right, var(--second-color), var(--first-color));
  border-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.15em 0.5em;
  color: #fff;
}
#filters {
  background: rgba(0, 0, 0, 0.05);
  color: var(--font);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  padding: 1em;
  margin-top: 3em;
  margin-bottom: 2em;
}
#filters #filter-list {
  display: none;
}
#filters .grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 0.5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #filters .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
  }
}
#filters .grid .dropdown {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  flex: 1 1 25%;
  min-width: 25%;
  box-sizing: border-box;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #filters .grid .dropdown {
    max-width: 30%;
  }
}
#filters .grid .dropdown.on .dropdown-header {
  background: linear-gradient(to right, rgba(167, 12, 168, 0.9), rgba(0, 0, 0, 0.9));
}
#filters .grid .dropdown .dropdown-header {
  position: relative;
  user-select: none;
  cursor: pointer;
  font-weight: bolder;
  background: rgba(0, 0, 0, 0.2);
  color: #fff !important;
  border-radius: 5px;
  padding: 0.5em;
  transition: all 0.25s ease-in-out;
}
#filters .grid .dropdown .dropdown-header:hover:not(.active) {
  filter: brightness(150%);
}
#filters .grid .dropdown .dropdown-header .fas {
  position: absolute;
  top: 0.75em;
  right: 1em;
}
#filters .grid .dropdown .sub-options {
  display: none;
  display: fixed;
  bottom: 0;
  width: 100.75%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #filters .grid .dropdown .sub-options {
    position: absolute;
    top: 2.2em;
    bottom: initial;
    left: 0;
    margin-left: -2.5px;
    max-height: 400px;
  }
}
#filters .grid .dropdown .sub-options .opt {
  cursor: pointer;
  padding: 0.5em;
  font-size: 0.9em;
  font-weight: bolder;
  transition: all 0.25s ease-in-out;
}
#filters .grid .dropdown .sub-options .opt .form-check {
  display: inline;
}
#filters .grid .dropdown .sub-options .opt .form-check .form-check-input, #filters .grid .dropdown .sub-options .opt .form-check .form-check-input:checked {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: #fff !important;
}
#filters .grid .dropdown .sub-options .opt:hover {
  background: rgba(167, 12, 168, 0.25);
}
#filters .grid .dropdown .sub-options .opt.active {
  background: rgba(167, 12, 168, 0.5);
}
#filters .grid .dropdown.active .dropdown-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(0, 0, 0, 0.65);
  scale: 1.01;
}
#filters .grid .dropdown.active .sub-options {
  display: block;
}
hr {
  display: block;
  background-color: #a70ca8;
  box-shadow: 0 20px 25px -5px rgba(167, 12, 168, 0.2), 0 8px 10px -6px rgba(167, 12, 168, 0.2);
}
.search-br {
  display: block;
  height: 1px !important;
}
.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.75em;
  row-gap: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .categories {
    column-gap: 1em;
    row-gap: 2em;
  }
}
.categories .item {
  position: relative;
  display: grid;
  place-items: end center;
  background: rgba(0, 0, 0, 0.15);
  aspect-ratio: 3/1;
  padding: 0 2em;
  line-height: 25px;
  border-radius: 10px;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .categories .item {
    padding: 1em 2em;
    font-size: 1.5em;
    width: auto;
  }
}
.categories .item:hover {
  scale: 1.05;
}
.categories .item:hover b {
  display: block;
  scale: 1.1;
}
.categories .item b {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  padding: 0.5em 0.25em;
  transition: all 0.2s ease-in-out;
}
.categories .item img {
  margin-top: -1em;
  margin-bottom: 0.5em;
  scale: 1.5;
  width: 85px;
  translate: 0 -0.55em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .categories .item img {
    margin-top: -1em;
    width: 200px;
    scale: 1;
    translate: 0 0;
  }
}
.index-main .sub-header {
  margin: 0 auto;
  margin-bottom: 0.75em;
  font-size: 1.25em;
  font-weight: bolder;
}
.index-main .search-nav {
  width: 100%;
  gap: 2px;
}
.index-main .search-nav a {
  max-width: 33%;
  width: 100%;
  padding: 1em 0;
  font-size: 0.8em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .search-nav a {
    padding: 0.3em 0;
    font-size: 1.2em;
  }
}
.index-main .collection-panel {
  background-image: linear-gradient(0, rgba(192, 192, 192, 0.34) 0%, rgba(192, 192, 192, 0.34) 25%, rgba(130, 130, 130, 0.34) 25%, rgba(130, 130, 130, 0.34) 50%, rgba(151, 151, 151, 0.34) 50%, rgba(151, 151, 151, 0.34) 75%, rgba(171, 171, 171, 0.34) 75%, rgba(171, 171, 171, 0.34) 100%), linear-gradient(90deg, #e7e7e7 0%, #e7e7e7 20%, #fdfdfd 20%, #fdfdfd 40%, #e0e0e0 40%, #e0e0e0 60%, #f6f6f6 60%, #f6f6f6 80%, #efefef 80%, #efefef 100%);
  border-radius: 20px;
  margin: 0 auto;
  width: max-content;
  border: 3px solid rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 5px, rgba(0, 0, 0, 0.3) 0px 10px, rgba(0, 0, 0, 0.2) 0px 15px, rgba(0, 0, 0, 0.1) 0px 20px, rgba(0, 0, 0, 0.05) 0px 25px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.index-main .collection-panel img {
  height: 300px;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 20px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25));
  transition: all 0.2s ease-in-out;
}
.index-main .collection-panel:hover {
  scale: 1.05;
}
.index-main .collection-panel:hover img {
  filter: brightness(125%);
}
.index-main .products-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.75em;
  row-gap: 3em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .products-list {
    column-gap: 1em;
  }
}
.index-main .products-list .item {
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-width: 125px;
  max-width: 150px;
  aspect-ratio: 1;
  border-radius: 20px;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
@media only screen and (min-width: 500px) {
  .index-main .products-list .item {
    max-width: 150px;
  }
}
@media only screen and (min-width: 1500px) {
  .index-main .products-list .item {
    max-width: 200px;
  }
}
.index-main .products-list .item .flag {
  position: absolute;
  top: -5px;
  left: 5px;
  font-size: 2em;
  z-index: 99;
}
.index-main .products-list .item .icon {
  margin-top: -3.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
  transition: all 0.2s ease-in-out;
}
.index-main .products-list .item .icon.lunchly {
  width: 80%;
  margin-top: 0em;
}
.index-main .products-list .item b {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  border-radius: 20px;
  padding: 0.75em 0.5em;
}
@media only screen and (min-width: 1500px) {
  .index-main .products-list .item b {
    font-size: 0.95em;
  }
}
.index-main .products-list .item .small {
  display: block;
  width: max-content;
  background: #000;
  margin: -0.7em auto;
  margin-top: 0.5em;
  padding: 0.1em 0.5em;
  margin-bottom: -15px;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 0.8em;
  letter-spacing: 4px;
}
.index-main .products-list .item .badge {
  display: block;
  position: absolute;
  left: 50%;
  top: 160px;
  translate: -50%;
  scale: 1.25;
  width: 50%;
  color: #fff;
  box-shadow: 0 2px 5px #000;
  text-shadow: 0 2px 5px #000;
}
.index-main .products-list .item .unavailable {
  position: absolute;
  left: 50%;
  top: 30%;
  translate: -50%;
  width: max-content;
  rotate: -35deg;
  z-index: 2;
}
.index-main .products-list .item:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  scale: 1.025;
  filter: brightness(115%);
}
.index-main .products-list .item:hover .icon {
  scale: 1.075;
}
.index-main .products-list .item:active {
  scale: 0.9;
  filter: brightness(90%);
}
.index-main .products-list.related {
  row-gap: 3em;
}
.index-main .products-list.related .item {
  position: relative;
  max-width: 160px;
}
.index-main .products-list.related .item.affiliate {
  max-width: 100px;
}
.index-main .products-list.related .item .flag {
  position: absolute;
  top: -5px;
  left: 5px;
  font-size: 2em;
  z-index: 99;
}
.index-main .products-list.related .item .icon {
  width: 100%;
  margin-top: -4em;
}
.index-main .products-list.related .item .icon.lunchly {
  width: 60%;
  margin-top: 0em;
}
.index-main .products-list.related .item b {
  line-height: 18px;
  padding: 0.75em 0.25em;
}
.index-main .products-list.related .item .badge {
  scale: 1.2;
  rotate: -20deg;
}
.index-main .products-list.related .item .small {
  display: block;
  width: max-content;
  background: #000;
  margin: -0.7em auto;
  margin-top: 0.5em;
  padding: 0.1em 0.5em;
  margin-bottom: -15px;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 0.8em;
  letter-spacing: 4px;
}
.index-main .see-product .product-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100dvw;
  height: auto;
  padding: 12em 0 6em 0;
  margin: 0 calc(var(--body-padding) * -1);
  margin-top: -5em;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 H1200 V90 Q1050,95 900,90 Q750,85 600,90 Q450,95 300,90 Q150,85 0,90 Z' fill='black'/></svg>");
  mask-size: 500% 100%;
  mask-position: bottom 200px;
  mask-repeat: no-repeat;
  margin-bottom: -3em;
}
@media only screen and (min-width: 1500px) {
  .index-main .see-product .product-hero {
    padding: 9em 0 6em 0;
    margin-top: -10em;
  }
}
@media only screen and (min-width: 1500px) {
  .index-main .see-product .product-hero {
    mask-size: 120% 100%;
    mask-position: bottom;
  }
}
@media only screen and (min-width: 1500px) {
  .index-main .see-product .product-hero {
    margin-bottom: 0;
  }
}
.index-main .see-product .product-hero .hero {
  position: absolute;
  height: 100%;
  width: 100%;
  scale: 1.1;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(1rem);
  z-index: -1;
}
.index-main .see-product .product-hero .content {
  margin: 0 1em;
  text-align: center;
}
.index-main .see-product .product-hero .content .icon {
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
  max-width: 60%;
  border-radius: 10px;
  opacity: 0;
  animation: fadeUp 0.4s ease-in-out forwards 0.65s;
}
.index-main .see-product .product-hero .content .label {
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 1em 4em;
  margin-bottom: 1em;
  text-align: center;
  line-height: 15px;
  text-shadow: 0 2px 5px #000, 0 2px 15px #000;
  color: #fff;
  width: max-content;
  opacity: 0;
  z-index: 3;
  backdrop-filter: blur(0.2em);
  animation: fadeUp 0.6s ease-in-out forwards 0.65s;
}
.index-main .see-product .product-hero .content .label .flag-url {
  cursor: pointer !important;
  padding: 0.5em;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
.index-main .see-product .product-hero .content .label .flag-url:hover {
  background: rgba(255, 255, 255, 0.2);
}
.index-main .see-product .product-hero .content .label .type {
  background: #000;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: -2.2em;
  margin-bottom: 1em;
  padding: 0.5em;
  width: max-content;
  font-weight: bolder;
  font-size: 0.6em;
  letter-spacing: 5px;
}
.index-main .see-product .flavour-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: 30%, cover;
  background-attachment: fixed;
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  mask-size: 70%;
  margin: -1em;
  margin-top: -5em;
  padding: 3em 0 2em 0;
  mask-image: url(https://get-pri.me/images/wave2.png);
  mask-position: bottom left;
  mask-repeat: repeat-x;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .flavour-header {
    background-size: 20%, cover;
  }
}
@media only screen and (min-width: 500px) {
  .index-main .see-product .flavour-header {
    background-size: 20%, cover;
    margin: -1em -15vw;
    margin-top: -9em;
    padding: 5.5em 0 2em 0;
    mask-size: 20%;
  }
}
@media only screen and (min-width: 1500px) {
  .index-main .see-product .flavour-header {
    background-size: 15%, cover;
    margin: -1em -20vw;
    margin-top: -8em;
    padding: 7em 0 2em 0;
    mask-size: 20%;
  }
}
.index-main .see-product .flavour-header .blob {
  position: absolute;
  top: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 50dvw;
  max-width: 300px;
  aspect-ratio: 1/1;
  background: #fff;
  filter: blur(2em);
  z-index: 0;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .flavour-header .blob {
    background: rgba(255, 255, 255, 0.5);
  }
}
.index-main .see-product .flavour-header .icon {
  position: relative;
  max-width: 400px;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  animation: dropIn 0.5s ease-in-out forwards 0.5s;
}
.index-main .see-product .flavour-header .mockup {
  position: absolute;
  top: 0;
  left: 51%;
  top: 25%;
  translate: -50% -50%;
  width: 80px;
  z-index: 3;
  opacity: 0;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  animation: dropIn 0.7s ease-in-out forwards 0.5s;
}
.index-main .see-product .flavour-header .label {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 1em 4em;
  margin-bottom: 1em;
  text-align: center;
  line-height: 15px;
  text-shadow: 0 2px 5px #000, 0 2px 15px #000;
  color: #fff;
  width: max-content;
  opacity: 0;
  z-index: 3;
  animation: fadeUp 0.5s ease-in-out forwards 0.65s;
}
.index-main .see-product .flavour-header .label .flag-url {
  cursor: pointer !important;
  padding: 0.5em;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
.index-main .see-product .flavour-header .label .flag-url:hover {
  background: rgba(255, 255, 255, 0.2);
}
.index-main .see-product .flavour-header .label .type {
  background: #000;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: -2.2em;
  margin-bottom: 1em;
  padding: 0.5em;
  width: max-content;
  font-weight: bolder;
  font-size: 0.6em;
  letter-spacing: 5px;
}
.index-main .see-product .description {
  padding: 0 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .description {
    font-size: 1.2em;
  }
}
.index-main .see-product .description blockquote {
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 1em;
}
.index-main .see-product .description .credit {
  margin-left: auto;
  width: max-content;
  border-radius: 10px;
  padding: 0.25em 0.5em;
  color: #fff;
  background: #111214;
  font-size: 0.7em;
}
.index-main .see-product .specs ul li {
  list-style-position: inside;
}
.index-main .see-product .barcode {
  max-width: 200px;
}
.index-main .see-product .cc-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2em;
  padding: 1em 0;
  background-image: url(https://get-pri.me/images/assets/candycreations/cc-blank.png);
  background-size: 110%;
  max-width: 100%;
  background-position: center;
  border-radius: 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .cc-box {
    flex-direction: row;
  }
}
.index-main .see-product .cc-box:hover {
  scale: 1.05;
}
.index-main .see-product .cc-box .cc-logo {
  max-width: 200px;
}
.index-main .see-product .cc-box h3 {
  padding: 0.5em 0;
  font-weight: bolder;
  font-family: verdana;
  color: #fff;
  text-shadow: #212d64 5px 0px 0px, #212d64 4.90033px 0.99335px 0px, #212d64 4.60531px 1.94709px 0px, #212d64 4.12668px 2.82321px 0px, #212d64 3.48353px 3.58678px 0px, #212d64 2.70151px 4.20736px 0px, #212d64 1.81179px 4.6602px 0px, #212d64 0.84984px 4.92725px 0px, #212d64 -0.146px 4.99787px 0px, #212d64 -1.13601px 4.86924px 0px, #212d64 -2.08073px 4.54649px 0px, #212d64 -2.94251px 4.04248px 0px, #212d64 -3.68697px 3.37732px 0px, #212d64 -4.28444px 2.57751px 0px, #212d64 -4.71111px 1.67494px 0px, #212d64 -4.94996px 0.7056px 0px, #212d64 -4.99147px -0.29187px 0px, #212d64 -4.83399px -1.27771px 0px, #212d64 -4.48379px -2.2126px 0px, #212d64 -3.95484px -3.05929px 0px, #212d64 -3.26822px -3.78401px 0px, #212d64 -2.4513px -4.35788px 0px, #212d64 -1.53666px -4.75801px 0px, #212d64 -0.56076px -4.96846px 0px, #212d64 0.4375px -4.98082px 0px, #212d64 1.41831px -4.79462px 0px, #212d64 2.34258px -4.41727px 0px, #212d64 3.17346px -3.86382px 0px, #212d64 3.87783px -3.15633px 0px, #212d64 4.4276px -2.32301px 0px, #212d64 4.80085px -1.39708px 0px, #212d64 4.98271px -0.41545px 0px;
}
.index-main .see-product .product-about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
  padding: 0 1em;
  font-size: 1.15em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .product-about {
    row-gap: 1em;
  }
}
.index-main .see-product .product-about .item {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .product-about .item {
    width: 49%;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .index-main .see-product .product-about .item .spacer {
    display: inline-block;
    width: 1em;
  }
}
.index-main .see-product .product-about .item .flavour {
  display: inline-block;
  width: 25px;
  max-height: 25px;
  aspect-ratio: 1 !important;
  border-radius: 100%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  margin-right: 0.5em;
  margin-bottom: -0.25em;
}
.index-main .see-product #tiktok-embed {
  position: relative;
  display: none;
  background: #fff;
  padding: 0.5em;
  margin-bottom: 1em;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0px 25px 20px -20px rgba(0, 0, 0, 0.45);
}
.index-main .see-product #tiktok-embed .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5em;
}
.index-main .see-product #tiktok-embed .close:hover {
  background-size: 105%;
  filter: brightness(120%);
  scale: 1.05;
}
.index-main .see-product .tiktoks {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.index-main .see-product .tiktoks .item {
  opacity: 0;
  cursor: pointer;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 150px;
  aspect-ratio: 1/1.7;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0px 25px 20px -20px rgba(0, 0, 0, 0.45);
  transition: all 0.5s ease-in-out;
}
.index-main .see-product .tiktoks .item:hover {
  background-size: 105%;
  filter: brightness(120%);
  scale: 1.05;
}
.index-main .see-product .teamprime {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.index-main .see-product .teamprime .item {
  position: relative;
  opacity: 0;
  cursor: pointer;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 250px;
  aspect-ratio: 1.5/1.2;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0px 25px 20px -20px rgba(0, 0, 0, 0.45);
  transition: all 0.5s ease-in-out;
}
.index-main .see-product .teamprime .item:hover {
  background-size: 105%;
  filter: brightness(120%);
  scale: 1.05;
}
.index-main .see-product .teamprime .item .caption {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, #000);
  color: #fff;
  text-shadow: 0 2px 5px #000;
  font-size: 1.5em;
  width: 100%;
  padding: 1em;
  padding-top: 5em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.member-collections-link {
  font-size: 1em !important;
  word-wrap: break-word;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .member-collections-link {
    font-size: 1.5em !important;
  }
}
.split {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}
.regions {
  display: none;
  margin-bottom: 4em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1em 0.5em;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.regions * {
  user-select: none;
}
.regions .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.regions .inner .item {
  width: 100%;
  font-size: 1.3em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .regions .inner .item {
    width: 20%;
  }
}
.vendors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
  margin-top: 2em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendors {
    row-gap: 1em;
  }
}
.vendors.all-vendors .vendor {
  width: 150px;
}
.vendors .vendor {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  background: #fff;
  transition: all 0.2s ease-in-out;
}
.vendors .vendor:hover {
  scale: 1.05;
}
.vendors .vendor:hover img {
  scale: 1.25;
}
.vendors .vendor:hover .flag {
  scale: 1.1;
}
.vendors .vendor img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1/0.8;
  width: 150px;
  transition: all 0.2s ease-in-out;
}
.vendors .vendor .name {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 0.8em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0.5em 0;
}
.vendors .vendor .name .flag {
  position: absolute;
  top: -1.25em;
  right: 5px;
  font-size: 2em;
  transition: all 0.2s ease-in-out;
}
.vendor-view .store-img {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  height: 160px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendor-view .products-list {
    column-gap: 2.5em;
  }
}
.vendor-popup-bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  backdrop-filter: blur(0.2rem);
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}
.vendor-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 90dvw;
  min-width: 300px;
  translate: 5% -50%;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  filter: drop-shadow(0 2px 15px rgba(0, 0, 0, 0.7));
  z-index: 9999;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendor-popup {
    left: 50%;
    width: 50%;
    translate: -50% -50%;
  }
}
.vendor-popup .split {
  position: absolute;
  gap: 0.5em;
  padding: 0 0.5em;
  bottom: 0;
  width: 100%;
}
.vendor-popup .split .btn {
  display: grid;
  place-items: center;
  flex: 1;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendor-popup .split .btn {
    font-size: 1.2em;
  }
}
.vendor-popup .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.vendor-popup .inner .close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  padding: 0.5em;
  color: #fff;
  transition: all 0.2s ease-in-out;
  z-index: 10000;
}
.vendor-popup .inner .close:hover {
  scale: 1.1;
}
.vendor-popup .inner .flavour-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: 20%, cover;
  background-attachment: fixed;
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  mask-size: 70%;
  margin-bottom: 6em;
  mask-image: url(https://get-pri.me/images/wave2.png);
  mask-position: bottom left;
  mask-repeat: repeat-x;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendor-popup .inner .flavour-header {
    background-size: 20%, cover;
  }
}
@media only screen and (min-width: 500px) {
  .vendor-popup .inner .flavour-header {
    background-size: 40%, cover;
    mask-size: 20%;
  }
}
@media only screen and (min-width: 1500px) {
  .vendor-popup .inner .flavour-header {
    background-size: 20%, cover;
    mask-size: 20%;
  }
}
.vendor-popup .inner .flavour-header .blob {
  position: absolute;
  top: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 50dvw;
  max-width: 300px;
  aspect-ratio: 1/1;
  background: #fff;
  filter: blur(2em);
  z-index: 0;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .vendor-popup .inner .flavour-header .blob {
    background: rgba(255, 255, 255, 0.5);
  }
}
.vendor-popup .inner .flavour-header .icon {
  max-width: 300px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  animation: dropIn 0.5s ease-in-out forwards 0.5s;
}
.vendor-popup .inner .flavour-header .label {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 1em 4em;
  margin-bottom: 2em;
  text-align: center;
  line-height: 15px;
  text-shadow: 0 2px 5px #000, 0 2px 15px #000;
  color: #fff;
  width: max-content;
  opacity: 0;
  font-size: 1em;
  animation: fadeUp 0.5s ease-in-out forwards 0.65s;
}
.vendor-popup .inner .flavour-header .label .type {
  background: #000;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: -2.2em;
  margin-bottom: 1em;
  padding: 0.5em;
  width: max-content;
  font-weight: bolder;
  font-size: 0.6em;
  letter-spacing: 5px;
}
.find-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1em;
  animation: fadeUp 1s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .find-menu {
    flex-wrap: wrap;
    flex-direction: row;
  }
}
@media only screen and (min-width: 1500px) {
  .find-menu {
    gap: 2em;
  }
}
.find-menu .item {
  cursor: pointer;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 20px;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.4), 0 8px 10px -16px rgba(0, 0, 0, 0.4);
  width: 100%;
  padding: 1em 0;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 1500px) {
  .find-menu .item {
    padding: 1.5em;
    aspect-ratio: 2/1;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .find-menu .item {
    max-width: 400px;
  }
}
.find-menu .item:hover {
  border: 3px solid rgba(0, 0, 0, 0.4);
  scale: 1.025;
  filter: brightness(115%);
}
.find-menu .item:hover .icon {
  scale: 1.075;
}
.find-menu .item .icon {
  margin: 0 auto;
  margin-bottom: 0.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  aspect-ratio: 1;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .find-menu .item .icon {
    width: 130px;
  }
}
.find-menu .item b {
  font-size: 1.2em;
}
#map {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  background: #ccc;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #map {
    border-radius: 20px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
#map .text-center {
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #map .text-center {
    border-radius: 20px;
  }
}
#map #myloc {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 90px;
  right: 10px;
  width: 40px;
  aspect-ratio: 1;
  padding: 5px;
  z-index: 999;
  background: #fff;
  background-image: url(https://get-pri.me/images/location.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  #map #myloc {
    top: 7em;
  }
}
.gmnoprint {
  margin-top: -75px;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .gmnoprint {
    margin-top: 0;
  }
}
.gmnoprint a, .gmnoprint span, .gm-style-cc {
  display: none;
}
place-marker {
  font-weight: bolder;
  text-decoration: underline;
}
.all-regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
  margin-bottom: 2em !important;
}
@media only screen and (min-width: 500px) {
  .all-regions {
    margin: 0 -2vw;
  }
}
@media only screen and (min-width: 1500px) {
  .all-regions {
    margin: 0 -2vw;
  }
}
.all-regions .item {
  cursor: pointer;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 0.9em;
  width: 100%;
  max-width: 150px;
  height: 150px;
  background-color: #fff;
  box-shadow: 0px 25px 20px -20px rgba(0, 0, 0, 0.45);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  opacity: 0;
  user-select: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.all-regions .item:hover {
  background-size: 110%;
  filter: brightness(110%);
  scale: 1.05;
}
@media only screen and (min-width: 500px) {
  .all-regions .item:hover {
    background-size: cover;
  }
}
.all-regions .item:hover .content .inner {
  scale: 1.025;
}
.all-regions .item:hover .flag {
  scale: 1.2;
}
.all-regions .item .flag {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  font-size: 5em;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease-in-out;
}
.all-regions .item .content {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
  transition: all 0.2s ease-in-out;
}
.all-regions .item .content .inner {
  transition: all 0.2s ease-in-out;
}
.all-regions .item .content .inner b {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 0.5em;
  font-size: 1em;
}
.prime-team .teams, .prime-team .athletes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .prime-team .teams, .prime-team .athletes {
    column-gap: 2em;
  }
}
.prime-team .teams .team, .prime-team .athletes .team {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 20%;
  min-width: 120px;
  transition: all 0.2s ease-in-out;
}
.prime-team .teams .team img, .prime-team .athletes .team img {
  width: 100%;
}
.prime-team .teams .team b, .prime-team .athletes .team b {
  text-align: center;
  font-size: 1.2em;
}
.prime-team .teams .team:hover, .prime-team .athletes .team:hover {
  scale: 1.1;
  filter: brightness(120%);
}
.prime-team .teams .athlete, .prime-team .athletes .athlete {
  max-height: 250px;
}
.team-view .team-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100dvw;
  height: auto;
  padding: 12em 0 6em 0;
  margin: 0 calc(var(--body-padding) * -1);
  margin-top: -5em;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 H1200 V90 Q1050,95 900,90 Q750,85 600,90 Q450,95 300,90 Q150,85 0,90 Z' fill='black'/></svg>");
  mask-size: 500% 100%;
  mask-position: bottom 200px;
  mask-repeat: no-repeat;
  margin-bottom: -3em;
}
@media only screen and (min-width: 1500px) {
  .team-view .team-hero {
    padding: 9em 0 6em 0;
    margin-top: -10em;
  }
}
@media only screen and (min-width: 1500px) {
  .team-view .team-hero {
    mask-size: 120% 100%;
    mask-position: bottom;
  }
}
@media only screen and (min-width: 1500px) {
  .team-view .team-hero {
    margin-bottom: 0;
  }
}
.team-view .team-hero .hero {
  position: absolute;
  height: 100%;
  width: 100%;
  scale: 1.1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(1rem);
  z-index: -1;
}
.team-view .team-hero .content {
  margin: 0 1em;
  text-align: center;
  color: #fff;
}
.team-view .team-hero .content .icon {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  max-width: 400px;
  border-radius: 10px;
}
.team-view .team-hero .content .icon:not(.team) {
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.team-view .team-articles .item {
  display: block;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .team-view .team-articles .item {
    display: inline;
    width: 100px;
    aspect-ratio: 16/11;
  }
}
@media only screen and (min-width: 1500px) {
  .team-view .team-articles .item {
    font-size: 1em;
  }
}
.team-view .team-articles .item:nth-of-type(1n+4) {
  display: initial !important;
}
.search-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background: rgba(167, 12, 168, 0.2);
  border-radius: 10px;
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  transition: all 0.2s ease-in-out;
}
.search-title:hover {
  scale: 1.005;
  filter: brightness(115%);
}
#search_term {
  font-size: 1.5em;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.search-results .item {
  cursor: pointer;
  display: flex;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.search-results .item img {
  background-image: url(https://get-pri.me/images/loading.gif);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  border: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.search-results .item .text {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 1em;
  width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .search-results .item .text {
    flex-direction: row;
  }
}
.search-results .item .text small {
  text-align: right;
  opacity: 0.8;
}
.search-results .item:hover {
  scale: 1.025;
  filter: brightness(115%);
}
.user-profile {
  opacity: 0;
  margin-top: 4em;
}
.user-profile .cover {
  border-radius: 10px;
  padding: 2em;
  text-align: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 0 20px 25px -15px rgba(0, 0, 0, 0.7), 0 8px 10px -16px rgba(0, 0, 0, 0.4);
}
.user-profile .cover .displaypic {
  background-size: cover;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  width: 150px;
  aspect-ratio: 1;
  border: 7px solid #fff;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: -100px;
  margin-bottom: 1em;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.7), 0 8px 10px -16px rgba(0, 0, 0, 0.4);
}
.user-profile .cover .inner {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-shadow: 0 0 5px #000, 0 0 15px #000;
  width: max-content;
  margin: 0 auto;
  padding: 0.5em 2em;
  line-height: 20px;
}
.user-profile .cover .inner .details {
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .user-profile .cover .inner .details {
    flex-direction: row;
    gap: 2em;
  }
}
.user-profile .nav-btns {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 0.5em;
}
.user-profile .nav-btns span {
  position: relative;
  cursor: pointer;
  display: block;
  padding: 0.5em;
  color: #fff;
  font-size: 1.1em;
  text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
  border-radius: 10px;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.7), 0 8px 10px -16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  user-select: none;
}
.user-profile .nav-btns span:hover {
  filter: brightness(120%);
  scale: 1.05;
}
.user-profile .nav-btns span:active {
  filter: brightness(90%);
  scale: 0.95;
}
.user-profile .nav-btns span.active {
  scale: 1.05;
  filter: brightness(120%);
}
.user-profile .nav-btns span.active:after {
  content: " ";
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  translate: -50%;
  background: #fff;
  height: 10px;
  width: 20%;
  border-radius: 100%;
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.5);
  filter: blur(0.5em);
  animation: grow 0.2s ease-in-out;
}
.user-profile .card-columns {
  column-count: 1;
  gap: 5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .user-profile .card-columns {
    column-count: 2;
  }
}
.user-profile .card-columns .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 3em;
}
.user-profile .award-container .item {
  opacity: 0;
  display: flex;
  align-items: stretch;
  gap: 1em;
  background: #fff;
  color: var(--font) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 0 0 #000;
  margin-bottom: 0.5em;
  transition: all 0.5s ease-in-out;
}
.user-profile .award-container .item:hover {
  box-shadow: 0 2px 5px -5px #000;
  scale: 1.02;
}
.user-profile .award-container .item div:not(.inner) {
  flex: 1;
}
.user-profile .award-container .item .award-icon {
  background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%, rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%), linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%, rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%), linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%, rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%), linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%, rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%), linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%, rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%), linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%, rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%), linear-gradient(90deg, #333, #333);
  padding: 0.5em;
  max-width: 100px;
}
.user-profile .award-container .item .award-icon img {
  width: 100%;
}
.user-profile .award-container .item .award-description {
  position: relative;
  display: flex;
  align-items: center;
}
.user-profile .award-container .item .award-description span {
  position: absolute;
  top: 10px;
  right: 1em;
  vertical-align: super;
  font-size: 0.8em;
  float: right;
}
.showcase .shelf {
  display: flex;
  height: 30px;
  margin-top: 7em;
  margin-bottom: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .showcase .shelf {
    height: 102px;
    margin-top: 12em;
  }
}
.showcase .shelf .left {
  background: url(https://get-pri.me/images/assets/shelf_side.png);
  background-repeat: no-repeat;
  background-size: contain;
  min-width: 50px;
  max-width: 145px;
  transform: scaleX(-1);
}
.showcase .shelf .middle {
  flex: 1;
  display: flex;
  justify-content: center;
  background: url(https://get-pri.me/images/assets/shelf_mid.png);
  background-repeat: repeat-x;
  background-size: contain;
  height: 30px;
  width: 100dvw;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .showcase .shelf .middle {
    height: 35px;
  }
}
.showcase .shelf .middle .bottles {
  display: flex;
  justify-content: space-around;
  margin: 0 -2em;
  margin-top: -4em;
  translate: 0 -1.05em;
  width: 100%;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .showcase .shelf .middle .bottles {
    margin-top: -9em;
    gap: 0.15em;
  }
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .showcase .shelf .middle .bottles {
    translate: 0 -1em;
  }
}
.showcase .shelf .middle .bottles .bottle {
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 20%;
  min-width: 60px;
  max-width: 110px;
  max-height: 100px;
  filter: drop-shadow(0 2px 2px #000);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .showcase .shelf .middle .bottles .bottle {
    max-height: 200px;
  }
}
.showcase .shelf .right {
  background: url(https://get-pri.me/images/assets/shelf_side.png);
  background-repeat: no-repeat;
  background-size: contain;
  min-width: 50px;
  max-width: 145px;
}
.user-collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.user-collection .card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 250px;
  border: 1px solid #999;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: #26394d 0px 20px 30px -10px;
  transition: 0.2s ease-in-out;
}
.user-collection .card .w-blob {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  height: 100px;
  width: 100px;
  filter: blur(1.5rem);
  z-index: 0;
}
.user-collection .card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  translate: 0 -1em;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.user-collection .card .text {
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2;
}
.user-collection .card:hover {
  transform: scale(1.05);
}
.user-collection .card:hover img {
  transform: scale(1.07);
}
.welcome {
  opacity: 0;
  text-align: center;
  animation: dropIn 2s ease-in-out forwards;
}
.welcome .dp {
  width: 150px;
  aspect-ratio: 1/1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 0.5em solid var(--first-color);
  border-radius: 100%;
  animation: dropIn 3s ease-in-out forwards;
}
.welcome .username-reveal {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--second-color);
  border-radius: 10px;
  color: #000;
  padding: 0.5em 1em;
}
.welcome .modify-profile {
  border: 2px solid #fff;
  animation: border_glow 3s ease-in-out infinite;
}
.collections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.collections .item {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  aspect-ratio: 16/10;
  flex: 1;
  min-width: 350px;
  max-width: 500px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(50%);
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 1500px) {
  .collections .item:nth-child(1), .collections .item:nth-child(2) {
    min-width: 29dvw;
  }
}
.collections .item:hover {
  filter: grayscale(0);
  scale: 1.05;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 14px 28px, rgba(0, 0, 0, 0.5) 0px 10px 10px;
}
.collections .item:hover:nth-child(even) {
  rotate: -1deg;
}
.collections .item:hover:nth-child(odd) {
  rotate: 1deg;
}
.collections .item:hover .text {
  scale: 1.1;
  bottom: 1em;
}
.collections .item .text {
  position: absolute;
  bottom: 0.5em;
  display: inline-block;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 1.15em;
  border-radius: 30px;
  margin-top: -1em;
  padding: 0.25em 0.75em;
  transition: all 0.2s ease-in-out;
}
.collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.collection .item {
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  aspect-ratio: 16/10;
  width: 100%;
  max-width: 500px;
  border: 8px solid #fff;
  box-shadow: #26394d 0px 20px 30px -10px;
  transition: all 0.2s ease-in-out;
}
.collection .item:hover {
  filter: grayscale(0);
  scale: 1.05;
  box-shadow: #000100 0px 20px 30px -10px;
}
.collection .item:hover:nth-child(even) {
  rotate: -1deg;
}
.collection .item:hover:nth-child(odd) {
  rotate: 1deg;
}
.collection .item:hover .text {
  scale: 1.1;
  bottom: 1em;
}
.barcode .video-container {
  height: 100%;
  width: 100%;
}
.barcode .video-container video {
  width: 100%;
  height: 100%;
  max-height: 300px;
}
.found {
  width: 100%;
  z-index: 9999;
}
.found .inner {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  max-height: 80px;
  padding: 1em;
  margin: 1em 0;
  border-radius: 10px;
  text-decoration: none;
}
.found .inner img {
  background-size: contain;
  width: 100px;
  margin-left: -1.5em;
  margin-right: -1em;
}
.found .inner .text {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.found .inner .fa-chevron-right {
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
@keyframes foundAnim {
  from {
    translate: 0 10px;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}
.flexTable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  overflow: scroll;
  z-index: 9999999 !important;
}
.flexTable header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #212529;
  color: #fff;
  padding: 0.5em 0;
  user-select: none;
}
.flexTable header .item {
  display: flex;
}
.flexTable header .item .spacer {
  flex: 1;
  flex-basis: 100%;
}
.flexTable header .item .col {
  display: flex;
  align-items: center;
}
.flexTable header .item .col:not(.head-col)[onclick] {
  cursor: pointer;
}
.flexTable header .item .col.center {
  justify-content: center;
}
.flexTable header .item .col.buttons {
  margin-top: -0.5em;
}
.flexTable .row {
  display: flex;
  margin: 0;
}
.flexTable .row:nth-child(even) {
  background: #ddd;
}
.flexTable .row:nth-child(odd) {
  background: #ccc;
}
.flexTable .row:hover {
  background: #eee;
}
.flexTable .row .col {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.flexTable .row .col.center {
  justify-content: center;
  text-align: center;
}
.flexTable header .col.barcode, .flexTable .row .col.barcode {
  max-width: 10%;
}
.flexTable header .col.country, .flexTable .row .col.country, .flexTable header .col.released, .flexTable .row .col.released {
  max-width: 7%;
}
.flexTable header .col.type, .flexTable .row .col.type {
  max-width: 12%;
}
.flexTable header .col.flavour, .flexTable .row .col.flavour {
  max-width: 15%;
}
dialog {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: 50dvw;
}
dialog .title {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0.5em;
  margin: -1em;
  margin-bottom: 1em;
}
dialog .title .text {
  flex: 1;
}
dialog .title .close {
  font-size: 0.8em;
}
dialog .filter-list {
  display: flex;
  flex-direction: column;
}
dialog .filter-list .item {
  display: flex;
}
dialog .filter-list.grid {
  flex-direction: row;
  flex-wrap: wrap;
}
dialog .filter-list.grid .item {
  display: flex;
  width: 25%;
}
dialog .product-view {
  display: flex;
  align-items: center;
}
dialog .product-view img {
  max-width: 40%;
}
dialog .product-view .specs {
  line-height: 40px;
}
::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2rem);
  opacity: 0.75;
  transition: all 0.2s ease-in-out;
}
.discord .hero {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 -1em;
  margin-top: -5.5em;
  min-height: 50dvh;
  margin-bottom: -2.5em !important;
  padding: 0 1em;
  background: linear-gradient(to bottom, #5865f2, transparent);
  color: #5865f2;
  font-size: 2em;
}
@media only screen and (min-width: 500px) {
  .discord .hero {
    margin: 0 -25em;
    margin-top: -4.5em;
    min-height: 60dvh;
  }
}
@media only screen and (min-width: 1500px) {
  .discord .hero {
    margin: 0 -25em;
    margin-top: -4.5em;
    min-height: 40dvh;
  }
}
.discord .hero .dbadge {
  position: absolute;
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;
  width: 50px;
}
.discord .hero .dbadge.dbadge1 {
  top: 15dvh;
  left: 20%;
  background-image: url(https://get-pri.me/uploads/discord/assets/badge1.png);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .hero .dbadge.dbadge1 {
    left: 40%;
  }
}
.discord .hero .dbadge.dbadge2 {
  top: 35dvh;
  left: 10%;
  background-image: url(https://get-pri.me/uploads/discord/assets/badge2.png);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .hero .dbadge.dbadge2 {
    left: 35%;
  }
}
.discord .hero .dbadge.dbadge3 {
  top: 15dvh;
  right: 20%;
  background-image: url(https://get-pri.me/uploads/discord/assets/badge3.png);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .hero .dbadge.dbadge3 {
    right: 40%;
  }
}
.discord .hero .dbadge.dbadge4 {
  top: 35dvh;
  right: 10%;
  background-image: url(https://get-pri.me/uploads/discord/assets/badge4.png);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .hero .dbadge.dbadge4 {
    right: 35%;
  }
}
.discord .hero .text {
  margin-top: 5em;
  margin-bottom: 5em;
}
.discord .hero .text .fa-discord {
  font-size: 2em;
}
.discord .hero .btn-light {
  background: #5865f2;
  color: #fff;
  border: 0;
  border-radius: 50px;
  scale: 1.5;
  margin-top: -2em;
  transition: all 0.2s ease-in-out;
}
.discord .hero .btn-light:hover {
  scale: 1.6;
}
.discord .nav {
  display: flex;
  justify-content: center;
  margin: 1em -2em;
  margin-bottom: 2em;
  border-bottom: 1px solid #5865f2;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .nav {
    margin: 1em;
  }
}
.discord .nav .btn {
  font-size: 1.2em;
}
.discord .nav .btn-discord {
  background: #5865f2;
  color: #fff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.discord .pane {
  display: none;
}
.discord .pane.active {
  display: block;
}
.discord .pane#boosters .contents {
  justify-content: center;
  gap: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .discord .pane#boosters .contents {
    display: flex;
  }
}
.discord .pane#boosters .contents .panel {
  background: rgba(88, 101, 242, 0.2);
  border-radius: 30px;
  padding: 2em;
  min-width: 25%;
}
.discord .pane#boosters .contents .panel h4 {
  text-decoration: underline;
}
.discord .pane#boosters .contents .boosterboard .item {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 1.4em;
  background: rgba(88, 101, 242, 0.2);
  border-radius: 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 0.5em;
}
.discord .pane#boosters .contents .boosterboard .item img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.discord .pane#boosters .contents .boosterboard .item .name {
  width: 100%;
}
.discord .pane#boosters .contents .boosterboard .item .count {
  display: grid;
  place-items: center;
  background: #fff;
  color: #000;
  font-weight: bolder;
  width: 40px;
}
.discord .pane#team .meet-the-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.discord .pane#team .meet-the-team .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}
.discord .pane#team .meet-the-team .item .dp {
  width: 100px;
  border-radius: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.discord .pane#team .meet-the-team .item .text {
  display: inline-block;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  border-radius: 30px;
  margin-top: -1em;
  padding: 0.25em 0.75em;
}
.changelog {
  display: flex;
  flex-direction: column;
}
.changelog .item {
  background: #fff;
  padding: 1em;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  margin-bottom: 1em;
}
.changelog .item h3 {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 0.25em 0.5em;
  margin: -0.5em;
  margin-bottom: 0.5em;
}
.changelog .item h4 {
  margin-bottom: -0.65em;
}
.cp .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1.5em;
}
.cp .menu .item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(transparent, rgba(0, 0, 0, 0.2)), linear-gradient(to bottom, var(--first-color), var(--second-color));
  color: #fff;
  text-shadow: 0 2px 10px #000, 0 2px 10px #000, -1px 0 rgba(0, 0, 0, 0.5), 0 1px rgba(0, 0, 0, 0.5), 1px 0 rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5);
  box-shadow: rgba(50, 50, 93, 0.5) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-radius: 0.5em;
  aspect-ratio: 1;
  line-height: 25px;
  font-size: 1.25em;
  width: 35dvw;
  min-width: 35dvw;
  padding: 0.25em;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .cp .menu .item {
    font-size: 1.5em;
    padding: 0.25em;
  }
}
@media only screen and (min-width: 500px) {
  .cp .menu .item {
    min-width: 200px;
    max-width: 200px;
  }
}
@media only screen and (min-width: 1500px) {
  .cp .menu .item {
    min-width: 200px;
    max-width: 200px;
  }
}
.cp .menu .item:hover {
  filter: brightness(115%);
  scale: 1.05;
}
.cp .menu .item i {
  font-size: 2.5em;
  margin-bottom: 0.25em;
}
.cp #accordion {
  width: 100%;
}
.cp #accordion .card-header {
  background: linear-gradient(to right, var(--first-color), var(--second-color));
  padding-bottom: 0;
  border-radius: 0.5em;
}
.cp #accordion .card-header .btn {
  border: none;
  color: #fff !important;
  box-shadow: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.cp #accordion .card {
  background: transparent;
  border: 0;
  margin-bottom: 0.5em;
}
.cp #accordion .card-body {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5em;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cp #accordion .card-body textarea {
  field-sizing: content;
}
.cp #add-article .input-group-text img {
  height: 20px;
  width: 20px;
}
.cp #add-article .dropdown-vendors-list, .cp #add-article .dropdown-products-list {
  display: none;
  margin-top: -1em;
  margin-bottom: 2em;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.cp #add-article .dropdown-vendors-list .item, .cp #add-article .dropdown-products-list .item {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
  user-select: none;
}
.cp #add-article .dropdown-vendors-list .item:hover, .cp #add-article .dropdown-products-list .item:hover {
  filter: brightness(120%);
  background: rgba(0, 0, 0, 0.1);
}
.cp #add-article .dropdown-vendors-list .item .img, .cp #add-article .dropdown-products-list .item .img {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.cp #add-article #product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: -0.5em;
  margin-bottom: 1em;
}
.cp #add-article #product-tags .tag {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.15em 0.25em;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.cp #add-article #product-tags .tag img {
  max-width: 30px;
}
.cp #add-article #product-tags .tag .cross {
  cursor: pointer;
  margin: 0 1em 0 0.5em;
  font-size: 0.8em;
}
.cp #add-article .datetime {
  display: flex;
  gap: 1em;
}
.cp #add-article #output {
  display: none;
  margin-top: 2em;
}
.cp .tag-display .tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 0.35em;
  margin: 0.35em;
  font-size: 0.9em;
}
.cp .tag-display .tag i {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}
.cp .tag-display .tag i:hover {
  opacity: 1;
}
.cp .schedule {
  display: flex;
  gap: 2em;
}
.cp #article-output {
  display: none;
  margin-top: 2em;
}
.cp .tag-display {
  display: flex;
}
.cp #add-product-listing .input-group-text img {
  height: 20px;
  width: 20px;
}
.cp #add-product-listing .dropdown-vendors-list, .cp #add-product-listing .dropdown-products-list {
  display: none;
  margin-top: -1em;
  margin-bottom: 2em;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.cp #add-product-listing .dropdown-vendors-list .item, .cp #add-product-listing .dropdown-products-list .item {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
  user-select: none;
}
.cp #add-product-listing .dropdown-vendors-list .item:hover, .cp #add-product-listing .dropdown-products-list .item:hover {
  filter: brightness(120%);
  background: rgba(0, 0, 0, 0.1);
}
.cp #add-product-listing .dropdown-vendors-list .item .img, .cp #add-product-listing .dropdown-products-list .item .img {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.cp #add-product-listing #product-listing-output {
  display: none;
  margin-top: 2em;
}
.cp #add-tiktok .input-group-text img {
  height: 20px;
  width: 20px;
}
.cp #add-tiktok .dropdown-vendors-list, .cp #add-tiktok .dropdown-products-list {
  display: none;
  margin-top: -1em;
  margin-bottom: 2em;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.cp #add-tiktok .dropdown-vendors-list .item, .cp #add-tiktok .dropdown-products-list .item {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em;
  user-select: none;
}
.cp #add-tiktok .dropdown-vendors-list .item:hover, .cp #add-tiktok .dropdown-products-list .item:hover {
  filter: brightness(120%);
  background: rgba(0, 0, 0, 0.1);
}
.cp #add-tiktok .dropdown-vendors-list .item .img, .cp #add-tiktok .dropdown-products-list .item .img {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.cp #add-tiktok #product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: -0.5em;
  margin-bottom: 1em;
}
.cp #add-tiktok #product-tags .tag {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.15em 0.25em;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.cp #add-tiktok #product-tags .tag img {
  max-width: 30px;
}
.cp #add-tiktok #product-tags .tag .cross {
  cursor: pointer;
  margin: 0 1em 0 0.5em;
  font-size: 0.8em;
}
.cp #add-tiktok .datetime {
  display: flex;
  gap: 1em;
}
.cp #add-tiktok #output {
  display: none;
  margin-top: 2em;
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes grow {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 5px;
    width: 5px;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeUp {
  0% {
    translate: 0 20px;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes dropIn {
  0% {
    translate: 0 -100px;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes border_glow {
  0% {
    box-shadow: 0 0 0 0 var(--first-color);
  }
  50% {
    box-shadow: 0 0 5px 5px var(--second-color);
  }
  100% {
    box-shadow: 0 0 10px 10px rgba(255, 0, 0, 0);
  }
}
.border-glow {
  animation: border_glow 1s ease-in-out infinite;
}
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px #a70ca8;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(167, 12, 168, 0);
  }
}
like-btn {
  display: inline-block;
  cursor: pointer;
  font-size: 2.5em;
  filter: grayscale(100%);
  transition: all 0.2s ease-in-out;
}
like-btn:hover {
  scale: 1.1;
}
like-btn.active {
  animation: like-btn-tada 2s ease-in-out forwards, like-btn-glow 1s ease-in-out;
  filter: grayscale(0);
}
@keyframes like-btn-glow {
  50% {
    text-shadow: 0 0 50px red, 0 0 50px red;
  }
  100% {
    text-shadow: 0 0 1150px red, 0 0 1150px red;
  }
}
@keyframes like-btn-tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    scale: 1.5;
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.counter-title {
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  width: max-content;
  margin: 0 auto;
  padding-left: 4em;
  font-family: "Poppins", sans-serif;
  line-height: 25px;
  text-align: right;
  font-size: 1.25em;
  font-weight: bolder;
  background: linear-gradient(to bottom, #333, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.45);
  margin-bottom: -0.5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter-title {
    margin-bottom: 0.5em;
  }
}
.counter {
  display: block;
  opacity: 0;
  font-family: "Poppins", sans-serif;
  text-decoration: none !important;
  background: linear-gradient(to bottom, #000, #aee168);
  padding: 0.5em 1em;
  border-radius: 10px;
  text-align: center;
  margin: 1em auto;
  margin-bottom: 1em;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.65);
  text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter {
    margin: 0 auto;
    width: max-content;
    margin-bottom: 0;
  }
}
.counter .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter .inner {
    gap: 1em;
  }
}
.counter img {
  margin-top: -0.4em;
  margin-right: 1dvw;
  width: 50px;
  scale: 3;
  rotate: -20deg;
  filter: drop-shadow(0 1px 2px #000);
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter img {
    margin-right: -0.5dvw;
  }
}
.counter span {
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.8em;
  border-radius: 10px;
  color: #fff;
  font-size: 0.7em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter span {
    padding: 0.5em 1em;
  }
}
.counter span b {
  font-size: 1.5em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter span b {
    font-size: 2em;
  }
}
.counter span.complete {
  margin: 0 3em;
  font-size: 1em;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .counter span.complete {
    margin: 0 1.5em;
    font-size: 1.4em;
  }
}
.references span.in-article-preview {
  display: inline-block;
  translate: 0 0.5em;
}
.references .in-article-preview {
  margin: 0 0.5em;
  margin-bottom: 1em;
  transition: all 0.2s ease-in-out;
}
@media only screen and (min-width: 500px), (min-width: 1500px) {
  .references .in-article-preview {
    margin: 0 0.5em;
  }
}
.references .in-article-preview.active {
  scale: 1;
  padding: 0.25em 0.5em;
  border-radius: 50px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  background: #111214;
}
.references .in-article-preview.pulse {
  animation: pulse-animation 2s 5;
}
.references .in-article-preview:hover {
  scale: 1.01;
}
.references .in-article-preview .inner {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: #fff !important;
  text-decoration: none !important;
}
.references .in-article-preview .inner i {
  transition: all 0.2s ease-in-out;
}
.references .in-article-preview .inner:hover {
  color: #fff !important;
}
.references .in-article-preview .inner:hover i {
  translate: 5px;
}
.references .in-article-preview .inner .img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 100%;
  margin: -0.25em -0.5em;
  margin-right: 0.5em;
}