/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */

html {
    scroll-behavior: smooth;
}

/* Scroll Bar Style */
::-webkit-scrollbar {
    background: none;
    width: 16px;
    height: 16px;
}
::-webkit-scrollbar-thumb {
    border: solid 0 rgb(0 0 0 / 0%);
    border-right-width: 4px;
    border-left-width: 4px;
    -webkit-border-radius: 9px 4px;
    -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
}
::-webkit-scrollbar-track-piece {
    margin: 4px 0;
}
::-webkit-scrollbar-thumb:horizontal {
    border-right-width: 0;
    border-left-width: 0;
    border-top-width: 4px;
    border-bottom-width: 4px;
    -webkit-border-radius: 4px 9px;
}
::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow:
    inset 0 0 0 1px hsl(212, 92%, 43%),
    inset 0 0 0 4px hsl(212, 92%, 43%);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

.black-bg {
    background: linear-gradient(180deg,#42424a 0%,#191919 100%) !important;
}

.dark .apexcharts-canvas .apexcharts-legend-text {
    color: #9ca3af !important;
}

.schneeflocke {
    position: fixed;
    width: 5px;
    height: 5px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
}

@keyframes slide {
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-100%);
  }
}

.games {
    display: flex;
    overflow: hidden;
}

.games-slide {
    display: flex;
    animation: 50s slide infinite linear;
}

.game-item {
    margin: 0 80px;
}