@charset "utf-8";

:root {
  --mainColor: #292b41;
  --secColor: #2df77c;
  --terColor: #1f2436;
  --bgColorCode: 19 22 35;
  --bgLighterColorCode: 25 28 41;
  --color-white: #fff;
  --simple-font-color-base: 255;
  --font-numbers: 'Luckiest';
  --font-heads: proxima nova black;
  --font-texts: "Quicksand";
  --font-normal-color: #f8f8f8;
  --media-break: 90em;
  --font-heads-small: Proxima Nova Bold;
  --border-radius-small: .5rem;
  --border-radius-regular: 1rem;
  --accentColor: lightcoral;
  --header-img-size: 70px;
}

html,
body {
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--secColor) var(--mainColor)
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track-piece {
  background-color: var(--mainColor)
}

::-webkit-scrollbar-thumb:vertical {
  height: 80px;
  background-color: var(--secColor)
}

body {
  background: rgb(var(--bgColorCode)) none repeat scroll 0 0;
  color: var(--color-white);
  font-family: var(--font-texts), tahoma, helvetica, arial, sans-serif;
  font-size: .95rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.no-data {
  padding: 10px;
  border: 1px solid #bbb;
  margin: 7px 7px 7px 9px;
  border-radius: 2px;
  box-shadow: 0 0 3px 0 #ccc;
  background: var(--color-white)
}

.flex-start {
  display: flex;
  align-items: start
}

.font-medium {
  font-size: medium
}

.gray-80 {
  filter: grayscale(80%)
}

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem
}

.bordered-box {
  border-top: 15px solid var(--secColor);
  box-sizing: border-box;
}

a {
  color: var(--secColor);
  text-decoration: none;
  cursor: pointer;
}

a:hover h2 {
  color: var(--secColor);
}

a[href^="http"]::after {
  content: " ";
  font-family: fontello
}

a:hover {
  color: var(--accentColor);
}

a:active {
  color: #000
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
  font-weight: normal;
  word-wrap: anywhere;
  color: var(--secColor);
  text-wrap: balance;
}

h1 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
}

h1 a {
  color: unset
}

h2 {
  color: var(--accentColor);
  font-size: 1.2rem;
  margin-block: 5rem 2rem;
  line-height: 1.2;
}

h3,
h4 {
  font-family: var(--font-heads-small);
  color:var(--color-white);
  font-size: 0.9rem;
  line-height: 1.1;
}

.details-head {
  display: flex;
  align-items: end;
  gap: 1rem;
}

hr {
  border: 1px solid var(--color-white);
  box-shadow: 0 1px 0 #ddd
}

tbody {
  vertical-align: top
}

button {
  cursor: pointer
}

@media (min-width: 75em) {
  button:hover {
    background:  var(--accentColor) !important;
    text-shadow: 0 0 4px rgba(0 0 0);
    color: var(--color-white) !important;
  }
}

mark {
  color: var(--accentColor);
  background: unset;
  font-weight: bold
}

.anchor-scroll,
.anchor-scroll-20 {
  scroll-margin-top: 20vh
}

.anchor-scroll-50 {
  scroll-margin-top: 50vh
}

.smaller {
  font-size: 1.4rem !important
}

.bold {
  font-weight: bold
}

.center {
  display: grid;
  align-items: center;
  justify-content: center;
  margin-top: 1rem
}

.white {
  color: var(--color-white)
}

.hidden {
  display: none !important
}

.no-border {
  border: none !important
}

.highlight-gold {
  font-size: larger;
  color: gold;
  vertical-align: middle;
  padding-inline: 0.2rem
}

.red {
  color: red;
  padding: 0 !important;
  background-color: transparent !important
}

.highlight-text {
  font-weight: bold;
  color: var(--secColor)
}

.light-icon {
  filter: brightness(100)
}

@media (max-width: 75em) {
  h1 {
    margin: 1em 0 1em
  }
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/quicksand-v30-latin-regular.eot");
  src: local(""), url("../fonts/quicksand-v30-latin-regular.eot?#iefix")format("embedded-opentype"), url("../fonts/quicksand-v30-latin-regular.woff2") format("woff2"), url("../fonts/quicksand-v30-latin-regular.woff") format("woff"), url("../fonts/quicksand-v30-latin-regular.ttf") format("truetype"), url("../fonts/quicksand-v30-latin-regular.svg#Quicksand") format("svg")
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/quicksand-v30-latin-500.eot");
  src: local(""), url("../fonts/quicksand-v30-latin-500.eot?#iefix")format("embedded-opentype"), url("../fonts/quicksand-v30-latin-500.woff2") format("woff2"), url("../fonts/quicksand-v30-latin-500.woff") format("woff"), url("../fonts/quicksand-v30-latin-500.ttf") format("truetype"), url("../fonts/quicksand-v30-latin-500.svg#Quicksand") format("svg")
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/quicksand-v30-latin-600.eot");
  src: local(""), url("../fonts/quicksand-v30-latin-600.eot?#iefix")format("embedded-opentype"), url("../fonts/quicksand-v30-latin-600.woff2") format("woff2"), url("../fonts/quicksand-v30-latin-600.woff") format("woff"), url("../fonts/quicksand-v30-latin-600.ttf") format("truetype"), url("../fonts/quicksand-v30-latin-600.svg#Quicksand") format("svg")
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/quicksand-v30-latin-700.eot");
  src: local(""), url("../fonts/quicksand-v30-latin-700.eot?#iefix")format("embedded-opentype"), url("../fonts/quicksand-v30-latin-700.woff2") format("woff2"), url("../fonts/quicksand-v30-latin-700.woff") format("woff"), url("../fonts/quicksand-v30-latin-700.ttf") format("truetype"), url("../fonts/quicksand-v30-latin-700.svg#Quicksand") format("svg")
}

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/bangers-v20-latin-regular.eot");
  src: local(""), url("../fonts/bangers-v20-latin-regular.eot?#iefix")format("embedded-opentype"), url("../fonts/bangers-v20-latin-regular.woff2") format("woff2"), url("../fonts/bangers-v20-latin-regular.woff") format("woff"), url("../fonts/bangers-v20-latin-regular.ttf") format("truetype"), url("../fonts/bangers-v20-latin-regular.svg#Bangers") format("svg")
}

@font-face {
  font-family: "Luckiest";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/luckiestguy-regular-webfont.woff2") format("woff2")
}

@font-face {
  font-family: "Turtles";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/Turtles.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Light";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("../fonts/Proxima Nova Light.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Regular";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/Proxima Nova Regular.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Semibold";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/Proxima Nova Semibold.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Bold";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("../fonts/Proxima Nova Bold.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Extrabold";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/Proxima Nova Extrabold.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Black";
  font-style: normal;
  font-weight: 800;
  src: local(""), url("../fonts/Proxima Nova Black.otf") format("opentype")
}

@font-face {
  font-family: "Proxima Nova Condensed Black";
  font-style: normal;
  font-weight: 800;
  src: local(""), url("../fonts/Proxima Nova Condensed Black.otf") format("opentype")
}

.sticky-anchor {
  position: sticky;
  z-index: 5;
  top: calc((var(--header-img-size) * -1) - 58px);
}

@media (max-width: 75em) {
  .sticky-anchor {
    position: fixed;
    top: 50px;
    width: 100%
  }
}

#breadcrumbs-background-band {
  background-color: rgb(var(--bgLighterColorCode));
  height: 67px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  filter: drop-shadow(0 0 6px rgba(0 0 0 /0.6));
  transition: .3s cubic-bezier(.68, -0.55, .27, 1.55)
}

#breadcrumbs-wrapper {
  position: sticky;
  width: 100%;
  top: 0;
  padding: 20px 0 !important;
  background-color: transparent
}

@media (max-width: 90em) {
  #breadcrumbs-wrapper {
    display: none
  }

  #breadcrumbs-background-band {
    display: none
  }
}

#breadcrumbs-wrapper-mobil {
  display: none;
  position: fixed;
  width: fit-content;
  top: unset;
  left: 0;
  bottom: 0;
  padding: 10px 20px !important;
  background: var(--terColor);
  border-radius: 0 var(--border-radius-regular) 0 0;
  color:var(--color-white);
  box-shadow: 0 0 5px 1px rgba(0 0 0 / 0.7);
  line-height: 1
}

#breadcrumbs-wrapper-mobil a {
  color: var(--accentColor)
}

#breadcrumbs-wrapper-mobil a:hover {
  color: var(--secColor);
}

.breadcrumbs {
  z-index: 4;
  display: flex
}

.breadcrumbs span {
  margin: 0 15px
}

@media (max-width: 90em) {
  #breadcrumbs-wrapper-mobil {
    display: flex;
    flex-direction: row-reverse;
    font-size: inherit
  }

  .breadcrumbs span {
    rotate: 180deg
  }
}

@media (max-width: 45em) {
  #breadcrumbs-wrapper-mobil {
    font-size: 10pt
  }

  h2 {
    margin-top: 4rem;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 6;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9)
}

#modal-body {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 2000px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center
}

#modal-background {
  display: none
}

.open-modal {
  overflow: hidden
}

#modal-caption {
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: auto
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: var(--color-white);
  font-size: 40px;
  font-weight: bold;
  -webkit-transition: 0.3s;
  transition: 0.3s
}

.modal-content {
  display: block;
  max-width: 90vw;
  max-height: 90vh
}

.modal-friendly img {
  cursor: pointer;
  -webkit-transition: transform 0.4s;
  transition: 0.4s;
  z-index: 1;
  position: relative
}

.modal-friendly img:hover {
  opacity: 0.8
}

.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer
}

@media only screen and (max-width: 90em) {
  .modal-content {
    max-width: 100vw
  }

  .modal-close {
    position: fixed;
    right: unset;
    left: 35px;
    top: unset;
    bottom: 0;
  }
}

.modal-content,
#modal-caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.4s;
  animation-name: zoom;
  animation-duration: 0.4s
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.search-result {
  border-bottom: 1px solid #666;
  padding-top: 20px
}

.search-result a {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.search-result img {
  width: 25%;
  border-radius: var(--border-radius-regular);
}

#header {
  top: 0;
  z-index: 4;
  width: 100%;
  position: relative;
  box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.8);
  background-color: var(--mainColor);
}

#siteinfo {
  padding: 20px 0 10px;
  box-sizing: border-box;
  margin-inline: 8%;
}

#siteinfo a[href^="http"]::after {
  content: ""
}

#siteinfo img {
  position: relative;
  z-index: 99;
  height: var(--header-img-size);
  filter: drop-shadow(0 3px 10px rgba(0 0 0 / 0.3))
}

@media (max-width: 110em) {
  #siteinfo {
  margin-inline: 2%;
  }
}

@media (max-width: 90em) {
  #header {
    position: sticky;
    top: calc((var(--header-img-size) * -1) - 34px);
    /*! box-shadow: unset; */
  }

  #siteinfo img {
    transition: 0.2s ease-in-out;
    transform-origin: top left;
  }

  #siteinfo.drop img {
    z-index: 99;
    position: relative;
    scale: calc( 1 / ( tan(atan2(var(--header-img-size),1px)) / 40));
    translate: 40px calc(var(--header-img-size) + 20px);
  }
}

@media (max-width: 75em) {
  #header {
    position: fixed;
    box-shadow: unset;
    top: 0
  }

  #siteinfo {
    padding: 0;
    position: relative;
    z-index: 2
  }

  #siteinfo img {
    height: 40px;
    width: auto;
    position: absolute;
    margin: 0 auto;
    top: 4px;
    left: 0;
    right: 0;
    transition: unset
  }
}

#navigation {
  margin: auto;
  height: 65px;
  background: var(--mainColor)
}

@-webkit-keyframes newLoopAfter {
  0% {
    -webkit-transform: rotatex(0)
  }

  50% {
    -webkit-transform: scale(1.2)
  }

  50.75% {
    -webkit-transform: scale(1.1)
  }

  51.5% {
    -webkit-transform: scale(1.2)
  }

  52.5% {
    -webkit-transform: scale(1)
  }

  100% {
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes newLoop {
  0% {
    -webkit-transform: rotatex(0)
  }

  15.5% {
    -webkit-transform: rotatex(0)
  }

  18% {
    -webkit-transform: rotatex(360deg)
  }

  49% {
    -webkit-transform: scale(1)
  }

  50% {
    -webkit-transform: scale(1.2)
  }

  50.75% {
    -webkit-transform: scale(1.1)
  }

  51.5% {
    -webkit-transform: scale(1.2)
  }

  52.5% {
    -webkit-transform: scale(1)
  }

  83.5% {
    -webkit-transform: rotatey(0)
  }

  86% {
    -webkit-transform: rotatey(360deg)
  }

  100% {
    -webkit-transform: scale(1)
  }
}

@keyframes newLoopAfter {
  0% {
    transform: rotatex(0)
  }

  50% {
    transform: scale(1.2)
  }

  50.75% {
    transform: scale(1.1)
  }

  51.5% {
    transform: scale(1.2)
  }

  52.5% {
    transform: scale(1)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes newLoop {
  0% {
    transform: rotatex(0)
  }

  15.5% {
    transform: rotatex(0)
  }

  18% {
    transform: rotatex(360deg)
  }

  49% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.2)
  }

  50.75% {
    transform: scale(1.1)
  }

  51.5% {
    transform: scale(1.2)
  }

  52.5% {
    transform: scale(1)
  }

  83.5% {
    transform: rotatey(0)
  }

  86% {
    transform: rotatey(360deg)
  }

  100% {
    transform: scale(1)
  }
}

@media (max-width: 90em) {
  @-webkit-keyframes slideOpenRight {
    0% {
      -webkit-transform: scalex(1) translatex(-100%)
    }

    62% {
      -webkit-transform: scalex(1.1) translatex(0)
    }

    100% {
      -webkit-transform: scalex(1) translatex(0)
    }
  }

  @-webkit-keyframes slideCloseRight {
    0% {
      -webkit-transform: scalex(1) translatex(0)
    }

    38% {
      -webkit-transform: scalex(1.1) translatex(0)
    }

    99% {
      opacity: 100%
    }

    100% {
      -webkit-transform: scalex(1) translatex(-100%);
      opacity: 0
    }
  }

  @keyframes slideOpenRight {
    0% {
      transform: scalex(1) translatex(-100%)
    }

    62% {
      transform: scalex(1.1) translatex(0)
    }

    100% {
      transform: scalex(1) translatex(0)
    }
  }

  @keyframes slideCloseRight {
    0% {
      transform: scalex(1) translatex(0)
    }

    38% {
      transform: scalex(1.1) translatex(0)
    }

    99% {
      opacity: 100%
    }

    100% {
      transform: scalex(1) translatex(-100%);
      opacity: 0
    }
  }
}

.shadow {
  display: none
}

.ham-menu {
  height: 40px;
  width: 50px;
  position: relative;
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0
}

.ham-line {
  height: 4px;
  width: 35px;
  background: #fff;
  border-radius: 1px;
  -webkit-transition: 0.5s cubic-bezier(1, 1.76, 0.4, 0.68);
  transition: 0.5s cubic-bezier(1, 1.76, 0.4, 0.68)
}

.ham-menu.cross .ham-line {
  border-radius: 2px
}

.ham-menu.cross .top-line {
  -webkit-transform: rotate(-45deg) translate(-8px, 7px) scale(1.1, 1.3);
  transform: rotate(-45deg) translate(-8px, 7px) scale(1.1, 1.3)
}

.ham-menu.cross .bottom-line {
  -webkit-transform: rotate(45deg) translate(-8px, -7px) scale(1.1, 1.3);
  transform: rotate(45deg) translate(-8px, -7px) scale(1.1, 1.3)
}

.ham-menu.cross .middle-line {
  -webkit-transform: scale(0);
  transform: scale(0)
}

.new {
  position: absolute;
  background: #f9c90d;
  color: var(--terColor);
  padding: 3px 7px 1px 7px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  z-index: 2;
  top: -6px;
  right: 0;
  line-height: 1;
  font-family: var(--font-numbers), tahoma, helvetica, arial, sans-serif;
  -webkit-animation-name: newLoop;
  -webkit-animation-duration: 28s;
  -webkit-animation-iteration-count: infinite;
  animation-name: newLoop;
  animation-duration: 28s;
  animation-iteration-count: infinite;
  text-rendering: optimizelegibility;
}

span.new.subs {
  position: relative;
  width: max-content;
  height: max-content;
  top: 0;
  left: -130px;
}

.new::after {
  content: "";
  border-top: 7px solid #f9c90d;
  border-left: 0 solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 18px;
  -webkit-animation-name: newLoopAfter;
  -webkit-animation-duration: 28s;
  -webkit-animation-iteration-count: infinite;
  animation-name: newLoopAfter;
  animation-duration: 28s;
  animation-iteration-count: infinite
}

span.new.subs::after {
  left: -7px;
  top: 9px;
  rotate: 180deg;
}

.new.post-bg {
  text-shadow: none;
  top: -20px;
  right: -15px;
  left: unset
}

.navHor {
  margin: auto;
  padding: 0;
  position: relative;
  max-width: 85%;
  display: flex;
  list-style: none
}

.navHor a {
  text-decoration: none;
  padding: 0 25px;
  color: var(--color-white);
  z-index: 1;
  position: relative;
  min-height: 65px;
  display: flex;
  align-items: center
}

.navHor li {
  position: relative
}

.navHor li:hover>a {
  color: var(--accentColor)
}

.navHor li:active>a {
  color: lightvar(--accentColor)
}

.navHor>li.activeLink::before {
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 20px solid rgb(var(--bgColorCode));
  z-index: 2;
  filter: drop-shadow(0 -4px 2px rgba(0 0 0 / 0.1))
}

.navHor a[class^="subIcon"]::after {
  content: "\f107";
  font-family: "fontello";
  padding: 0 0 0 20px
}

.navHor>li>a {
  background: var(--mainColor)
}

@media (max-width: 110em) {
 .navHor {
  max-width: 95%;
 }
}

@media (max-width: 90em) {
  #navigation {
    width: 100%;
    height: 50px
  }

  .shadow {
    display: block;
    width: 100%;
    position: absolute;
    top: 136px;
    left: 0;
    height: 50px;
    box-shadow: 0 2px 3px -1px rgba(0 0 0 /0.6);
    z-index: 1;
    background: var(--mainColor)
  }

  .ham-menu {
    display: flex
  }

  .navHor {
    display: none;
    flex-direction: column;
    padding: 0;
    position: sticky;
    border-bottom: 1px solid #bbb;
    height: calc(100vh - 49px);
    max-width: max-content;
    margin-left: -1px;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-transform: translatex(-100%);
    -webkit-transform-origin: left;
    transform: translatex(-100%);
    transform-origin: left;
    filter: drop-shadow(0 0 1rem rgb(0, 0, 0));
  }

  .navHor::-webkit-scrollbar {
    display: none
  }

  .navHor li {
    margin-top: -1px
  }

  .navHor li:hover {
    background: transparent
  }

  .navHor a {
    padding: 25px 15px;
    text-align: left;
    background: var(--mainColor);
    min-height: 1.7em
  }

  .navHor li.activeLink::before {
    content: none
  }

  .navHor li.activeLink>a {
    clip-path: polygon(0 0, 100% 0px, 100% 1px, 85% 50%, 100% calc(100% - 1px), 100% 100%, 0 100%);
    padding-right: calc(15% + 15px)
  }

  .new {
    left: 15px;
    top: 7px;
    right: unset
  }

  .new::after {
    transform: rotatey(180deg) !important;
  }

  .new.subs {
    top: -8px
  }

  span.new.subs::after {
    rotate: 90deg
  }

  .new.post-normal {
    left: unset;
    right: 0
  }

  .new-circle::before {
    content: "!";
    color: var(--terColor);
    position: absolute;
    top: 5px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: gold;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0 0 0 / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold
  }

  .open {
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-name: slideOpenRight;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: slideOpenRight;
    display: flex
  }

  .close {
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-name: slideCloseRight;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: slideCloseRight
  }

  .toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 3
  }

  .toggle::before {
    font-family: "fontello";
    font-size: 26pt;
    color: var(--color-white)
  }

  .navToggle::before {
    content: "\f0c9"
  }

  .navToggle-close::before {
    content: "\e801"
  }

  .toggle:hover:before {
    font-size: 29pt;
    width: 33px
  }
}

@media (max-width: 75em) {
  .navHor {
    position: fixed;
    height: calc(100vh - 50px)
  }

  .shadow {
    top: 0;
    box-shadow: -4px 0 6px -1px #000
  }
}

.submenu {
  padding: 0;
  position: absolute;
  width: max-content;
  list-style: none;
  -webkit-transition: cubic-bezier(0.96, 0.02, 0.86, -0.6) 0.4s;
  transition: cubic-bezier(0.96, 0.02, 0.86, -0.6) 0.4s;
  -webkit-transform: scaley(0);
  transform: scaley(0);
  transform-origin: center;
  z-index: 3
}

.navHor li:hover .submenu {
  background: transparent;
  -webkit-transform: scaley(1);
  transform: scaley(1);
  -webkit-transition: cubic-bezier(0, 1.69, 0.45, 1) 0.4s;
  transition: cubic-bezier(0, 1.69, 0.45, 1) 0.4s
}

.submenu a {
  padding: 10px 40px 10px 20px;
  min-height: 30px
}

.submenu li:hover a {
  color: var(--secColor);
}

.submenu li {
  text-align: left;
  background: var(--terColor);
  display: flex
}

.submenu li:hover {
  background: var(--mainColor) !important;
}

.submenu li:hover img {
  filter: invert(0.5) sepia(1) saturate(2.3) hue-rotate(312deg)
}

.submenu li.activeLink {
  color: var(--color-white);
  padding: 0 15% 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 1px, 85% 50%, 100% calc(100% - 1px), 100% 100%, 0 100%);
  margin-top: -1px
}

.submenu img {
  height: 20px;
  margin-right: 10px;
  filter: saturate(0) brightness(900%) contrast(120%)
}

@media (min-width: 90em) {
  .submenu {
    filter: drop-shadow(0 0 1rem rgba(0 0 0 / 0.8));
    top: 80px
  }

  .navHor li:hover .submenu {
    top: 80px
  }

  .submenu li:last-child {
    border-radius: 0 0 10px 10px
  }

  .submenu li:first-child {
    border-radius: 10px 10px 0 0
  }
}

@media (max-width: 90em) {
  .submenu a {
    padding-left: 30px;
    height: auto
  }

  .submenu {
    margin: 0 0 0 0;
    z-index: 22;
    display: block;
    position: relative;
    border: none;
    box-shadow: none;
    max-height: none !important;
    -webkit-transform: unset;
    transform: unset
  }

  .submenu li {
    color: #ccc;
    background: var(--mainColor)
  }

  .submenu li:hover {
    background: var(--mainColor) !important
  }

  .filler {
    height: 100vh;
    background: var(--mainColor) !important
  }
}

.anchor-container {
  position: sticky;
  top: 50px;
  z-index: 3;
  width: 90%;
  margin: auto;
  transition: .3s cubic-bezier(.68, -0.55, .27, 1.55)
}

.anchor-container a {
  color: var(--color-white)
}

#menu-anchor:before {
  font-family: fontello;
  content: "\f0c9";
  font-size: 24pt;
  position: absolute;
  top: -40px;
  color: var(--secColor)
}

#menu-anchor:hover:before {
  color: var(--accentColor)
}

@media (max-width: 110em) {
  .anchor-container {
    width: 99%
  }
}

@media (max-width: 75em) {
  .anchor-container {
    display: none
  }
}

#wrapper {
  display: flex;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: auto;
  background: rgb(var(--bgColorCode));
  min-height: calc(100vh - 194px)
}

@media (max-width: 75em) {
  #wrapper {
    margin-top: 50px;
    min-height: calc(100vh - 60px)
  }
}

.clearfloat {
  clear: both
}

#content {
  position: relative;
  padding: 0 3% 90px 3%;
  box-shadow: 4px 0 3px -2px rgba(0, 0, 0, 0.4);
  width: 54%;
  max-width: 1200px;
  margin-left: 6.5%;
  z-index: 1;
  background: rgb(var(--bgColorCode));
  transition: 0.4s ease-in-out;
}

#content> :nth-child(2) {
  border-top: none;
  padding-top: 20px;
  margin: 0 0 0 0
}

.extimg[href^="http"]::after {
  display: none
}

.underCon {
  padding: 100px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.underCon p {
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

.underCon p::before {
  content: "Hier gibt es nichts zu sehen.";
  opacity: 100;
  animation-name: warning-text-loop-forward
}

.underCon p::after {
  content: "Bitte anmelden um die Seite sehen zu können.";
  opacity: 0;
  animation-name: warning-text-loop-backward
}

.underCon p::before,
.underCon p::after {
  position: absolute;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate
}

@keyframes warning-text-loop-forward {
  0% {
    opacity: 100
  }

  40% {
    opacity: 100
  }

  60% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes warning-text-loop-backward {
  0% {
    opacity: 0
  }

  40% {
    opacity: 0
  }

  60% {
    opacity: 100
  }

  100% {
    opacity: 100
  }
}

.warning-sign {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 21px solid var(--font-normal-color);
  position: relative;
  display: flex;
  justify-content: center;
  margin: 10%;
  flex-direction: row;
  gap: 20%;
  animation-name: sign-loop
}

.warning-sign::after,
.warning-sign::before {
  content: "";
  width: 20%;
  height: 10%;
  margin: -1px;
  background: var(--font-normal-color);
  position: relative;
  top: 35%;
  border-radius: var(--border-radius-regular);
  animation-name: warning-loop
}

.warning-sign,
.warning-sign::after,
.warning-sign::before {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
  animation-iteration-count: infinite
}

@keyframes warning-loop {
  0% {
    transform: translatex(-30%);
    border-radius: 15px 10px 10px 25px
  }

  5% {
    transform: translatex(-30%);
    border-radius: 15px 10px 10px 25px
  }

  10% {
    transform: translatex(30%);
    border-radius: 10px 15px 25px 10px
  }

  20% {
    transform: translatex(30%);
    border-radius: 10px 15px 25px 10px
  }

  25% {
    transform: translatex(-30%);
    border-radius: 15px 10px 10px 25px
  }

  35% {
    transform: translatex(-30%);
    border-radius: 15px 10px 10px 25px
  }

  40% {
    top: 35%;
    width: 20%;
    transform: translatex(-30%);
    border-radius: 15px 10px 10px 25px
  }

  50% {
    top: 45%;
    width: 52%;
    transform: translatex(0);
    border-radius: 0
  }

  100% {
    top: 45%;
    width: 52%;
    border-radius: 0
  }
}

@keyframes sign-loop {
  0% {}

  40% {
    gap: 20%
  }

  50% {
    gap: 0%;
    transform: rotate(0)
  }

  65% {
    gap: 0%;
    transform: rotate(45deg)
  }

  100% {
    gap: 0%;
    transform: rotate(45deg)
  }
}

@media (max-width: 110em) {
  #content {
    margin-left: 0;
    width: 66%
  }
}

@media (max-width: 90em) {
  #content {
    width: 56%;
    margin-left: 3%
  }
}

@media (max-width: 75em) {
  .underCon {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 50px - 10%)
  }

  .warning-sign {
    width: 50%
  }

  #content {
    width: calc(100% - 6%);
    margin-top: 0;
    margin-left: 0;
    padding: 0 3% 60px;
    overflow: hidden
  }
}

#blogContentText {
  padding-bottom: 10px
}

.post-container {
  position: relative;
  margin: 0 5px;
  padding: 30px 0;
  border-top: 2px groove #233c36;
}

.post-head {
  margin-bottom: 15px
}

.not-visible {
  opacity: 45%
}

.post-thumb {
  float: right;
  margin-left: 10px
}

.post-thumb.normal-post img {
  border-radius: 50%
}

.post-thumb a {
  height: 56px;
  width: 56px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -23px
}

.post-thumb a>img {
  opacity: 0.9;
  max-height: 75%;
  filter: drop-shadow(0 3px 4px rgba(0 0 0 / 0.6))
}

.post-thumb a>img:hover {
  filter: drop-shadow(0 0 4px var(--accentColor))
}

.post-text {
  padding: 0 10px;
  position: relative
}

.post-text p {
  line-height: 32px;
  letter-spacing: 0.4px;
  padding: 1% 0
}

.post-text img {
  max-width: 100%;
}

.post-text a:hover img {
  filter: drop-shadow(0 0 15px var(--accentColor))
}

h2.post-title {
  margin: 0;
  padding: 0
}

h3.post-subtitle {
  margin: 0;
}

.post-subtitle {
  display: block;
  padding: 0 0 10px
}

.post-author {
  display: block;
  padding: 0 10px
}

.post-meta {
  float: right;
  padding: 0 15px 0;
  margin-top: -20px
}

summary {
  text-align: right;
  cursor: pointer
}

summary::marker {
  content: "\f086";
  font-family: "fontello";
  color: var(--secColor);
  font-size: 20pt;
}

details {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  display: grid;
  justify-items: start;
}

details summary~* {
  -webkit-transition: 0.4s;
  transition: 0.4s
}

details:not([open]) {
  height: 1.25em
}

details[open] {
  height: 3.75em;
  opacity: 1
}

details[open] summary~* {
  opacity: 1
}

details summary~* {
  opacity: 0
}

details[open] summary::marker {
  content: "\f085"
}

.meta-item {
  display: block;
  text-align: right;
  font-size: 12pt
}

.edit::after {
  content: '\e806';
  margin-left: .5em;
  font-family: 'fontello';
  font-size: 60%;
  vertical-align: middle;
  color: var(--font-normal-color)
}

.edit-button {
  font-family: fontello;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #0556bf;
  color:var(--color-white)
}

.post-edit {
  float: left;
  justify-content: center;
  align-items: center;
  background: none
}

.post-edit a {
  height: 25px;
  width: 25px
}

.edit-button::before {
  content: "\e806";
  position: absolute;
  pointer-events: none;
  line-height: 1
}

@media (max-width: 75em) {
  .post-container {
    margin: 0
  }

  .post-meta {
    float: unset;
    padding: 0 0 23px 0;
    position: relative;
    top: -20px;
    margin: 0
  }

  .meta-item {
    text-align: left
  }

  .post-edit {
    float: right
  }

  .post-text p {
    line-height: 28px;
    letter-spacing: 0.4px;
    padding: 0
  }

  summary {
    text-align: left
  }
}

#pagination {
  padding-top: 30px !important;
  position: relative;
  border-top: none !important
}

.bttn {
  font-size: 30pt;
  position: absolute
}

.bttn:hover:before {
  font-size: xxx-large;
  margin-right: -3px
}

.bttn:active:before {
  text-shadow: none
}

.bttn-forward {
  right: 0
}

.bttn-forward.bttn:before {
  font-family: fontello;
  content: "\f0a9"
}

.bttn-back {
  left: 0
}

.bttn-back:hover {
  margin-left: -3px
}

.bttn-back.bttn:before {
  font-family: fontello;
  content: "\f0a8"
}

.page-count {
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: baseline
}

.page-count>span {
  margin: 0 0.5%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center
}

.page-count>span:hover {
  background: var(--terColor);
  border-radius: 50%
}

.page-count a {
  display: block;
  padding: 4px
}

.active-page:visited {
  color: var(--color-white)
}

.active-page a {
  color: var(--color-white)
}

.active-page {
  background: var(--secColor);
  border-radius: 50%
}

@media (max-width: 75em) {
  #pagination {
    padding-bottom: 120px
  }
}

#content>div:nth-of-type(2) {
  padding-top: 0;
  margin-top: 0
}

#frontPage {
  padding: 30px 0
}

#frontPage>h1:first-of-type {
  margin-block: 2rem 0;
}

.frontPostCat {
  display: flex;
  flex-wrap: wrap
}

.frontPostCat:first-of-type {
  padding-top: 0
}

.frontPost-container {
  flex: 1.15 1 150px;
  margin: 3px;
  height: 300px;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  background-color: var(--color-white);
  z-index: 2
}

#frontPost-container-top .frontPost-container {
  box-shadow: 0 -12px 6px -10px #000 inset
}

.frontPost-container:hover {
  transform: scale(1.01);
  z-index: 999;
  box-shadow: 0 1px 2px 1px #777 !important
}

.frontPost-container:active {
  transform: scale(1)
}

.frontPost-container>a {
  text-decoration: none;
  display: block;
  height: 100%;
  position: relative;
  z-index: 1
}

.frontPost-container>a[href^="http"]::after {
  content: none
}

.frontPost-container a:hover .frontPost-thumb img {
  box-shadow: 0 0 0 !important
}

.frontPost-article:hover img {
  opacity: 1
}

#frontContent {
  padding: 0 0 20px
}

.frontPost-head {
  opacity: 0.9;
  position: absolute;
  width: 100%;
  top: 0
}

#frontPost-container-top .frontPost-head {
  box-shadow: 0 5px 5px -5px #000 inset
}

#frontPost-container-top .frontPost-container:hover .frontPost-head {
  box-shadow: none
}

h2.frontPost-title {
  margin: 0;
  padding: 5px;
  font-size: 10pt;
  color: #333
}

.frontPost-subtitle-container {
  opacity: 0.8;
  position: absolute;
  width: 100%;
  bottom: 0
}

h3.frontPost-subtitle {
  margin: 0;
  padding: 10px;
  font-size: 11pt;
  color: var(--color-white);
  text-shadow: 1px 1px 3px #000
}

.frontPost-title {
  display: block;
  font-size: 18pt;
  font-weight: bold;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5)
}

.frontPost-subtitle {
  display: block;
  padding: 0 15px 10px;
  background: rgba(000, 000, 000, 0.5)
}

.frontPost-thumb {
  position: relative;
  text-align: center;
  opacity: 0.9;
  height: 150px;
  overflow: hidden
}

.frontPost-thumb>img {
  border: 0 solid #777;
  border-radius: 2px;
  margin: 0 0 -7px;
  position: relative;
  opacity: 0.9
}

div.dreieck {
  border-bottom: 6px solid #aaa;
  border-left: 8px solid transparent;
  border-right: 0 solid;
  height: 0;
  left: 0;
  position: absolute;
  top: -6px;
  width: 0
}

.cat-thumb img {
  height: 30px
}

.cat-thumb {
  background: var(--color-white);
  padding: 10px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: absolute;
  margin: 0 5px;
  top: -35px;
  right: 0;
  box-shadow: 0 0 3px 0 #000
}

.category-name:first-of-type {
  margin-top: 0
}

.category-name {
  display: flex;
  padding: 10px 10px 6px;
  background: var(--color-white);
  margin: 20px 0-5px -1%;
  z-index: 999;
  position: relative;
  box-shadow: 0 8px 5px -5px #888;
  width: 99%
}

.category-name img {
  height: 28px;
  margin-right: 10px;
  margin-top: -3px
}

.frontPost-container:hover .cat-thumb-name {
  max-width: calc(90% - 52px);
  right: 52px;
  -webkit-transition: 1s 1s ease max-width;
  transition: 1s 1s ease max-width
}

.cat-thumb-name {
  position: absolute;
  right: 0;
  max-width: 0;
  height: 22px;
  color: #444;
  background: var(--color-white);
  border-radius: 10px 0 0 10px;
  text-align: left;
  margin-top: -19px;
  padding-right: 0;
  overflow: hidden;
  -webkit-transition: 1s 0s ease max-width, 1s 1s ease right;
  transition: 1s 0s ease max-width, 1s 1s ease right
}

.cat-thumb-name b {
  padding: 6px
}

#frontPost-container-top {
  background: #e2e2e2;
  position: relative;
  z-index: 3;
  border-bottom: 0 solid #bbb;
  margin: auto;
  width: 90%;
  padding: 25px 0;
  box-shadow: 0 0 4px 0 #777 inset
}

#frontPageTop {
  width: 99.4%;
  margin: auto;
  box-shadow: 0 1px 4px 1px #777
}

#frontPageTop::after {
  content: "";
  height: 93%;
  width: 5px;
  background: var(--color-white);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
  border-radius: 5px 0 0 5px;
  box-shadow: -3px 0 3px -2px #444;
  right: 0
}

#frontPageTop::before {
  content: "";
  height: 93%;
  width: 5px;
  background: var(--color-white);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
  border-radius: 0 5px 5px 0;
  box-shadow: 3px 0 3px -2px #444;
  left: 0
}

@media (max-width: 75em) {
  .frontPost-container:hover {
    transform: none;
    z-index: 1;
    box-shadow: 0 0 2px 0 #000
  }

  #frontPageTop {
    width: 100%;
    margin-left: 0
  }

  #frontPageTop:before {
    display: none
  }

  #frontPageTop:after {
    display: none
  }

  #frontPost-container-top {
    margin: 52px 0 -52px;
    width: 100%;
    padding: 0
  }

  #frontPage>h1:first-of-type {
    margin-block: 2rem 0
  }
}

#frontPost-container-top .frontPost-container {
  margin: 0
}

#sidebar-toggle {
  display: none
}

#sidebar {
  width: 30%;
  max-width: 600px;
  background: linear-gradient(90deg, rgb(var(--bgLighterColorCode)) 0%, rgb(var(--bgColorCode)) 100%);
  z-index: 0;
  transform: unset;
  position: relative
}

#sidebar>div:nth-of-type(2) {
  margin-top: 4rem
}

#search-module {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 0 1rem rgba(0 0 0 /0.7));
  width: 100%
}

.sidebar-module {
  margin: 0 auto 2rem;
  width: 80%;
  position: relative
}

.sidebar-module:last-child {
  margin-bottom: 10rem
}

.sidebar-head h2 {
  padding: 0;
  margin-block: 0 1rem;
}

.sidebar-content {
  padding: 0 5px
}

.sidebar-content>*:last-child {
  margin-bottom: 2em
}

.sidebar-content>h2:nth-of-type(n+1) {
  margin-block: 2rem 1rem;
}

.sidebar-content img {
  background: var(--secColor);
  width: 100%
}

@media (max-width: 90em) {
  #sidebar {
    width: 32%
  }
}

@media (max-width: 75em) {
  #sidebar {
    width: 45%;
    z-index: 2;
    position: fixed;
    right: 0;
    height: 100vh;
    scrollbar-width: none;
    overflow-x: hidden;
    -webkit-transform: translatex(100%);
    -webkit-transform-origin: right;
    transform: translatex(100%);
    transform-origin: right;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-duration: 0.4s;
    animation-fill-mode: forwards
  }

  #sidebar-toggle {
    background: var(--terColor);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 10px 0 0 10px;
    z-index: 2;
    bottom: 60px;
    right: 0;
    position: fixed;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    filter: drop-shadow(0 0 1rem rgba(0 0 0 / .3));
    box-shadow: 0 0 .5rem 1px rgba(0 0 0 / .7);
  }

  .sidebar-module {
    width: 90%
  }

  .sidebar-content {
    word-wrap: break-word
  }

  #sidebar::-webkit-scrollbar {
    display: none
  }

  @-webkit-keyframes slideOpen {
    0% {
      -webkit-transform: translatex (100%);
      box-shadow: 0 0 0 #000
    }

    100% {
      -webkit-transform: translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }
  }

  @-webkit-keyframes slideClose {
    0% {
      -webkit-transform: scalex(1) translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }

    38% {
      -webkit-transform: scalex(1.1) translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }

    100% {
      -webkit-transform: scalex(1) translatex(100%);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.3)
    }
  }

  @keyframes toggleOpen45 {
    0% {
      right: 0
    }

    100% {
      right: 70%
    }
  }

  @keyframes toggleClose45 {
    0% {
      right: 70%
    }

    38% {
      right: 77%
    }

    100% {
      right: 0
    }
  }

  @keyframes toggleOpen {
    0% {
      right: 0
    }

    100% {
      right: 45%
    }
  }

  @keyframes toggleClose {
    0% {
      right: 45%
    }

    38% {
      right: 49%
    }

    100% {
      right: 0
    }
  }

  @keyframes slideOpen {
    0% {
      transform: translatex (100%);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.3)
    }

    100% {
      transform: translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }
  }

  @keyframes slideClose {
    0% {
      transform: scalex(1) translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }

    38% {
      transform: scalex(1.1) translatex(0);
      box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3)
    }

    100% {
      transform: scalex(1) translatex(100%);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.3)
    }
  }
}

@media (max-width: 45em) {
  #sidebar {
    width: 70%
  }
}

#footer {
  background: var(--mainColor);
  padding-bottom: 10px;
  width: 100%;
  position: relative;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 2px 0 #2f2f2f
}

#footer-box {
  background: var(--terColor);
  width: 100%;
  box-shadow: 0 0 3px 1px #333;
  color:var(--color-white)
}

#footer-content {
  margin: 0 auto;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center
}

#footer-content>ul {
  margin: 0;
  padding: 0
}

#footer-content li {
  display: inline-block
}

#footer-content a {
  color: var(--color-white);
  display: block;
  padding: 5px 20px
}

#footer-content a:hover {
  color: var(--accentColor);
  background: var(--terColor)
}

#footer-content a:active {
  color: lightvar(--accentColor)
}

@media (max-width: 75em) {
  #footer-content>ul {
    display: flex
  }

  #footer-content li {
    flex: 1
  }
}

.close {
  display: flex
}

.overview-button {
  font-weight: bold;
}

.score-button:nth-child(n 2):after {
  content: " "
}

.overview-buttons-wrapper {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(200 200 200 / 0.2);
  padding-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.login-button.active {
  background: var(--secColor);
  color: rgb(var(--bgColorCode));
}

@media (max-width: 75em) {
  #actsite {
    display: block
  }
}

label {
  position: relative
}

#formSuccess {
  background: #008800 none repeat scroll 0 0;
  border-radius: 10px;
  color: var(--color-white);
  display: block;
  margin: 0px auto;
  padding: 20px;
  width: 88%
}

#formNoSuccess {
  background: #900 none repeat scroll 0 0;
  border-radius: 10px;
  color: var(--color-white);
  font-weight: bold;
  margin: 0px auto;
  padding: 20px;
  width: 88%
}

.CoD {
  color: #f30;
  float: left
}

.CoDSuccess {
  color: #093;
  float: left
}

.errText {
  color: #f30;
  margin: 5px 0 0 90px
}

.formKontakt {
  width: 90%;
  padding: 0 10px;
  margin: 40px auto
}

#h2 {
  color: #000;
  font-weight: bold;
  font-size: 21pt;
  padding: 15px 0
}

.formEingabe {
  background: -moz-linear-gradient(left, rgba(97, 137, 130, 0.25) 0%, rgba(229, 229, 229, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(97, 137, 130, 0.25) 0%, rgba(229, 229, 229, 0) 100%);
  background: linear-gradient(to right, rgba(97, 137, 130, 0.25) 0%, rgba(229, 229, 229, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40618982', endColorstr='#00e5e5e5', GradientType=1);
  margin: 15px;
  padding: 8px;
  border-radius: 3px
}

.formEingabe:first-of-type {
  margin-top: 40px
}

.formEingabe input,
input[type="radio"],
select,
textarea {
  border: 1px solid #aaa !important;
  box-shadow: 1px 1px 3px #ccc
}

.formEingabe [type="text"] {
  position: absolute;
  left: 80px;
  width: 200px
}

.formEingabe [type="email"] {
  position: absolute;
  left: 80px;
  width: 200px
}

.formEingabe select {
  height: 24px;
  left: 80px;
  position: absolute;
  width: 207px
}

.formEingabe textarea {
  margin: -16px 90px 0;
  width: 75%
}

.formSubmitButton {
  margin: 10px 0
}

.formSubmitButton [type="submit"] {
  border: 1px #000 groove;
  box-shadow: 0px 0px 3px #333;
  float: right;
  height: 35px
}

.formSubmitButton [type="submit"]:hover {
  background-color: var(--color-white);
}

.formSubmitButton [type="submit"]:active {
  box-shadow: 0px 0px 1px #333
}

.new-articles {
  display: flex;
  flex-direction: column;
}

.new-articles.raffle-list {
  grid-column: 1;
  grid-row: 1
}

.new-articles h1 {
  margin-block: 2rem 1rem
}

@media (max-width: 75em) {
  .new-articles h1 {
    margin-bottom: 10px
  }
}

.new-game-list-item {
  position: relative;
  filter: drop-shadow(0 5px 7px rgba(0 0 0 / 0.6));
  min-height: 100px;
  display: flex;
  padding: .5rem;
  transition: .2s;
  border-right: .1em solid color-mix(in srgb, var(--bo-color), transparent 25%);
  --bo-color: #00000000;
  border-radius: .8em;
  background: var(--mainColor);
}

.new-game-list-item:hover .bgr-wrapper img {
  scale: 1.1;
  filter: blur(0) grayscale(0)
}

.new-game-list-item:hover .image-wrapper {
  scale: 1.02;
  box-shadow: 0 3px 3px rgba(0 0 0 / .4);
}

.newGame-info {
  display: flex;
  font-size: 0.7rem;
  width: 100%;
  grid-area: 2 / span 2;
  margin-block: 1em 0;
  border-radius: .5em;
  mix-blend-mode: screen;
}

.new-game-item-content {
  width: 96%;
  padding-inline: 4% 2%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.new-game-list-item img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.new-game-info-item img {
  height: 13px;
  padding-right: 4px;
  width: unset;
  position: unset;
  filter: brightness(0)
}

.new-game-list-item .foreign-marker {
  top: unset;
  bottom: 0.5rem;
  right: 1rem;
  width: 3.5rem;
  height: 3.5rem
}

.monochrome {
  filter: contrast(0) brightness(2)
}

.new-game-list-item h2 {
  margin-block: 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between
}

.new-game-list-item h2 span:nth-child(1) {
  align-self: center
}

.new-game-info-item {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px 2px 3px;
  background-color: #b9b9b9;
  color: black;
  mix-blend-mode: screen;
  border-radius: 3px 0 0 3px;
  position: relative;
  margin-right: -6px;
  font-weight: bold;
  clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% 0px)
}

.new-articles-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2em;
}

.new-game-list-item a {
  width: 100%;
  display: grid;
  grid-template-columns: 95px auto;
  grid-template-rows: auto auto;
}

.new-games-list {
  display: grid;
  gap: 1em;
  padding: 0em .5em;
  border-radius: 1em;
}

.new-game-list-item .newGame-info {
  clip-path: polygon(0px 0px, 97% 0px, 94% 100%, 0px 100%);
}

.new-game-list-item:hover {
  filter: drop-shadow(0 7px 13px rgba(0 0 0 / .8));
  border-width: 5px;
  border-color: var(--bo-color);
  padding-right: calc(1em - 5px);
}

.raffle {
  position: relative;
  z-index: 1;
  line-height: 0 !important;
  text-shadow: 1px 1px 8px rgba(0 0 0 / 0.5);
  font-size: 5rem !important;
  bottom: .5em;
  right: .15em;
}

.bgr-image-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

.bgr-image-wrapper img {
  border-radius: 0.8em;
  transition: .2s;
}

.bgr-overlay {
  background: rgba(0, 0, 0, 0.69);
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(15px);
  box-shadow: 0 0 4em 1em rgba(0 0 0 / .7) inset;
  border-radius: .7em;
}

.bgr-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  top: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden
}

.bgr-wrapper img {
  width: 104%;
  height: 104% !important;
  border-radius: inherit;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 0;
  transition: 0.5s ease-in-out;
  filter: blur(5px) grayscale(50%)
}

.bgr-shade {
  background: linear-gradient(90deg, rgba(0 0 0 / 0.8) 45%, rgba(0 0 0 /0.6));
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  border-radius: inherit
}

.span-2 {
  grid-column: span 2
}

.post-item {
  display: flex !important;
  flex-direction: column;
  color: var(--font-normal-color);
  padding: 1% 2% 2% !important;
  align-items: unset !important
}

.post-item h3 {
  color:var(--color-white);
  margin-block: 0 10px
}

.post-item p {
  background: var(--bgColor);
  padding: 20px;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0 0 0 / 0.5) inset
}

.image-wrapper {
  position: relative;
  height: 100%;
  border-radius: .5em;
  overflow: hidden;
  grid-area: 1 / 1;
  min-height: 80px;
}

.new-game-item-content h3 {
  margin-block: 0;
  color:var(--color-white);
  font-size: .8rem;
}

@media (min-width: 75em) {
  .new-articles-wrapper {
    grid-template-columns: auto
  }
}

@media (min-width: 85em) {
  .new-articles-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }
}

@media (max-width: 50em) {

  .new-game-list-item {
    border-right-width: 3px;
  }

  .newGame-info {
    font-size: 0.6rem
  }

  .new-game-info-item {
    padding-block: 1px
  }

  .new-game-list-item h2 {
    font-size: 1.1rem;
  }

  .exp-title {
    font-size: 1.1rem
  }

  .new-articles-wrapper {
    grid-template-columns: auto
  }

  .raffle {
    font-size: 4rem !important;
  }

  .post-item p {
    font-size: 0.8rem
  }

  .span-2 {
    grid-column: unset
  }

  .post-item h3 {
    margin-block: 0
  }
}

.new-game-info-item:not(:first-child) {
  clip-path: polygon(10px 0, 0 100%, calc(100% - 10px) 100%, 100% 0px);
  padding-left: 10px;
  border-radius: 0
}

.pointer {
  width: 30px;
  height: 58px;
  background: var(--accentColor);
  display: block;
  -webkit-filter: drop-shadow(0px 0px 1px #531f00)drop-shadow(-6px 5px 6px rgba(0 0 0 / 0.6));
  -webkit-animation-name: pointerPop;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  filter: drop-shadow(0px 0px 1px #531f00)drop-shadow(-6px 5px 6px rgba(0 0 0 / 0.6));
  animation-name: pointerPop;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  z-index: 1
}

@media (min-width: 75em) {
  .pointer {
    display: none
  }
}

.pointer::after {
  border-top: 40px solid var(--accentColor);
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  content: "";
  position: absolute;
  bottom: -35px;
  left: -15px
}

#sidebarPointer {
  position: fixed;
  bottom: 124px;
  right: 90px
}

@-webkit-keyframes pointerPop {
  0% {
    -webkit-transform: rotate(-52deg) translatey(-22px)
  }

  36.7% {
    -webkit-transform: rotate(-52deg) translatey(-22px)
  }

  45% {
    -webkit-transform: rotate(-52deg)
  }

  50% {
    -webkit-transform: rotate(-52deg) translatey(-11px)
  }

  55% {
    -webkit-transform: rotate(-52deg)
  }

  63.7% {
    -webkit-transform: rotate(-52deg) translatey(-22px)
  }

  100% {
    -webkit-transform: rotate(-52deg) translatey(-22px)
  }
}

@keyframes pointerPop {
  0% {
    transform: rotate(-52deg) translatey(-22px)
  }

  36.7% {
    transform: rotate(-52deg) translatey(-22px)
  }

  45% {
    transform: rotate(-52deg)
  }

  50% {
    transform: rotate(-52deg) translatey(-11px)
  }

  55% {
    transform: rotate(-52deg)
  }

  63.7% {
    transform: rotate(-52deg) translatey(-22px)
  }

  100% {
    transform: rotate(-52deg) translatey(-22px)
  }
}

.modal-friendly ul {
  list-style: square;
  position: relative;
  left: 16px;
  width: calc(100% - 36px);
  padding-left: 20px
}

#sidebarPointer::before {
  content: "Drück mich weg!";
  position: absolute;
  transform: rotate(52deg);
  top: -78px;
  left: -65px;
  font-family: var(--font-heads);
  font-size: 2rem;
  width: 130px;
  text-align: center;
  filter: drop-shadow(0 0 7px var(--accentColor));
  text-shadow: 1px 1px 1px black;
  line-height: 1
}

.user-image::before {
  content: "\e802" !important;
  font-family: "fontello";
  color:var(--color-white);
  aspect-ratio: 1;
  border-radius: 50%;
  line-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -30%;
  font-size: 4rem;
  height: calc(100% + .6rem);
}

.user-image {
  display: flex;
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0.3rem 0.3rem 0.3rem 0 !important;
  background-color: var(--terColor, gray);
  overflow: hidden;
  border: 1px solid var(--terColor, gray);
  filter: drop-shadow(0 0 .2rem rgba(0 0 0 / .4));
  height: 100%;
}

.user-image img {
  object-fit: cover;
  z-index: 0;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0 0 0 / 0.6);
  aspect-ratio: 1
}

@media only screen and (max-width: 90em) {
  #footer {
    padding-bottom: 26px
  }

  #modal-background {
    width: 100%;
    height: 100vh;
    background-color: rgba(0 0 0 / 0.7);
    position: fixed;
    z-index: 2;
    top: 0;
    transition: opacity 0.4s;
    opacity: 0
  }
}

.action-message {
  position: fixed;
  z-index: 6;
  width: 60%;
  padding: 0 20px;
  left: calc(20% - 20px);
  top: 0;
  right: calc(20% - 20px);
  box-shadow: 0 5px 20px rgba(0 0 0 / 0.4);
  display: flex;
  align-items: center;
  transform: translatey(0) scale(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.6, -0.28, 0.74, 0.05), left 0.5s cubic-bezier(0.04, 1.48, 0.67, 0.88)
}

.action-message.success {
  background: #4d8c68
}

.action-message.warning {
  background: #e6833b
}

.message-icon {
  font-size: 40pt;
  width: fit-content;
  margin: 0 20px 0 0
}

.message-text {
  width: 100%
}

.cookie-text {
  display: flex;
  width: fit-content;
  max-width: 75%;
  margin-inline: auto;
  align-items: center;
  justify-content: space-evenly;
  background-color: #485d79;
  padding-block: 10px;
  border-radius: 5px
}

.cookie-text img {
  height: 5vh;
  padding-inline: 5%
}

.cookie-text span {
  font-size: 0.9rem;
  padding-inline: 1%
}

.message-close {
  width: 45px;
  margin-left: 20px;
  font-weight: bold;
  font-size: 60pt;
  cursor: pointer
}

.hide-show::before {
  content: "\e80f";
  font-family: "fontello";
  color: var(--font-normal-color, #666);
  font-size: 1.3rem
}

.show::before {
  content: "\e810"
}

.hide-show {
  position: absolute;
  height: 33px;
  aspect-ratio: 1;
  right: 3px;
  bottom: 3px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center !important;
  width: auto !important
}

@media (max-width: 75em) {
  .action-message {
    z-index: 6;
    padding: 0 10px;
    font-size: 12pt;
    width: 80%;
    right: calc(10% - 10px);
    left: calc(10% - 10px);
    max-height: calc(100vh - 60px);
    overflow: auto
  }

  .message-close {
    width: 25px;
    margin: 0 0 20px;
    font-size: 40pt
  }

  .message-text {
    width: 95%
  }

  .message-icon {
    font-size: 30pt;
    margin: 20px 0 0 0
  }
}

@media (max-width: 50em) {
  .action-message {
    flex-direction: column
  }

  .cookie-text img {
    height: 10vh;
    padding-block: 2% 4%
  }

  .cookie-text {
    margin-bottom: 3em;
    padding: 30px;
    flex-direction: column
  }
}

#submitReadAll {
  max-width: 50%
}

.overview {
  display: flex;
  position: relative;
  margin-bottom: 2rem;
  padding-inline: 0.5rem
}

.stats-box {
  width: 100%
}

.overview-tickets-wrapper {
  position: absolute !important;
  top: 8em;
  right: 3em;
  height: unset !important
}

.overview-tickets {
  display: grid !important;
  background: var(--terColor) !important;
  width: 100%;
  z-index: 1;
}

.overview-tickets h2 {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-bottom: 0;
}

.overview-tickets a {
  position: unset !important;
  color: unset !important;
  width: 100%;
}

.overview-tickets-content {
  display: flex;
  padding: 0 .5rem .5rem .5rem;
  height: max-content;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}

.boardnight-tickets .overview-tickets-content {
  gap: 0 0.5em
}

.overview-tickets-content span {
  font-size: 2rem;
  rotate: -55deg;
  position: relative;
  filter: drop-shadow(0 0 4px rgba(0 0 0 / .8));
  margin-inline: -40px;
}

.overview-tickets-content.not-active span {
  opacity: 0.3
}

.overview-tickets-content.not-active::before {
  content: "Kein Termin";
  position: absolute;
  text-align: center;
  color:var(--color-white);
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 0 0 1rem 1rem;
  z-index: 1;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  backdrop-filter: blur(2px);
}

.used {
  filter: drop-shadow(0 0 4px rgba(0 0 0 / .8)) grayscale(1) !important;
  mix-blend-mode: luminosity;
}

.overview-tickets-wrapper .tooltip-text {
  width: max-content;
  top: -1rem;
  bottom: unset;
  right: 3rem
}

.percentage-bar-wrapper {
  width: 75%
}

.percentage-bar-background {
  background-color: #9f9f9f4d;
  height: 1.5rem;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  margin-block: 0.5rem 0.8rem
}

.percentage-bar {
  position: absolute;
  height: 100%;
  background-color: goldenrod
}

.percentage-bar-wrapper .tooltip-text {
  right: 50%;
  bottom: 150%
}

.stats-box ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 2rem
}

@media (max-width: 45em) {
  .overview-tickets-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    top: 1em;
    right: 1em
  }

  .overview-tickets .fat {
    font-size: 4rem
  }

  .overview-tickets h2,
  .overview-tickets-content span {
    font-size: 1.5rem
  }

  .overview-tickets-image {
    width: 1.5rem !important
  }

  .percentage-bar-wrapper {
    width: 95%
  }

  .overview-tickets-content span {
    margin-inline: -25px;
  }
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: start
}

.login-form>* {
  margin-top: 15px
}

.login {
  width: 100%
}

.login-box {
  width: 300px;
  position: absolute;
  z-index: 9999;
  right: 1.5rem;
  top: calc(var(--header-img-size) + 60px);
  height: 342px;
  pointer-events: none
}

.logout {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.logout>* {
  width: 100%
}

@media (min-width: 75em) {
  .logout {
    flex-direction: row;
    gap: unset
  }
}

.login-box input {
  background: var(--mainColor);
  border: 1px solid #101010;
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4) inset;
  height: 35px;
  color:var(--color-white);
  padding-left: 5px;
  border-radius: 4px
}

.login-box label {
  width: 100%;
  display: flex;
  flex-direction: column
}

a[href="Hilfe/"] button::before {
  content: "\f1cd";
  font-family: "Fontello"
}

a[href="backend/"] button::before {
  content: "\e80d";
  font-family: "fontello"
}

a[href="MeineInfos/"] button::before {
  content: "\f086";
  font-family: "fontello"
}

.account-content>span {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 3rem 0.5rem 0.5rem;
  background: var(--secColor);
  box-sizing: border-box;
  border-radius: 1rem 1rem 0 0;
  color: var(--terColor);
  position: relative
}

.info-open-image {
  transform: rotate(360deg)
}

.account-info .user-image {
  width: 50px;
  box-shadow: 0 0 2px var(--secColor) inset;
  position: absolute;
  top: -20px;
  right: -11px;
  z-index: 1;
  pointer-events: all;
  transition: 0.2s ease-in-out;
  height: 50px;
}

.account-info .user-image:before {
  font-size: 2.7rem;
}

.account-links {
  display: flex
}

.account-links>* {
  flex-grow: 1;
  display: flex
}

.account-links .login-button {
  font-size: 0.8rem;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: rgba(var(--bgColorCode));
  color: var(--font-normal-color);
  box-shadow: unset;
  border-radius: 0;
  border-right: 1px solid #7171716b;
  width: 100%;
}

.account-links .login-button:before {
  font-size: 1.2rem
}

.account-links a:first-child button {
  border-radius: 0 0 0 1rem
}

.account-links form button:last-child {
  border-radius: 0 0 1rem 0;
  border: none
}

#userLoginSubmit {
  margin-bottom: -1.5rem
}

#logoutSubmit::before {
  content: "\e805"
}

#userLoginSubmit::before {
  content: "\e804";
  margin-right: 0.5rem
}

#userLoginSubmit::before,
#logoutSubmit::before {
  font-family: fontello
}

.login-button {
  padding: 0.8rem;
  background: var(--mainColor);
  color:var(--color-white);
  border-radius: .5rem;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.4), 0 0 3px 0px rgba(255, 255, 255, 0.4) inset;
  border: 0;
  font-family: var(--font-texts)
}

login-button:hover {
  background: var(--accentColor)
}

.login-form div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-direction: row-reverse
}

label[for="staylogged"] {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: end;
  font-size: smaller;
  width: fit-content;
  cursor: pointer
}

label[for="staylogged"] span {
  width: min-content
}

.custom-checkbox {
  height: 30px !important;
  width: 30px;
  margin-right: 10px;
  appearance: none;
  position: relative;
  border-radius: 5px;
  background: #444;
  border: 1px solid #222;
  box-shadow: 0 0 6px 0px rgba(0 0 0 / .4) inset
}

.custom-checkbox:checked:before {
  background: #fa8072de;
  width: 20px;
  content: "";
  display: block;
  z-index: 1;
  position: absolute;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  aspect-ratio: 1;
  left: 4px;
  top: 4px
}

#staylogged::after {
  content: "Cookie?";
  background-image: url("../images/site/cookieMonster.svg");
  color: var(--terColor);
  position: absolute;
  display: grid;
  align-items: end;
  justify-content: center;
  top: -200px;
  padding: 2rem;
  background-size: 58%;
  aspect-ratio: 1;
  filter: drop-shadow(0 0 10px rgba(0 0 0 / 0.8));
  height: 120px;
  background-repeat: no-repeat;
  background-position-x: center;
  left: -48px;
  font-size: 1.1rem;
  font-family: var(--font-texts);
  background-color: var(--secColor);
  background-position-y: 21px;
  border-radius: 50%;
  border: 2px solid var(--mainColor);
  scale: 0;
  opacity: 0;
  transition: opacity 0.3s, scale 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 1;
}

#staylogged:hover::after {
  scale: 1;
  opacity: 1;
  transition: opacity 0.3s, scale 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.account-info {
  position: sticky;
  top: 22px;
  height: fit-content;
  border-radius: 1rem
}

.account-content {
  transform: scale(0);
  transition: 0.2s ease-in-out;
  transform-origin: top right;
  filter: drop-shadow(0 5px 10px rgba(0 0 0 /0.8));
  pointer-events: all;
  outline: 1px solid #80808038;
  border-radius: 1rem
}

.info-open {
  transform: scale(1)
}

.login-content {
  background-color: rgba(var(--bgColorCode));
  padding: 1rem 1rem 2rem;
  border-radius: 1rem
}

@media (max-width: 90em) {
  .login-box {
    right: 1rem;
    top: calc(var(--header-img-size) + 50px);
  }

  .account-info {
    top: 17px
  }

  .account-info .user-image {
    width: 43px;
    height: 43px;
  }
}

@media (max-width: 75em) {
  .login-box {
    right: 1rem;
    top: -33px
  }

  .account-info .user-image {
    width: 43px
  }

  #staylogged::after {
    all: unset;
    content: "( Cookie setzen )";
    position: absolute;
    padding: 10px;
    width: max-content;
    font-family: var(--font-texts);
    top: 28px;
    left: 0;
    display: block
  }
}

.search-field {
  background: var(--mainColor);
  border: 0;
  color:var(--color-white);
  width: 100%;
  height: 45px;
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0px 0 2px 1px #42415f inset;
}

.search-field:focus {
  outline: 1px solid var(--secColor);
}

#anchor-searchField {
  height: 35px
}

#anchor-submitSearch {
  height: 33px;
  width: 33px;
  margin-top: 1px
}

.search-button {
  position: absolute;
  height: 45px;
  width: 45px;
  border-radius: 25px;
  border: 0;
  background: var(--mainColor);
  box-shadow: 0 0 1px 0px #000, 0 0 2px #ddd inset;
  color:var(--color-white);
  font-size: 1.6rem;
  padding: 0;
  right: 0
}

.search-box {
  background: var(--terColor);
  border-radius: 0 0 15px 0;
  margin-top: -101px;
  -webkit-transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
  transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
  position: relative;
  padding: 25px 0 35px
}

#search {
  position: relative;
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem
}

label[for="searchField"] {
  width: 100%
}

#anchor-search {
  position: absolute;
  right: 0;
  width: 20%;
  top: -35px;
  display: flex;
  gap: 1rem;
  justify-content: 1rem
}

label[for="anchor-searchField"] {
  width: 100%
}

#anchor-search .login-button {
  height: 35px;
  align-items: center;
  display: flex
}

#search-toggle {
  height: 50px;
  width: 100px;
  position: absolute;
  bottom: -25px;
  left: calc(50% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer
}

#search-toggle .bg-search-toggle {
  width: 80px;
  height: 80px;
  position: absolute;
  color: var(--secColor);
  -webkit-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  background: var(--terColor);
  transform: rotate(45deg) skew(-30deg, -30deg)
}

#search-toggle.active .bg-search-toggle {
  width: 40px;
  height: 40px;
  position: relative;
  color: var(--secColor);
  -webkit-transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  background: var(--accentColor);
  transform: rotate(45deg) skew(-0);
  border-radius: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), inset 0 0 2px rgba(255, 255, 255, 0.4)
}

.leg {
  position: absolute;
  transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 1
}

.left-leg {
  width: 4px;
  height: 7px;
  background: var(--secColor);
  transform: rotate(45deg) translate(6px, 11px)
}

.left-leg.active {
  width: 5px;
  height: 25px;
  background:var(--color-white);
  transform: rotate(45deg)
}

.right-leg {
  height: 8px;
  width: 8px;
  background: transparent;
  border-radius: 20px;
  border: 2px solid var(--secColor);
  transform: translate(3px, 7px)
}

.right-leg.active {
  height: 5px;
  width: 25px;
  background:var(--color-white);
  border: 0px solid transparent;
  transform: rotate(45deg);
  border-radius: 0px
}

@media (max-width: 110em) {
  #anchor-search {
    right: 80px
  }
}

@media (max-width: 75em) {
  .search-box {
    border-radius: 0
  }
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem
}

.extra-infos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5em 5%
}

.extra-info-title {
  border-right: 1px solid var(--font-normal-color);
  grid-column: 1;
  padding-right: 1em
}

.extra-info-value {
  margin-left: 1em;
  grid-column: 2
}

.extra-info-value button:hover {
  color: var(--accentColor)
}

.extra-info-value button {
  background: none !important;
  border: none;
  color: var(--secColor);
  font-family: var(--font-texts);
  padding: 0;
  font-size: medium;
  text-align: left
}

.sidebar-module summary {
  text-align: left
}

summary h3 {
  display: list-item;
  margin-bottom: 0
}

.sidebar-module summary {
  display: flex
}

.sidebar-module details> :not(:first-child) {
  padding-left: 0.5rem
}

.sidebar-module details[open],
.sidebar-module details:not([open]) {
  height: auto
}

.table-grid {
  display: grid;
  grid-template-columns: 10fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  padding: 0.4rem;
  position: relative;
  border-radius: 0.5rem;
  z-index: 1;
  transition: 0.4s;
}

.table-grid:nth-child(odd) {
  background: var(--terColor);
  color:var(--color-white)smoke
}

.table-grid span:nth-child(odd) {
  justify-self: start
}

.table-grid-top:nth-child(1) {
  background-color: #daa52082
}

.table-grid-top:nth-child(2) {
  background-color: #c0c0c082;
  color:var(--color-white)
}

.table-grid-top:nth-child(3) {
  background-color: #d2691e82
}

.table-grid-top:nth-child(1):before,
.table-grid-top:nth-child(2):before,
.table-grid-top:nth-child(3):before {
  position: absolute;
  left: -15px;
  top: -9px;
  z-index: 22;
  color: black;
  rotate: -13deg;
  font-size: 1.5em;
  filter: drop-shadow(2px 3px 3px rgba(0 0 0 / 0.3))
}

.table-grid-top:nth-child(1),
.table-grid-top:nth-child(2),
.table-grid-top:nth-child(3) {
  text-shadow: 1px 1px 2px rgba(0 0 0 / 0.7);
  padding-left: 1.2rem
}

.table-grid-top:nth-child(1),
.table-grid-top:nth-child(2) {
  margin-bottom: 0.5rem
}

.table-grid-top:nth-child(1):before {
  content: "\01F947";
  animation: pulse 5s linear infinite;
  font-size: 1.7em;
  left: -18px
}

.table-grid-top:nth-child(2):before {
  content: "\01F948";
  font-size: 1.6em;
  left: -17px
}

.table-grid-top:nth-child(3):before {
  content: "\01F949"
}

@keyframes pulse {
  0% {
    scale: 1
  }

  5% {
    scale: 1.1
  }

  10% {
    scale: 1
  }

  15% {
    scale: 1.1
  }

  20% {
    scale: 1
  }

  25% {
    scale: 1.1
  }

  30% {
    scale: 1
  }
}

.table-grid:hover {
  scale: 1.05;
  box-shadow: 0 0 15px rgba(0 0 0 / 0.5);
  z-index: 99
}

.table-grid:nth-child(2n 4):hover {
  background-color: rgb(var(--bgColorCode))
}

.table-grid:nth-child(2n 5):hover {
  background-color: var(--mainColor)
}

.played-details summary {
  background: var(--terColor);
  color:var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  margin: 2rem 0 1rem -1rem;
  border: 1px solid transparent
}

.played-details[open] summary {
  border-color: var(--font-normal-color);
  filter: drop-shadow(0 4px 5px rgba(0 0 0 / 0.5))
}

.mini-overview {
  all: unset;
  list-style: none
}

.mini-overview>li {
  margin-bottom: 1rem;
  padding: 0.1rem 1rem;
  border-radius: 0.5rem;
  background-color: #47717a2e;
  position: relative
}

.mini-overview > li > p:first-child {
  width: 86%;
}

.mini-overview ul {
  list-style: none;
  padding: 0 0 1rem 0.3rem
}

.mini-overview>li::before {
  position: absolute;
  font-size: 1.2rem;
  background: #82bab06b;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 0 0.5rem 0 0;
  clip-path: polygon(6px 100%, 100% 92.5%, 100% 0px, 0px 0px);
  padding-left: 0.15rem;
}

.mini-ticktes::before {
  content: "🎟️"
}

.mini-countdown::before {
  content: "\231B"
}

.mini-votes::before {
  content: "\01F3B2"
}

.mini-votes li {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem
}

.mini-votes a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-right: 1px solid var(--font-normal-color);
  width: 70%;
  padding-right: 0.4rem
}

.mini-votes span {
  height: fit-content
}

.vote-value {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1
}

.mini-votes img {
  object-fit: cover;
  height: 1.8rem;
  aspect-ratio: 1;
  width: auto !important;
  position: relative !important;
  border-radius: 1rem
}

.vote-value span {
  margin-inline: 0.2rem
}

.mini-date::before {
  content: "\01F4C5"
}

#landing-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1em;
}

#landing-countdown .time {
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: large;
  color: gold;
  border-right: 1px solid #5f5f5f;
  padding-inline: .5rem;
}

#landing-countdown .time:last-child {
  border: none;
}

.time::before {
  color:var(--color-white);
  font-size: 0.9rem;
  width: 100%;
  text-align: center;
  border-radius: 1rem 1rem 0 0;
}

.time.days::before {
  content: "Tage";
}

.time.hours::before {
  content: "Stunden"
}

.time.minutes::before {
  content: "Minuten"
}

.time.seconds::before {
  content: "Sekunden"
}

.game-infos {
  position: relative
}

.section-background {
  width: calc(100% + 6% + 20px);
  height: 80%;
  position: absolute;
  top: 20%;
  left: 0;
  margin-left: calc(-3% - 10px);
  z-index: -4
}

.section-background img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  filter: grayscale(1)
}

.section-background:before {
  content: "";
  background: radial-gradient(closest-side, rgba(var(--bgColorCode) / 0.9) 0%, rgb(var(--bgColorCode)) 85%);
  position: absolute;
  width: 100%;
  height: 100%
}

.bg-post-accent {
  position: relative;
  clip-path: polygon(5% 7%, 98% 4%, 95% 85%, 5% 93%);
  height: 100%
}

.wrapper {
  position: absolute;
  height: 110%;
  width: 106%;
  margin-top: -26px;
  filter: drop-shadow(0 0 10px rgba(0 0 0 / 0.4));
  z-index: -1
}

.game-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: right;
  float: right;
  margin: 0 0 1em 1em
}

.game-link a {
  display: block;
  background-size: cover;
  border-radius: 5px;
  width: 56px;
  height: 30px
}

.game-link a:hover {
  box-shadow: 0 0 5px 2px var(--accentColor)
}

.bgg-link a {
  background-image: url("../images/site/bgg_logo.png")
}

.how-to-link a {
  background-image: url("../images/site/youtube_logo.png")
}

.rules-link a {
  background-image: url("../images/site/rules.svg")
}

.game-link a[href^="http"]::after {
  display: none
}

.info-box span {
  color: var(--color-white);
  font-weight: bolder
}

.bg-post-box-img img {
  max-height: 500px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(0 0 0 / 0.5))
}

.bg-post-box-info {
  width: 27%;
  align-items: center;
  justify-content: center;
  display: flex;
  z-index: 1;
  margin-left: 5%
}

.bg-post-box-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65%;
  z-index: 1;
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg)
}

@media (max-width: 75em) {
  .wrapper {
    width: 100%
  }

  .bg-post-accent {
    clip-path: polygon(3% 4px, 98% 4%, 98% 91%, 5% 89%)
  }

  .game-links {
    width: calc(100% + 24px + 6%);
    float: unset;
    margin: -1.5em 0 3em calc(-12px - 3%);
    gap: 0;
    flex-wrap: unset;
    justify-content: space-evenly
  }

  .game-link {
    float: unset;
    width: 100%;
    border-radius: 0
  }

  .game-link a {
    width: 100%;
    height: 45px;
    background-size: 60px;
    background-repeat: no-repeat;
    border-radius: 0;
    background-position: center
  }

  .rules-link {
    background-color: #38a962
  }

  .how-to-link {
    background-color: #d40000
  }

  .bgg-link {
    background-color: #3e3b61
  }

  .bg-post-box-info {
    width: 37%
  }

  .time.days::before {
    content: "D";
  }

  .time.hours::before {
    content: "H"
  }

  .time.minutes::before {
    content: "M"
  }

  .time.seconds::before {
    content: "S"
  }
}

.bg-post-box-bgr-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.7);
  background: linear-gradient(96deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.75) 51%, rgba(0, 0, 0, 0.9) 88%)
}

.bg-post-box-bgr {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(4% 3%, 100% 0, 97% 97%, 0 100%)
}

.bg-post-box-bgr-img {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center
}

.bg-post-box-bgr-img img {
  width: 100%;
  object-fit: cover;
  filter: blur(9px);
}

@media (max-width: 75em) {
  .bg-post-box-bgr {
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%)
  }

  .bg-post-box-img {
    width: 58%
  }

  .bg-post-box-img a {
    width: 100%
  }

  .bg-post-box-imgimg {
    max-width: 100% !important
  }
}

.bg-post-box {
  position: relative;
  padding: 25px 0;
  display: flex;
  justify-content: center;
  margin-bottom: 65px;
  filter: drop-shadow(0 2px 6px rgba(0 0 0 / 0.4))
}

.foreign-marker {
  position: absolute;
  top: -.5rem;
  right: 1rem;
  z-index: 2;
  background: #5757d5;
  border-radius: 50%;
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 5px rgba(0 0 0 / 0.4))
}

.foreign-marker::before {
  content: "";
  background-image: url(../images/site/alien.svg);
  position: absolute;
  background-repeat: no-repeat;
  background-size: 60%;
  height: 100%;
  width: 100%;
  background-position: center;
  animation-name: glow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out
}

@media (max-width: 75em) {
  .bg-post-box {
    margin: 0 calc(-11px - 3%) 65px calc(-12px - 3%);
    padding: 25px 10px
  }
}

@media (max-width: 45rem) {
  .foreign-marker {
    height: 3.5rem;
    width: 3.5rem;
    top: -2.5rem;
  }
}

.bg-post-box td {
  vertical-align: middle;
  text-align: center;
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serift
}

.info-box {
  filter: brightness(100);
  letter-spacing: 2px;
  font-size: 1.3rem;
}

.bg-post-box td:nth-child(2n 1) {
  width: 25%
}

.bg-post-box td:nth-child(2n) {
  width: 75%
}

@media (max-width: 75em) {
  .bg-post-box td:nth-child(2n 1) {
    width: 30%
  }

  .bg-post-box td:nth-child(2n) {
    width: 70%
  }
}

#bg-exp-box {
  margin-top: 60px;
  position: relative
}

.game-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1em;
  margin-block: 3em 1rem
}

.user-input {
  background: var(--terColor);
  border-radius: 10px;
  padding: 10px;
  font-size: inherit;
  font-family: inherit;
  color:var(--color-white);
  border: none;
}

.collapsible {
  width: 100%;
  border: 0;
  background: var(--terColor);
  color: #eee;
  font-size: inherit;
  font-family: inherit;
  padding: 10px;
  margin-top: 30px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0
}

.collapsible.active {
  border-radius: 10px 10px 0 0;
  transition: 0s 0.01s
}

.disabled::after {
  content: "Verliehen";
  padding: 2px 8px;
  border-radius: 10px;
  color: rgb(184, 184, 184)
}

.disabled::after {
  content: "Verliehen";
  padding: 2px 8px;
  border-radius: 10px;
  color: rgb(184, 184, 184);
}

.disabled.sold::after {
  content: 'Verkauft';
}

.user-input.disabled,
.user-input.setgame {
  cursor: not-allowed
}

.no-parti::after {
  content: "Teilnahme bestätigen"
}

.no-date::after {
  content: "Noch kein Datum"
}

.no-owner::after {
  content: "Besitzer nimmt nicht teil"
}

.user-input.disabled {
  background: rgb(82, 82, 82) !important
}

.user-input.setgame {
  background: mediumseagreen !important
}

.setgame:after {
  content: "Gesetzt";
  background-color:var(--color-white);
  padding-inline: 8px;
  border-radius: 10px;
  color: mediumseagreen
}

.interaction-container form {
  display: flex;
  width: 100%;
  align-items: center;
  height: 100%
}

@media (max-width: 75em) {
  .interaction-container form {
    flex-direction: column-reverse;
    height: unset
  }
}

.interaction-container {
  position: relative;
  height: 60px;
  max-width: max-content;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: var(--mainColor);
  border-radius: 10px;
  box-shadow: 0 0 .5rem 2px rgba(0 0 0 / 0.7);
  z-index: 1;
  width: 50%;
}

.interaction-title {
  position: absolute;
  top: -3rem;
  font-family: var(--font-heads);
  color:var(--color-white);
  font-size: 2rem;
  left: 0;
}

@media (max-width: 75em) {
  .interaction-container {
    height: auto;
    width: 80%
  }
}

.post-text>.rating.interaction-container {
  margin-bottom: 0
}

.interaction-output {
  margin: 0 20px 0 0;
  background: var(--terColor);
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  box-shadow: 0px 1px 3px 0px #222 inset, 0 1px 5px -3px #fff
}

.interaction-submit {
  background: var(--accentColor);
  color:var(--color-white);
  border-radius: 8px;
  border: unset;
  box-shadow: 0 0 6px -2px #000, 0 0 2px #fff inset;
  height: 50px;
  font-family: proxima nova semibold;
  font-size: 1rem;
  min-width: 6em;
}

@media (max-width: 75em) {
  .interaction-submit {
    width: 50%
  }
}

.interaction-controls>button[disabled] {
  opacity: 0.5
}

.interaction-submit:hover {
  box-shadow: 0 0 3px #000, 0 0 3px 0px #fff inset;
  transform: scale(102%)
}

.interaction-controls {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 5px 0 20px
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 80%
}

.fav-button {
  background-color:var(--color-white);
  width: 3em;
  mask-image: url('../images/site/heart.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('../images/site/heart.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  border: none;
  transition: .4s;
}

.fav-button:active {
  scale: 1.5;
}

.favorite {
  background-color: #e14040;
  mask-image: url('../images/site/heart_full.svg');
  -webkit-mask-image: url('../images/site/heart_full.svg');
}

@media (max-width: 75em) {
  .interaction-controls {
    width: 100%;
    padding: 0 20px;
    width: 98%
  }

  input[type="range"] {
    width: 90%;
    padding: 2em 1em;
    border-radius: 1rem;
    box-shadow: 1px 1px 10px 0px rgba(0 0 0 / 0.3) inset;
    background: var(--terColor)
  }
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 5px solid var(--secColor);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: var(--terColor);
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 0 0 4px 1px #333
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  cursor: pointer;
  background-color: var(--secColor);
  height: 3px
}

input[type="range"]::-moz-range-thumb {
  border: 5px solid var(--secColor);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: var(--terColor);
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 0 0 4px 1px #333
}

input[type="range"]::-moz-range-track {
  width: 100%;
  cursor: pointer;
  background-color: var(--secColor)
}

input[type="range"]:focus {
  outline: none
}

.your-results {
  background: var(--terColor);
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  padding: 1em;
  box-shadow: 0 2px 5px 1px rgba(0 0 0 / 0.7), 0 2px 6px -4px #fff inset;
  margin: 0 0 1rem 2rem;
  gap: 1rem
}

.your-results span {
  font-size: xx-large;
  font-weight: bold;
  line-height: 23px;
  color: gold;
  margin-top: 6px;
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
  letter-spacing: 1px;
  -webkit-animation-name: scoreloop;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: cubic-bezier(1, -0.74, 0, 1.7);
  animation-name: scoreloop;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  animation-timing-function: cubic-bezier(1, -0.74, 0, 1.7)
}

.your-results img {
  width: 3rem;
}

.otherVotes-List {
  position: relative;
  font-size: 1.2rem;
  width: 96%;
  margin-top: 2rem;
}

.otherVotes-List p {
  display: grid;
  grid-template-columns: 5fr 1fr;
  background: rgba(0 0 0 / 0.5);
  padding: 0.5rem;
  border-radius: 0.5rem
}

.otherVotes-List a {
  border-right: 1px solidvar(--color-white);
  padding-right: .5em;
  margin-right: .5em;
}

.otherVotes-List p span:last-child {
  color: gold;
  font-weight: bold
}

.otherVotes-List p span:last-child img {
  height: 1.2rem;
  margin-left: 0.5rem;
  align-self: center
}

.otherVotes-List p span {
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 75em) {
  .your-results {
    margin-top: -1.5rem
  }
}

@-webkit-keyframes scoreloop {
  0% {}

  20% {
    transform: rotatey(1080deg)
  }

  100% {
    transform: rotatey(1080deg)
  }
}

@keyframes scoreloop {
  0% {}

  20% {
    transform: rotatey(1080deg)
  }

  100% {
    transform: rotatey(1080deg)
  }
}

.tooltip .tooltip-text {
  position: absolute;
  background: #333;
  padding: 10px;
  border-radius: 8px;
  filter: drop-shadow(0 10px 20px rgba(0 0 0 / 0.7));
  visibility: hidden;
  z-index: 99;
  font-family: var(--font-texts), tahoma, helvetica, arial, sans-serif
}

.tooltip:hover .tooltip-text {
  visibility: visible
}

.tooltip {
  position: relative;
  aspect-ratio: auto !important;
}

.tooltip-text {
  bottom: 40px;
  right: 70px
}

.bg-animation-ready {
  opacity: 0
}

.bg-animate.wrapper {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-name: bgr-pop;
  animation-duration: 0.4s;
  animation-name: bgr-pop
}

.bg-animate.infos {
  -webkit-animation-duration: 0.3s;
  -webkit-animation-name: fly-pop-left;
  -webkit-animation-delay: calc(0s + var(--index));
  animation-duration: 0.3s;
  animation-name: fly-pop-left;
  animation-delay: calc(0s + var(--index))
}

.bg-animate.pic {
  -webkit-animation-delay: 0.1s;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-name: fly-pop-bottom;
  animation-duration: 0.4s;
  animation-name: fly-pop-bottom;
  animation-delay: 0.1s
}

.bg-animate.bgr {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: bgr-pop;
  animation-duration: 0.5s;
  animation-name: bgr-pop
}

.bg-animate.foreign-marker {
  animation-duration: 0.05s;
  animation-name: pop;
  animation-delay: 0.7s;
  animation-timing-function: cubic-bezier(0, 1.84, 0.87, 1.16)
}

.bg-animate {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.67, 0.8, 0.34, 1.11);
  animation-timing-function: cubic-bezier(0.67, 0.8, 0.34, 1.11);
  animation-fill-mode: forwards;
  --index: 0
}

@media (max-width: 75em) {
  .bg-animate.bgr {
    -webkit-animation-name: bgr-nopop;
    animation-name: bgr-nopop
  }
}

.bg-animate:nth-child(1) {
  --index: 0.1s
}

.bg-animate:nth-child(2) {
  --index: 0.15s
}

.bg-animate:nth-child(3) {
  --index: 0.2s
}

.bg-animate:nth-child(4) {
  --index: 0.25s
}

.bg-animate:nth-child(5) {
  --index: 0.3s
}

.bg-animate:nth-child(6) {
  --index: 0.35s
}

.bg-animate:nth-child(7) {
  --index: 0.4s
}

.bg-post-box-info tr:nth-child() {
  animation-delay: calc(0.1s + ns);
  -webkit-animation-delay: calc(0.1s + ns);
}

@-webkit-keyframes fly-pop-left {
  from {
    -webkit-transform: scale(0) translatex(-200px);
    opacity: 0
  }

  to {
    -webkit-transform: scale(1) translate(0px);
    opacity: 1
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes fly-pop-left {
  from {
    transform: scale(0) translatex(-200px);
    opacity: 0
  }

  to {
    transform: scale(1) translate(0px);
    opacity: 1
  }
}

@-webkit-keyframes fly-pop-bottom {
  from {
    -webkit-transform: scale(0) translatey(-100%) rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform: scale(1) translatey(0px) rotate(-1deg);
    opacity: 1
  }
}

@keyframes fly-pop-bottom {
  from {
    transform: scale(0) translatey(-100%) rotate(45deg);
    opacity: 0
  }

  to {
    transform: scale(1) translatey(0px) rotate(-1deg);
    opacity: 1
  }
}

@-webkit-keyframes bgr-pop {
  0% {
    -webkit-transform: translatex(-100%) skewx(0);
    opacity: 0
  }

  50% {
    -webkit-transform: translatex(0) skewx(-3deg);
    opacity: 0.6
  }

  70% {
    -webkit-transform: translatex(0) skewx(0deg);
    opacity: 0.8
  }

  90% {
    -webkit-transform: translatex(0) skewx(-2deg);
    opacity: 0.9
  }

  100% {
    -webkit-transform: translatex(0) skewx(0deg);
    opacity: 1
  }
}

@keyframes bgr-pop {
  0% {
    transform: translatex(-100%) skewx(0);
    opacity: 0
  }

  50% {
    transform: translatex(0) skewx(-3deg);
    opacity: 0.6
  }

  70% {
    transform: translatex(0) skewx(0deg);
    opacity: 0.8
  }

  90% {
    transform: translatex(0) skewx(-2deg);
    opacity: 0.9
  }

  100% {
    transform: translatex(0) skewx(0deg);
    opacity: 1
  }
}

@-webkit-keyframes bgr-nopop {
  from {
    -webkit-transform: skew(0, 0);
    opacity: 0
  }

  to {
    -webkit-transform: skew(0, 0);
    opacity: 1
  }
}

@keyframes bgr-nopop {
  from {
    transform: skew(0, 0);
    opacity: 0
  }

  to {
    transform: skew(0, 0);
    opacity: 1
  }
}

.score-bar-details {
  height: auto !important;
  margin-bottom: 5rem
}

.score-bar-wrapper {
  display: flex;
  gap: 0.5rem;
  width: 95%;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-left: 3%
}

.score-bar-background {
  width: 90%;
  margin: 0
}

.score-bar-wrapper span {
  width: 5%;
  text-align: right
}

.score-bar-wrapper span:last-of-type {
  text-align: center
}

.score-bar-summary {
  text-align: left;
  margin-bottom: 2rem
}

.score-bar-summary::marker {
  content: unset !important;
  font-size: unset;
  color: unset
}

@media (max-width: 90em) {
  .score-bar-wrapper span {
    width: 7%
  }
}

@media (max-width: 75em) {
  .score-bar-wrapper span {
    width: 9%
  }
}

@media (max-width: 45em) {
  .score-bar-wrapper span {
    width: 15%
  }

  .score-bar-wrapper {
    margin-bottom: 0.1rem
  }

  .score-bar-background {
    height: 1rem
  }
}

.bg-box:hover .bg-box-info {
  z-index: 0;
  transition: 0.3s ease-in-out 1s
}

#legend {
  background: var(--terColor);
  width: 100%;
  color:var(--color-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 3px;
  margin-block: 40px
}

@media (max-width: 90em) {
  #legend {
    margin-top: 20px !important
  }
}

#legend img {
  padding: 10px 10px 10px 0;
  margin-right: 3px;
  height: auto;
  width: 32px;
}

.playercount-title {
  display: flex
}

.legend-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.legend-wrap form {
  width: 10%
}

.legend-item {
  position: relative;
  padding: 0.5em;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  height: 58px
}

.legend-item.active::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--accentColor);
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px
}

.legend-item.active:hover::before {
  background-color:var(--color-white)
}

.box {
  border-radius: .5rem;
  filter: drop-shadow(0 4px 7px rgba(0 0 0 / 0.5));
}

.bg-box {
  width: 100%;
  display: flex;
  position: relative;
  transition: 0.1s all linear;
  aspect-ratio: 1 / 1.2;

  &:hover {
    scale: 1.05;
    z-index: 2;
  }
}

.vote-box-wrapper {
  filter: drop-shadow(0 2px 2px rgba(0 0 0 /0.5));
  position: absolute;
  top: -5px;
  left: -10px;
  z-index: 2;
  transition: 0.3s ease-in-out 0s
}

.vote-box {
  height: 25px;
  background-color: goldenrod;
  color:var(--color-white);
  padding-inline: .5rem 1.2rem;
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  border-radius: 3px 0 0 0;
  clip-path: polygon(0 0, 0 100%, 10px calc(100% + 6px), calc(100% - 15px) calc(100% + 6px), 100% 0);
  text-shadow: 1px 1px 1px rgba(0 0 0 / 0.4);
  font-style: italic;
}

.vote-box::before {
  content: "";
  width: 10px;
  height: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: inherit;
  filter: brightness(65%)
}

.vote-box-back-wrapper {
  z-index: 2;
  position: absolute;
  top: -5px;
  left: -10px;
  filter: drop-shadow(0 0 3px rgba(0 0 0 /0.4));
  opacity: 0;
  transition: 0.3s ease-in-out 0s
}

.vote-box-back {
  height: 40px;
  width: 15px;
  filter: brightness(65%);
  border-radius: 4px 0 0 0;
  clip-path: polygon(0px 0px, 100% 20%, 100% 100%, 0 80%);
  background-color: goldenrod
}

.bg-box:hover .bg-box-img img {
  scale: 1.1
}

.bg-box:hover .vote-box-back-wrapper {
  opacity: 1;
  transition: 0.3s ease-in-out 1s
}

.rented {
  background-color: indianred
}

.set-game {
  background-color: mediumseagreen
}

.own-tickets {
  margin-left: 5px;
  height: 90%
}

.bg-box table {
  color:var(--color-white);
  height: 100%
}

.bg-box td {
  padding: 5px;
  border-radius: 5px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold
}

.bg-box-img {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius-regular);
  display: flex;
  align-items: center;
  overflow: hidden
}

.bg-box a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: transparent
}

.bg-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s ease-in-out;
  scale: 1.01;
}

.bg-box-title {
  background: linear-gradient(0deg, rgba(0 0 0 / .5) 30%, transparent);
  padding: 3rem .5rem 1rem;
  width: 100%;
  z-index: 0;
  align-self: flex-end;
  margin: 0;
  text-shadow: 0px 0px 5px #000;
  color:var(--color-white);
  border-radius: 0 0 var(--border-radius-regular) var(--border-radius-regular);
  word-wrap: anywhere;
  text-wrap-style: balance;
}

.bg-box:hover .bg-box-title {
  color: var(--accentColor);
}

.bg-box-info {
  background-color: rgba(0 0 0 / 0.6);
  z-index: 1;
  position: absolute;
  right: 0;
  border-radius: 0 var(--border-radius-regular) 0 0;
  padding-bottom: 4%;
  padding-left: 2%;
  clip-path: polygon(4px 0, 0 calc(100% - 10px), 104% 100%, 104% 0);
  transition: 0.3s ease-in-out 0s;
}

.bg-info-item {
  height: 20px;
  width: 20px;
  padding: 0 10px 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
  font-size: 1.4rem;
  filter: drop-shadow(0 0 3px rgba(0 0 0 / .5));
}

.fav-info-item {
  height: 20px;
}

.bg-info-item img {
  height: auto
}

.bg-info-item.vote {
  color: gold
}

.bg-info-item:last-child {
  border-radius: 0 0 0 15px
}

.bg-info-item:first-child {
  padding-top: 10px
}

.bg-info-item.not img {
  opacity: 30%
}

.bg-box:hover .bg-box-hover-info {
  transform: scale(1);
  filter: drop-shadow(0 8px 15px rgba(0 0 0 / 0.8)) blur(0);
  transition-delay: 1s;
  transition-duration: 0.125s
}

.bg-box-hover-info {
  background-color: #41646bc9;
  position: absolute;
  right: 90%;
  z-index: 2;
  border-radius: 15px;
  align-self: center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: max-content;
  transform: scale(0);
  filter: drop-shadow(0 0 25px rgba(0 0 0 / 0.8)) blur(50px)
}

@media (max-width: 90em) {
  .bg-box-hover-info {
    right: unset;
    left: 0
  }
}

.bg-box:focus {
  transform: scale(1.05);
  transition: 0.1s linear;
  box-shadow: 0 0 5px 2px var(--accentColor)
}

.card-back-info-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  gap: 0.2rem
}

.single-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  background-color: #82bab0a6;
  border-radius: 0.3rem;
  color:var(--color-white);
  font-size: 0.9rem;
  font-weight: bold
}

.single-info img {
  width: 25%;
  object-fit: contain;
  filter: drop-shadow(1px 1px 3px rgba(0 0 0 / 0.7))
}

.single-info span {
  filter: brightness(100)
}

.bg-box-hover-info .single-info>span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: 20px
}

.bg-box-hover-info::before {
  content: "";
  width: 30px;
  height: 60px;
  background-color: #41646bc9;
  position: absolute;
  right: -30px;
  top: 40%;
  clip-path: polygon(100% 50%, 0 0, 0 100%)
}

.bg-box-wrapper {
  position: relative;
  height: max-content;
  border-top: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2rem;
  margin-bottom: 1em;
  justify-items: center;
}

#bg-exp-post-wrapper {
  margin-bottom: 35pt
}

.parent-game-container {
  padding-bottom: 25px
}

#boardgame-grid h1 {
  margin: 5rem 0 2rem;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 1rem;
}

#boardgame-grid h1:first-of-type {
  margin-top: unset;
}

#boardgame-grid h1>a {
  display: flex;
  align-items: center;
}

.bg-overview-thumb {
  justify-self: end;
  grid-column: 3;
}

.bg-overview-thumb img {
  height: 25px;
  filter: grayscale(1) brightness(5);
}

.bg-grid-details {
  height: auto !important;
  color: var(--font-normal-color);
  font-size: large;
  font-family: var(--font-texts), tahoma, helvetica, arial, sans-serif
}

.bg-grid-details summary {
  text-align: right
}

.bg-grid-details>div {
  border: 1px solid rgba(var(--simple-font-color-base) var(--simple-font-color-base)var(--simple-font-color-base) / 0.4);
  padding: 10px;
  border-radius: 10px;
  margin-top: 5px;
  position: absolute;
  left: 5%;
  max-width: calc(90% - 20px);
  z-index: 3;
  background: var(--mainColor);
  filter: drop-shadow(0 1rem .5rem rgba(0 0 0 / .7));
}

.card-back-title-wrapper {
  position: absolute;
  bottom: 0.5rem;
  width: 45%;
  right: -5px;
  filter: drop-shadow(0 2px 5px rgba(0 0 0 / 0.4))
}

.card-back-title {
  background-color: var(--accentColor);
  padding-left: 1rem;
  font-family: var(--font-heads);
  color:var(--color-white);
  font-size: 1.5rem;
  clip-path: polygon(100% 0, 2% 0, 9% 100%, 98% 90%);
  border-radius: 0 0.2rem 0.7rem 0
}

.single-info:first-child {
  border-top-left-radius: 0.8rem
}

.single-info:last-child {
  border-bottom-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem
}

.single-info:nth-child(2) {
  border-top-right-radius: 0.8rem
}

.single-info:nth-last-child(2) {
  border-bottom-right-radius: 0.8rem
}

@media (max-width: 45em) {
  .bg-box-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.2rem
  }
}

@media (max-width: 75em) {
  .single-info {
    font-size: 0.8rem
  }

  .bg-info-item {
    font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
    font-size: 1.2rem;
    height: 15px;
    width: 15px;
  }

  .vote-box {
    font-size: unset;
  }
}

#time-container {
  color:var(--color-white);
  display: grid;
  margin-bottom: 3em;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem
}

#time-container>h1 {
  font-size: calc(2vw + 3vh + 2vmin);
  text-align: center;
  margin-block: 2rem 1rem;
  grid-area: 1/1 / span 1 / span 2
}

#time-container span {
  margin-top: 0;
  text-align: center;
  color: gold;
}

#time-container .edit-button {
  color: var(--font-normal-color);
  position: absolute;
  right: 0.5em;
  top: 0;
  color:var(--color-white);
  height: 40px;
  width: 40px;
  background: none;
  align-items: start
}

.time-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: var(--terColor);
}

.bordered-box h2 {
  text-align: center;
  color:var(--color-white);
  margin: 1rem;
}

.participants {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
}

.participant>.user-image {
  position: relative;
  margin-right: 0 !important;
  height: 50px;
}

.participants>span {
  align-items: center;
  justify-content: center;
  font-size: 1em !important;
  height: max-content;
  position: relative;
  text-transform: capitalize;
}

#participation-form {
  align-self: end
}

#countdown {
  display: grid;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 2rem);
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

#countdown .numbers {
  display: grid;
  align-content: center
}

.countdown-card {
  border-right: 1px solid lightgray;
  /*! padding-inline: 10%; */
}

.countdown-card:last-child {
  border: none;
}

.countdown-card:only-child>div {
  animation: blink 1s;
  animation-iteration-count: infinite
}

@keyframes blink {
  50% {
    color: #ff0000
  }
}

.countdown-card div {
  text-align: center;
  color:var(--color-white);
}

.boardnight-tickets span {
  font-size: 2.5rem
}

.time-box:first-of-type {
  grid-area: 2 / 1 / span 1 / span 1
}

.time-box:nth-of-type(2) {
  grid-area: 2 / 2 / span 8 / span 1
}

.time-box:last-of-type {
  grid-area: 3 / 1 / span 7 / span 1
}

.time-box-content {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100%;
  width: 100%;
  padding: 0rem 1rem 1rem 1rem;
  box-sizing: border-box;
  grid-template-rows: 0fr;
}

@media (max-width: 90em) {
  .countdown-card {
    padding-inline: 8%;
  }
}

@media (max-width: 45em) {
  #time-container {
    grid-template-columns: 1.3fr 1fr;
    gap: 1rem
  }

  #countdown {
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: center;
  }

  .countdown-card {
    width: 80%;
    border-bottom: 1px solid lightgray;
    border-right: navajowhite;
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
  }

  .countdown-card div {
    font-size: 0.8rem;
  }

  .time-box-content {
    padding: 0 1rem 1rem 1rem;
  }

  .bordered-box h2 {
    font-size: larger
  }

  .boardnight-tickets span {
    font-size: 2rem
  }
}



.fat {
  font-family: var(--font-heads), tahoma, helvetica, arial, sans-serif;
  font-size: 7rem;
  color: gold;
  line-height: 1.2;
  display: flex;
  position: absolute;
  vertical-align: middle;
  padding: 0 10px;
}

.bg-box-wrapper p {
  flex-direction: column;
  align-items: center;
  background: var(--terColor);
  float: left;
  margin: 0;
  padding: 2rem 1rem;
  width: 100%;
  color:var(--color-white);
  font-size: initial;
  aspect-ratio: auto
}

.tickets-left-img {
  width: 6rem !important;
  object-fit: unset !important;
  display: unset !important;
  margin-left: 20px
}

.bn-details {
  height: auto !important;
  padding-left: 1rem
}

.bn-details[open] {
  margin-bottom: 1.3rem
}

.bn-details h4 {
  margin-block: 0.7rem
}

.bn-details summary {
  display: flex;
  margin-left: -0.5rem
}

.bn-details summary h4 {
  display: list-item
}

.participants-list {
  padding: 0 0 0 1rem
}

.participants-list span:after {
  content: "|";
  margin-inline: 0.5rem
}

.participants-list span:last-child::after {
  content: none
}

.toplist-container {
  margin-bottom: 5em;
  width: 100%
}

.toplist-container div>a {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 100%
}

#sidebar .toplist-item:hover img {
  -webkit-transform: scale(2, 1.6);
  -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: scale(1, 0.45);
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  height: 250%
}

#sidebar .toplist-item:hover {
  -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -webkit-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

#sidebar div a>img {
  position: absolute;
  width: 100%;
  display: flex
}

#sidebar div .topTenTitle {
  z-index: 1;
  padding: 10px;
  margin: 0;
  text-shadow: 0 0 2px #333;
  position: relative;
  width: calc(100% - 20px);
  border-radius: 0 0 5px 5px;
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.rank {
  z-index: 1;
  background: var(--secColor);
  border-radius: 50px;
  color:var(--color-white)smoke;
  font-weight: bold;
  margin: 10px;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13pt;
  box-shadow: 1px 1px 3px #222;
  text-shadow: 1px 1px 2px #222;
  top: 58px
}

#sidebar .toplist-item:hover .rank {
  -webkit-transform: scale(0.9999, 0.64);
  -webkit-transition: 0.6s cubic-bezier(0.75, -0.32, 0.23, 1.4) 0.1s;
  transform: scale(0.9999, 0.45);
  transition: 0.6s cubic-bezier(0.75, -0.32, 0.23, 1.4) 0.1s;
  z-index: 1;
  color: gold
}

#sidebar .toplist-item:hover .topTenTitle {
  -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -webkit-transform: scale(0.9999, 0.6) !important;
  transform: scale(0.9999, 0.45) !important;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  background: linear-gradient(0deg, rgba(0 0 0 / 0.8) 40%, transparent);
  padding: 40px 10px 10px;
  position: absolute
}

.points.rank {
  height: 40px;
  width: 40px
}

.place.rank {
  transform: scale(0);
  -webkit-transform: scale(0);
  top: 0;
  right: 80px
}

#sidebar .toplist-item:hover .place {
  -webkit-transition-delay: 0.4s;
  -webkit-transform: translatex(42px) scale(0.999, 0.64);
  transform: translatex(42px) scale(0.999, 0.45);
  transition-delay: 0.4s;
  padding: 0 40px 0 10px;
  height: 40px;
  font-size: 15pt
}

#sidebar .toplist-item:hover .points {
  width: 70px;
  height: 70px;
  font-size: xx-large;
  -webkit-transform: scale(0.9999, 0.45) translatey(-50px) rotate(360deg);
  transform: scale(0.9999, 0.45) translatey(-170px) rotate(360deg)
}

.toplist-item {
  position: relative;
  width: 100%;
  -webkit-transform: skew(0deg, -2deg);
  transform: skew(0deg, -2deg);
  margin-bottom: 15px;
  display: flex;
  flex-direction: column
}

.toplist-img-box {
  width: 100%;
  height: 100px;
  border-radius: 10px 2px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 5px 0px rgba(0 0 0 / 0.3)
}

.toplist-img-box img {
  width: 100%;
  object-fit: cover
}

.toplist-item:hover>a {
  transform: scale(1.1, 2.5);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.toplist-item:hover .toplist-img-box {
  box-shadow: 0 3px 10px 0 rgba(0 0 0 / 0.6);
  border-radius: 3px;
  -webkit-transition: 0.5s;
  transition: 0.5s
}

.toplist-item:hover .dummy {
  position: relative !important;
  padding: 10px !important
}

.topTenTitle.dummy {
  visibility: hidden;
  position: absolute !important
}

@media (max-width: 75em) {
  #sidebar div .topTenTitle {
    font-size: 12pt;
    bottom: -1px
  }

  .place.rank {
    width: 90px
  }
}

.highlight-cards-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 2em 2em 3em;
  margin-left: -2em;
  position: relative
}

.highlight-cards-wrapper:hover .slider:before {
  scale: 1;
}

.highlight-card {
  display: grid;
  width: 100%;
  gap: 1rem 2rem;
  position: relative;
  grid-template-columns: max-content auto auto;
  color: #f5f5f5;
  padding: 1.5rem;
  box-sizing: border-box;
  /*! text-rendering: optimizelegibility; */
  filter: drop-shadow(0 0.5rem 1rem rgba(0 0 0 /0.8)) blur(4px);
  border-radius: 1.1rem;
  flex-shrink: 0;
  margin-right: 4em;
  translate: calc(-100% - 4em);
  grid-template-rows: max-content max-content auto;
  scale: 0;
}

.highlight-card a {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 1
}

.highlight-card:hover h2 {
  color: var(--secColor);
}

.image {
  grid-area: 1/1 / span 2 / span 1;
  height: 230px;
  filter: drop-shadow(0 0.2rem 0.5rem rgba(0 0 0/0.4));
  align-self: start
}

.highlight-card-titles {
  grid-area: 1 /2 /span 1/ span 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: max-content;
  gap: .5rem;
}

.highlight-card-titles>* {
  margin-block: 0;
}

.infos {
  grid-area: 3/1 / span 1 / span 3;
  align-self: end
}

.infos td img {
  max-width: 75%
}

.infos .newGame-info {
  margin: 0;
  transform-origin: left;
  padding: 0
}

.text {
  grid-area: 2/2 / span 1 / span 2
}

.text p {
  margin: 0
}

.background {
  width: 100%;
  overflow: hidden;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.image img {
  object-fit: contain;
  border-radius: 0.5rem;
  height: 100%
}

.background-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: var(--border-radius-regular);
  background: var(--mainColor);
}

.background-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0
}

.background-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px);
}

.slider {
  position: absolute;
  height: calc(100% - 5em);
  width: 8%;
  top: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.slider:hover::before {
  color: #fff;
  scale: 1.4 !important;
}

.slider::before {
  content: "";
  position: absolute;
  font-size: 2rem;
  font-weight: 700;
  color: #fff4;
  background: #0000005e;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  scale: 0;
  transition: scale .3s;
}

.slider-right {
  right: 2em;
}

.slider-right::before {
  content: ">"
}

.slider-left {
  left: 2em;
}

.slider-left::before {
  content: "<"
}

.sliding-right {
  translate: calc(-200% - 8em);
}

.sliding-left {
  translate: 0
}

.sliding {
  transition: .2s ease-in-out;
}

.in-focus {
  scale: 1;
  filter: drop-shadow(0 0.5rem 1rem rgba(0 0 0 /0.8)) blur(0px);
}

.slide-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  bottom: 20px;
  width: calc(100% - 4em)
}

.slide-indicator div {
  height: 10px;
  width: 10px;
  background-color: var(--secColor);
  border-radius: 50%;
  opacity: 0.5;
}

.dot {
  cursor: pointer;
  transition: .3s;
}

.slide-indicator .active-dot {
  opacity: 1;
  scale: 1.6;
}

@media (max-width: 55em) {
  .highlight-cards-wrapper {
    padding-block: 0 2em;
    width: calc(100% + 6% + 2px);
    margin-left: calc(-3% - 1px);
    padding-inline: 0
  }

  .highlight-card {
    grid-template-columns: auto 1fr 1fr;
    filter: drop-shadow(0 0.3rem 0.7rem rgba(0 0 0 /0.8));
    grid-template-rows: max-content max-content max-content auto;
    gap: 1.5rem;
    font-size: 0.9rem;
    border-radius: 0;
    margin-right: 0;
    translate: -100%;
    clip-path: polygon(0 -5%, 0 105%, 100% 105%, 100% -5%);
    scale: 1;
  }

  .image {
    grid-area: 1/1 / span 2 / span 1;
    max-height: 160px;
    display: flex;
    align-items: start;
    width: auto;
    height: auto;
    align-self: end
  }

  .image img {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 160px
  }

  .highlight-card-titles {
    grid-area: 2/2/span 1/span 2;
  }

  .highlight-card-titles h2 {
    margin-top: 1rem;
  }

  .infos {
    grid-area: 4/1 / span 1 / span 3
  }

  .text {
    grid-area: 3/1 / span 1 / span 3
  }

  .background-wrapper {
    border-radius: 0;
    width: calc(100% + 3rem);
    left: -1.5rem;
    grid-area: 2/1/span 4/span 3
  }

  .slider {
    width: 15%
  }

  .slider-right {
    right: 0
  }

  .slider-left {
    left: 0
  }

  .sliding-right {
    translate: -200%
  }

  .sliding-left {
    translate: 0
  }

  .slide-indicator {
    bottom: 5px;
    width: 100%
  }
}

.tag-button {
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center
}

.tag-button span {
  padding: 0.8rem
}

.tag-button span:last-child {
  background-color: #729790;
  padding-left: 0.6rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0 0 0 / 0.3);
  box-shadow: 3px 1px 3px rgba(0 0 0 / 0.6), 0 0 2px #d2d2d2 inset
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 1px 3px #0aff0a)
  }

  50% {
    filter: drop-shadow(0 1px 7px #0aff0a)
  }

  100% {
    filter: drop-shadow(0 1px 3px #0aff0a)
  }
}

.no-date-icon::before {
  content: "\e812";
  font-family: fontello;
  margin-right: 0.5em
}

.time-box-content h3 {
  text-shadow: unset
}

form#suggested-form {
  display: grid;
  gap: 1em;
  align-content: space-around;
  justify-items: center;
  width: 100%;
  height: 100%
}

form#suggested-form input {
  font-size: 1em;
  padding: 1em;
  border-radius: 1em;
  border: 1px solid #999;
  width: calc(100% - 2em);
  background: var(--mainColor);
  color:var(--color-white);
  font-family: var(--font-normal-color)
}

form#suggested-form span {
  font-size: 1.2em
}

.others-dates {
  padding-bottom: 1em;
  border-bottom: 1px solidvar(--color-white);
  margin-bottom: 1.4em;
  display: grid;
  gap: 0.5em;
  width: 100%
}

.others-dates span {
  font-size: calc(1vw + 1vh + 0.5vmin) !important
}

.others-date {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  position: relative;
  align-items: center;
  gap: 0.3em;
  margin-right: 0.2em
}

.ok-count {
  position: absolute;
  background: goldenrod;
  line-height: 1;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-heads);
  filter: drop-shadow(0 0 5px rgba(0 0 0 / 0.4));
  top: -0.4em;
  right: -0.9em;
  border: 1px solidvar(--color-white)
}

button.ok-button.login-button {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 2em;
  height: 2em
}

#suggested-form .login-button {
  width: max-content
}

::-webkit-calendar-picker-indicator {
  filter: invert(1)
}

label[for="suggested-date"] {
  width: 50%
}

.ok-count>.tooltip-text {
  right: 0;
  bottom: 25px
}

.ok-count .tooltip-text p {
  padding: 0.2em;
  margin: 0;
  color: var(--font-normal-color)
}

@media (max-width: 45em) {
  .ok-count {
    width: 20px;
    height: 20px;
    right: -0.7em
  }

  button.ok-button.login-button {
    width: 1.6em;
    height: 1.6em
  }

  .others-dates span {
    font-size: calc(1vw + 2vh + 1vmin) !important;
  }
}

.count-jump {
  animation-name: countJump;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

@keyframes countJump {
  0% {
    translate: 0
  }

  25% {
    translate: 0 -5px
  }

  50% {
    translate: 0
  }

  75% {
    translate: 0 -3px
  }

  100% {
    translate: 0
  }
}

.count-pop {
  animation-name: countPop;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.reverse {
  animation-direction: reverse
}

@keyframes countPop {
  0% {
    scale: 0
  }

  100% {
    scale: 1
  }
}

.positive {
  --blinkColor: lightgreen
}

.negative {
  --blinkColor: red
}

.date-blink {
  animation-name: dateBlink;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-iteration-count: 3
}

@keyframes dateBlink {
  0% {
    box-shadow: 0 0 0 var(--blinkColor)
  }

  50% {
    box-shadow: 0 0 5px 1px var(--blinkColor)
  }

  100% {
    box-shadow: 0 0 0 var(--blinkColor)
  }
}

.time-box.bordered-box.time-left {
  grid-column: 1 / span 3;
  grid-row: 2
}

.time-box.bordered-box.time-right {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.time-box.bordered-box.time-left-up {
  grid-row: 1
}

.no-date-width {
  grid-template-columns: 1fr !important;
  gap: 0 !important
}

.row-span-2 {
  grid-row: span 2
}

@media (max-width: 50em) {
  .grid-row-1 {
    grid-row: 1
  }
}

@media (min-width: 75em) {
  .grid-row-1 {
    grid-row: 1
  }

  .span-2 {
    grid-column: unset
  }
}

@media (min-width: 85em) {
  .grid-row-1 {
    grid-row: unset
  }

  .span-2 {
    grid-column: span 2
  }
}

.numbers {
  font-weight: 400 !important
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 2em
}

.g3-col {
  grid-template-columns: 1fr 1fr 1fr
}

.quickvote {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center
}

.quickvote img {
  height: 35%;
  width: auto;
  opacity: 85%;
  filter: drop-shadow(0px 5px 8px rgba(33, 0, 45, 0.6));
  animation: pop_in .3s;
  animation-timing-function: cubic-bezier(.68, -0.55, .27, 1.55);
}

.qickvote-button {
  display: flex;
  align-items: center
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: collapse
}

.switch-slider {
  position: relative;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(var(--bgColorCode));
  height: 30px;
  width: 46px;
  border-radius: 2em
}

.switch-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  top: 4px;
  background-color: var(--secColor);
  border-radius: 50%;
  transition: .4s;
  -webkit-transition: .4s;
}

.switch input:checked+.switch-slider::before {
  background-color: var(--accentColor);
  transform: translateX(16px)
}

.toplist-shelf-top {
  display: grid;
  gap: 1rem;
  align-items: end;
  padding-inline: 1rem;
  grid-template-columns: 1.5fr 3fr 1fr
}

.toplist-shelf-img-box {
  aspect-ratio: 1;
  position: relative;
  margin-bottom: -.1em
}

.toplist-shelf-img-box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: .3em
}

.toplist-shelf {
  height: 2rem;
  width: 100%;
  background: linear-gradient(rgba(43, 43, 43, 0.6), rgba(142, 142, 142, 0.2));
  margin-top: -1.5rem;
  z-index: -1;
  clip-path: polygon(.8rem 0, 0 100%, 100% 100%, calc(100% - .8rem) 0);
  border-radius: .5rem;
  border-bottom: 2px solid var(--terColor)
}

.toplist-shelf-top h4 {
  margin-block: 0 .3rem
}

.toplist-shelf-wrapper {
  margin-bottom: 2rem;
  filter: drop-shadow(0px 3px 5px rgba(0 0 0 / .4));
  overflow: hidden;
  transition: .1s cubic-bezier(.45, .05, .55, .95);
}

.toplist-score {
  display: flex;
  height: 2em;
  width: 2em;
  padding: .5em;
  align-items: center;
  justify-content: center;
  font-size: x-large;
  color: gold;
  border-radius: 50%;
  border: 2px solid var(--secColor);
  text-shadow: 0 0 2px rgba(0 0 0 /.3);
  align-self: end;
  box-sizing: border-box
}

.mirror-img {
  position: absolute;
  left: 0;
  top: 93%;
  opacity: 10%;
  rotate: 180deg;
  transform: scalex(-1)
}

.toplist-shelf-wrapper:hover {
  scale: 1.05;
}

.toplist-shelf-title-box {
  position: relative
}

h4.mirror-img {
  margin-top: -.55em
}

#donate-button-container {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 0 3em;
  justify-items: center;
  gap: 1em;
}

#donate-button img {
  max-width: 150px;
  width: 80%;
  filter: drop-shadow(0 3px 8px rgba(0 0 0 / .2));
  margin-block: .5em;
}

#donate-button img:hover {
  filter: drop-shadow(0 0 10px var(--accentColor));
}

#donate-button {
  width: fit-content;
}

#donate-button-container p {
  width: fit-content;
  font-size: .9em;
}

@media (max-width: 45em) {
  #donate-button-container p {
    font-size: .75em;
  }
}

.agreement-wrapper {
  position: fixed;
  width: 100%;
  z-index: 9;
  background-color: rgba(0 0 0 / .8);
  bottom: 0;
  justify-items: center;
  display: grid;
  backdrop-filter: blur(3px);
  color:var(--color-white);
}

.agreement {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 30%;
  min-width: 400px;
  box-sizing: border-box;
  padding: 2em;
  gap: 1em;
}

.agreement label {
  grid-area: 1 / 1 / span 1 / span 1;
}

.agreement input {
  grid-area: 1 / 2 / span 1 / span 1;
  justify-self: end;
}

.agreement p {
  grid-area: 2/ 1 / span 1 / span 2;
  font-size: .8em;
}

.agreement a {
  color: var(--secColor);
}

.agreement button {
  grid-area: 3 / 1 / span 1 / span 2;
}

.agreement-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2em;
  line-height: 1;
  font-weight: bold;
  width: 1em;
  display: grid;
  justify-content: center;
  cursor: pointer;
}

.image-slider {
  color:var(--color-white);
  padding: 0;
  font-size: 1.5em;
  width: 1.5em;
  height: 1.5em;
  line-height: 0;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 2pxvar(--color-white);
  background-color: #00000045;
  font-weight: bolder;
  font-family: var(--font-texts);
  position: absolute;
}

#modal-body .slider-right {
  margin-right: .5em;
}

#modal-body .slider-left {
  margin-left: .5em;
}

.modal-content-wrapper {
  display: grid;
  grid-template-columns: auto;
  align-content: center;
  justify-items: center;
  width: max-content;
}

.skeleton {
  border: 1px solid;
  background: rgba(0, 0, 0, 0.22);
}

.skeleton:before {
  content: '';
  background: #6c6c6c;
  height: 28px;
  width: 140px;
  bottom: 15px;
  position: absolute;
  left: 10px;
  transform: skewX(-10deg);
}

.skeleton::after {
  content: '';
  width: 45px;
  height: 50px;
  background: #6c6c6c;
  right: 0;
  top: 0;
  position: absolute;
  border-radius: 0 .8em 0 0;
  clip-path: polygon(8% 0, 0 87%, 104% 95%, 104% 0);
}

.load-pulse {
  animation-name: load-pulse;
  animation-timing-function: cubic-bezier(.46, .03, .52, .96);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes load-pulse {
  0% {
    opacity: 50%
  }

  50% {
    opacity: 100%
  }

  100% {
    opacity: 50%
  }

}

.fixed {
  --quickvote-margin: 80px;
  position: fixed;
  z-index: 3;
  background: rgba(0 0 0 / .4);
  padding: .2em 1em;
  border-radius: 3em;
  top: var(--quickvote-margin);
  animation-name: bounce-in;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  backdrop-filter: blur(4px);
}


.fixed .switch-slider {
  background-color: transparent;
  backdrop-filter: blur(1px);
}

.bounce-out {
  animation-name: bounce-out;
  animation-duration: .5s;
}

@keyframes bounce-out {
  0% {
    top: var(--quickvote-margin);
  }

  100% {
    top: -120px;
  }

}

@keyframes bounce-in {
  0% {
    top: -120px;
  }

  100% {
    top: var(--quickvote-margin);
  }

}

@media (max-width: 90em) {
  .fixed {
    --quickvote-margin: 60px;
  }
}

#dice-cube {
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  perspective: 5000px;
  -moz-perspective: 5000px;
  -webkit-perspective: 5000px;
  transform: rotate3d(1, 1, 0, 43deg);

  margin-top: 15em !important;
}

.cube-face {
  position: absolute;
  background: rgb(var(--bgColorCode));
  width: 300px;
  height: 300px;
  display: grid;
  align-items: center;
  justify-items: center;
  border: 1px solidvar(--color-white);
  border-radius: 2em;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.dice-dot {
  width: 1.2em;
  height: 1.2em;
  background:var(--color-white);
  border-radius: 3em;
}

.dice-dot.top-left {
  grid-row: 1;
  grid-column: 1;
}

.dice-dot.bottom-left {
  grid-column: 1;
  grid-row: 3;
}

.dice-dot.middle-left {
  grid-column: 1;
  grid-row: 2;
}

.dice-dot.top-right {
  grid-column: 3;
  grid-row: 1;
}

.dice-dot.middle-right {
  grid-column: 3;
  grid-row: 2;
}

.dice-dot.bottom-right {
  grid-column: 3;
  grid-row: 3;
}

.cube-face.face-bottom {
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

.dice-dot.middle-middle {
  grid-column: 2;
  grid-row: 2;
}

.cube-face.face-back {
  transform: rotateY(180deg) translateZ(150px);
}

.cube-face.face-top {
  transform: rotateX(90deg) translateZ(150px);
}

.cube-face.face-left {
  transform: rotateY(-90deg) translateZ(150px);
}

.cube-face.face-right {
  transform: rotateY(90deg) translateZ(150px);
}

.cube-face.face-bottom {
  transform: rotateX(-90deg) translateZ(150px);
}

.cube-face.face-front {
  transform: rotateY(0deg) translateZ(150px);
  grid-template-columns: auto 0 auto;
  grid-template-rows: auto auto auto;
}

@keyframes pop_in {
  0% {
    scale: 0
  }

  100% {
    scale: 1
  }
}

@keyframes pop_out {
  0% {
    scale: 1
  }

  100% {
    scale: 0
  }
}

.pop_out_animation {
  animation-name: pop_out;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.68, -0.55, .27, 1.55);
}

input#voting {
  width: 95%;
  height: 3em;
  z-index: 1;
  opacity: 0;
  padding: 0;
  grid-area: 1 / 1;
}

.input-wrapper {
  display: grid;
  align-items: center;
  justify-items: center;
  padding-block: .5em;
  grid-template-rows: 1fr;
}

.input-overlay {
  display: flex;
  grid-area: 1 / 1;
  height: 100%;
}

.input-overlay>div {
  border: 1px solid lightgray;
  height: 75%;
  align-self: center;
}

.input-overlay>span {
  justify-items: center;
  align-items: center;
  font-size: calc(1vw + 1vh + 1vmin);
  rotate: -60deg;
  display: grid;
  filter: drop-shadow(0 0 3px rgba(0 0 0 / .5));
}

.input-overlay>span:first-child {
  filter: drop-shadow(0 0 3px rgba(0 0 0 / .5)) grayscale(1);
}

span.unused {
  opacity: .5;
}

.input-overlay>span:first-child::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 6%;
  background:var(--color-white);
  rotate: -60deg;
}

@media(max-width: 75em) {

  .input-wrapper::after {
    content: '';
    width: 100%;
    height: calc(5vh + 4vw);
    position: absolute;
    background: var(--terColor);
    z-index: -1;
    box-shadow: 0 0 .5em rgba(0 0 0 / .4) inset;
  }

  .input-overlay>span {
    font-size: calc(1vw + 1vh + 5vmin);
    ;
  }
}

.sidebar-content .bg-box-title {
  display: none;
}

.sidebar-content .bg-box-info {
  display: none;
}


.sidebar-content .bg-box-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: .5em;
  padding: 1em;
  background: #47717a2e;
  border-radius: .5em;
}

.bg-box-wrapper.favorites:before {
  position: absolute;
  font-size: 1.2rem;
  background: #82bab06b;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 0 0.5rem 0 0;
  clip-path: polygon(6px 100%, 100% 92.5%, 100% 0px, 0px 0px);
  padding-left: 0.15rem;
  content: '\2764';
  z-index: 3;
  color: #e14040;
}

#favorites-box {
  position: absolute;
  width: 90%;
  top: 20px;
  margin-inline: 5%;
  border-radius: 0.5rem;
  filter: drop-shadow(0 10px 15px rgba(0 0 0 / .5));
  transform-origin: top;
  display: grid;
  max-height: 80vh;
}

.favorites-box-wrapper {
  position: sticky;
  top: 65px;
  z-index: 3;
}

#favorites-box .bg-box-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-bottom: 0;
  overflow: auto;
  padding: 1rem;
  mask: radial-gradient(21px at 100% 100%, #0000 98%, #000);
  -webkit-mask: radial-gradient(21px at 100% 100%, #0000 98%, #000);
  background: var(--mainColor);
  border-radius: 0 0 .5rem .5rem;
}

.fav-active::before {
  background-color: var(--secColor) !important;
}

.hiding {
  animation: fade-out .3s ease-in-out .1s forwards;
}

.closed {
  opacity: 0;
  translate: 0 -200px;
}

.opened {
  animation: fade-in .3s ease-in-out forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    translate: 0 -200px;
  }
}

@keyframes fade-in {

  100% {
    opacity: 100;
    translate: 0 0;
  }
}

.close-favs::before {
  content: '\e801';
  font-family: fontello;
}

.close-favs {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  background: var(--secColor);
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 1.2em;
  border-radius: 50%;
  color: rgb(var(--bgColorCode));
  filter: drop-shadow(0 .3rem .5rem rgba(0 0 0 / .5));
  border: none;
}

@media (max-width: 50rem) {
  #favorites-box .bg-box-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    mask: radial-gradient(21px at 50% 100%, #0000 98%, #000);
    -webkit-mask: radial-gradient(21px at 50% 100%, #0000 98%, #000);
  }

  .close-favs {
    right: calc(50% - 15px);
  }
}

@media (max-width: 75rem) {
  #favorites-box .bg-box-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

button#favorites {
  display: grid;
}

button#favorites > div {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
}


button#favorites>div::before {
  content: '';
  background:var(--color-white);
  height: 1.2rem;
  aspect-ratio: 1;
  mask-image: url(../images/site/heart_full.svg);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/site/heart_full.svg);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  display: block;
}

button#favorites:hover > div {
  filter: drop-shadow(0 0 2px black);
}

@supports (corner-shape: squircle) {
  .squircled-regular {
    corner-shape: squircle;
    --border-radius-regular: 2rem;
  }

  .squircled-small {
    corner-shape: squircle;
    --border-radius-small: 1rem;
  }
}

.suggested-game {
  color:var(--color-white);
  width: 95%;
  max-width: 60rem;
  filter: drop-shadow(0 2rem 2rem rgb(0 0 0 / 1));
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(16, min-content);
  position: relative;
  padding-block: 1rem;

  & .titles {
    margin-block: 0;
    padding: 1.5rem;
    filter: drop-shadow(0 .5rem 1rem rgba(0 0 0 / .7));
    grid-area: 2 / 6 / span 1 / span 5;
    position: relative;
    left: -.5rem;
    z-index: 0;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background: var(--mainColor);
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    }

    &>* {
      margin-block: 0;
      position: relative;
    }
  }

  & .game-infos.clearfloat {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-evenly;
    grid-area: 16 / 1 / span 1 / span 5;
    margin-block: 2rem;
    padding-inline: 1rem;

    & img {
      max-height: 32px;
      filter: grayscale(1) brightness(100);
    }

    & div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      gap: 1rem;
      font-size: 1rem;
    }
  }

  & a:first-of-type {
    grid-area: 1 / 1 / span 13 / span 5;
    z-index: 1;

    &>img {
      max-width: 600px;
      height: auto;
      z-index: 1;
      filter: drop-shadow(0 0 1rem rgba(0 0 0 / 1));
      width: 100%;
    }
  }

  &>.game-text {
    grid-area: 3/ 6/ span 14 / span 5;
    padding-inline: 2rem;
  }

  &>.background-wrapper {
    grid-area: 2 / 1 / span 15/ span 10;
    padding: 2rem;
    margin: -2rem;
    background: rgb(var(--bgColorCode));
  }
}

@media(max-width: 45rem) {
  .suggested-game {
    & .titles {
      position: relative;
      grid-row: 12;
    }

    & .game-text {
      grid-area: 15 / 1 / span 1 / span 10;
      padding-inline: 1.5rem;
    }

    & .game-infos.clearfloat {
      grid-area: 16 / 1 / span 1 / span 10;
    }

    &>img {
      grid-area: 1 / 1 / span 13 / span 5;
    }
  }
}

#suggest-game>img {
  max-height: 38px;
  padding-inline: 1rem;
  margin: 0;
}

.hexagon-wrapper img {
  clip-path: polygon(24.5% 0%, 75.5% 0%, 100% 50%, 75.5% 100%, 24.5% 100%, 0% 50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s ease-in-out;
  scale: 1.01;
}

.hexagon-wrapper {
  aspect-ratio: 4.6 / 4;
  filter: drop-shadow(0 1rem 2rem rgba(0 0 0 / .8));
  transition: scale .2s, aspect-ratio .2s, z-index .1s ease-in-out;
  border-radius: .5rem;
  width: 88%;
  z-index: 0;
}

.hexagon-wrapper:hover {
  scale: 1.2;
  z-index: 50;
  transition: scale .2s ease-in-out, z-index .1s ease-in-out;
}

.margin-box {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 6px 13px;
  align-items: center;
  justify-items: center;
  position: relative;
  margin-block: 2rem;
}

.hexagon-wrapper:nth-child(1) {
  grid-area: 1 / 1 / span 2 / span 3;
}

.hexagon-wrapper:nth-child(2) {
  grid-area: 2 / 3 / span 2 / span 3;
}

.hexagon-wrapper:nth-child(3) {
  grid-area: 3 / 1 / span 2 / span 3;
}

.hexagon-wrapper:nth-child(4) {
  grid-area: 4 / 3 / span 2/ span 3;
}

.hexagon-wrapper:nth-child(5) {
  grid-area: 3 / 5 / span 2 / span 3;
}

.hexagon-wrapper:nth-child(6) {
  grid-area: 2 / 7 /span 2 / span 3;
}

.hexagon-titles {
  grid-area: 1 / 4 / span 1 / span 6;
  align-self: center;
  justify-self: start;
  width: calc(100% - -4rem);
  background: var(--mainColor);
  margin-left: -7rem;
  position: absolute;
  height: 72px;
  top: 1rem;
  z-index: -1;
}

.hexagon-wrapper:nth-child(1):hover .hexagon-titles {
  opacity: 1;
  translate: 120% 10%;
}

.hexagon-wrapper:nth-child(2):hover .hexagon-titles {
  translate: -15% -200%;
  opacity: 1;
}

.hex-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem 1rem 1rem 6rem;
}

.hex-title>* {
  margin: 0;
}


#preloading {
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(var(--bgColorCode));
  z-index: 3;
}

.loading-animation {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.loading-dot {
  width: 1.5vh;
  aspect-ratio: 1;
  background-color: var(--mainColor);
  border-radius: 50%;
  animation-name: jump;
  animation-duration: 3.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.2s;
}

.dot-3 {
  animation-delay: 0.4s;
}

.dot-4 {
  animation-delay: 0.6s;
}

.dot-5 {
  animation-delay: 0.8s;
}

.dot-6 {
  animation-delay: .9s;
}

@keyframes jump {
  22% {
    translate: 0 -100px;
    background-color: var(--secColor)
  }

  44% {
    translate: 0 100px;
    background-color: var(--terColor)
  }

  66% {
    translate: 0;
    background-color: var(--mainColor)
  }

  100% {
    translate: 0;
    background-color: var(--mainColor)
  }
}