@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@200;300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=VT323&display=swap');

@font-face {
    font-family: CHANEYExtended;
    src: url(../fonts/Chaney/CHANEY-Extended.ttf);
} 
@font-face {
    font-family: CHANEYRegular;
    src: url(../fonts/Chaney/CHANEY-Regular.ttf);
} 
@font-face {
    font-family: CHANEYUltraExtended;
    src: url(../fonts/Chaney/CHANEY-UltraExtended.ttf);
} 
@font-face {
    font-family: CHANEYWide;
    src: url(../fonts/Chaney/CHANEY-Wide.ttf);
}

.vt {
    font-family: 'VT323', monospace;
}

.asap {
    font-family: 'Asap Condensed', sans-serif;
}

.font-primary-ex {
    font-family: CHANEYExtended;
}

.font-primary {
    font-family: CHANEYRegular;
}

.font-primary-ultraex {
    font-family: CHANEYUltraExtended;
}

.font-primary-wide {
    font-family: CHANEYWide;
}

:root {
    --primary: #00fff0;
    --warning: #FFDA61;
    --secButton: #dcfc04;
    --success: #43c793;
    --secondary: #9b9bab;
    --orher: #677583;
    --blue: #3B54FF;
    --bg: #12181e;
    --start: #ae0e0e;
    --end: #750c0c;
}

* {
    font-family: 'Space Grotesk', sans-serif;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.border-warning {
    border-color: var(--warning) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.border-blue {
    border-color: var(--blue) !important;
}

.text-success {
    color: var(--success) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.border-success {
    border-color: var(--success) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

.btn-clip {
    -webkit-clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}

.btn-clip:after {
    background-color: #262630 !important;
    content: "";
    position: absolute;
    width: 60px;
    height: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: 0;
    left: -13px;
}

.btn-clip:before {
    background-color: #262630 !important;
    content: "";
    position: absolute;
    width: 60px;
    height: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    right: -13px;
}

.scroll-hidden::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}
  

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
  
::-webkit-scrollbar-track {
    background: transparent;
}
  
::-webkit-scrollbar-thumb {
    background: #dc2626;
}
  
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.scrollbar-disabled::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.bannerAnimation {
    transition: all 200ms ease-in-out;
    animation: zoom 32s normal;
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

.gamebanner-clip {
    -webkit-clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}

.calc-border {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
}

.iconSelected:checked + label img {
    border-color: var(--success) !important;
    opacity: 1;
}

.description blockquote {
    padding: 10px 15px;
    margin: 10px 0;
    border-left: 2px solid var(--primary);
    font-style: italic;
}

.description strong {
    color: var(--primary);
}

.raw-text p {
    margin-bottom: 16px;
}

.raw-text h1 {
    font-weight: bold;
    font-size: 32px;
}

.raw-text h2 {
    font-weight: bold;
    font-size: 26px;
    color: var(--primary);
}

.raw-text hr {
    margin: 10px 0;
    border-color: var(--orher);
}

.h-modal {
    height: calc(100vh - 60px);
}