body{
    font-family: "Chakra Petch", sans-serif;
}

span, a{display: inline-block;}

a{
    text-decoration: none;
    cursor: default;
}

::selection{
    background-color: #cbfe1c;
    color: black;
}

img{width: 100%;}

.icon{width: 20px;}

.icon-16{width: 16px;}

.icon-35{width: 35px;}

:root{
    --neon-green: rgb(203, 254, 28);
    --gray-border: oklch(27.8% .033 256.848);
}

.text-neon{
    color: var(--neon-green);
}

.navbar-brand:hover{
    color: var(--neon-green) !important;
}

.bg-dark{
    background-color: #0b0e13 !important;
}

.nav-link{
    color: white !important;
}

.navbar-nav>*:hover{
    color: var(--neon-green) !important;
    cursor: pointer;
}

.navbar-nav .nav-link.active{
    color: var(--neon-green) !important;
}

.navbar-brand{
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(203, 254, 28);
}

.nav-container{
    width: 80%;
}

.notifications:hover i, .messages:hover i{
    color: #cbfe1c !important;
    cursor: pointer;
}

.btn{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: rgb(11, 14, 19);
}

.py-45{
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.gray-b-bottom{
    border-bottom: 1px solid var(--gray-border);
}

.navbar-toggler{
    border: none !important;
}

.navbar-toggler:hover i{
    color: var(--neon-green) !important;
}

#hero{
    background-image: linear-gradient(#000000e0, #000000e0), url(../images/hero-bg.jpg);
    background-position: 50%;
    background-attachment: fixed;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 64px;
}

.font-days{
    font-family: "Days One", sans-serif;
}

.hero-gradient{
    background-image: linear-gradient(#cbfe1c, oklch(79.2% .209 151.711));
    width: 100%;
    max-width: 568px;
    height: 420px;
    margin: 0 auto;
}

.trophy{
    transform: translate(-50%, 50%);
}

.trophy p{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: oklch(0.707 0.022 261.325);
}

.h-256{
    height: 256px;
}

.container-custom{
    width: 80%;
}

.hero-p{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: oklch(0.872 0.01 258.338);
}

.filter-hover1:hover{
    background-color: #cbfe1ccc !important;
    border-color: #cbfe1ccc !important;
}

.filter-hover2:hover{
    color: #111 !important;
    background-color: rgb(203, 254, 28) !important;
    border-color: rgb(203, 254, 28) !important;
}

.btn-shine{
    position: relative;
    overflow: hidden;
}

.btn-shine::before{
    content:'';
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: left 0.5s ease-in-out;
    z-index: 1;
}

.btn-shine:hover::before {
    left: 200%;
}

#latest-games{
    padding: 96px 0px;
}

#our-games{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 3px;
    color: rgb(203, 254, 28);
}

#our-games::before{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    left: -80px;
    top: 50%;
    background-image: linear-gradient(to right in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#our-games::after{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    right: -80px;
    top: 50%;
    background-image: linear-gradient(to left in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#our-games~ h2{
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: rgb(241, 241, 241);
}

.game-transition{
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);

}

.carousel-item .overflow-hidden{
    cursor: pointer;
    aspect-ratio: 4/3;
    border: 2px solid #cbfe1c00;
    transition: .25s ease-in-out;
}

.carousel-item>div>div:hover .overflow-hidden{
    border: 2px solid #cbfe1c;
}

.carousel-item>div>div img{
    transition: scale .25s ease-in-out;
}

.carousel-item>div>div:hover img{
    scale: 108%;
}

.game-card-std{
    transition: .3s;
    background-image: linear-gradient(to top in oklab, #cbfe1ccc 0%, #cbfe1c66 50%, transparent 100%);
    bottom: 0;
    left: 0;
    right: 0;
    height: 66.6667%;
    opacity: 0;
}

.carousel-item>div>div:hover .game-card-std{
    opacity: 1;
    transition: .25s;
}

.our-games-span{
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.tag-grouping{
    position: absolute;
    left: 32px;
    top: 16px;
}

.game-tag{
    background-color: #00000080;
    gap: 5px;
    padding: 6px 12px;
    transform: translateY(-80px);
    transition: transform .25s ease-in-out;
}

.carousel-item>div>div:hover .game-tag{
    transform: translateY(0);
}

.game-name{
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(80px);
    transition: transform .2s ease-in-out;
    padding: 24px 32px;
}

.carousel-item>div>div:hover .game-name{
    transform: translateY(0);
}

.game-name h3{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(11, 14, 19);
}

.custom-arrow-btn{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #364153;
    color: #99a1af;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease-in-out;
}

.custom-arrow-btn:hover{
    border-color: rgb(203, 254, 28);
    color: rgb(203, 254, 28);
    background-color: rgba(white, 0.05);
}

.view-all-btn{
    border: 2px solid #cbfe1c;
    color: #cbfe1c;
    background-color: transparent;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    transition: 0.2s ease-in-out;
}

.view-all-btn:hover{
    background-color: #cbfe1c;
    color: #111;
}

#what-we-do{
    padding-bottom: 30px;
}

#what-we-do>div>div>div p, span{
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: rgb(241, 241, 241);
}

#what-we-do>div>div>div span{
    color: var(--neon-green);
}

#what-we-do-text{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 3px;
    color: rgb(203, 254, 28);
}

#what-we-do-text::before{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    left: -80px;
    top: 50%;
    background-image: linear-gradient(to right in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#what-we-do-text::after{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    right: -80px;
    top: 50%;
    background-image: linear-gradient(to left in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#what-we-do-text~ h2{
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: rgb(241, 241, 241);
}

#what-we-do .grid-config{
    grid-template-areas: 
        "pc-game mobile-game controllers vr-solution"
        "vr-design superhero ps4 three-d";
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.grid-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    text-align: center;
    position: relative;
    border: 1px solid oklch(27.8% .033 256.848);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: -48px;
    background-color: #1a1a1a;
    transition: .3s ease-in-out;
}

.grid-card .deco-1, .deco-2{
    position: absolute;
    width: 0;
    height: 0;
    background-color: #cbfe1c;
    transition: .3s ease-in-out;
}

.grid-card .deco-1{
    border-top: 24px solid #cbfe1c;
    border-right: 24px solid #1a1a1a;
    left: -24px;
    top: -24px;
}

.grid-card .deco-2{
    border-bottom: 24px solid #cbfe1c;
    border-left: 24px solid #1a1a1a;
    right: -24px;
    bottom: -24px;
}

.grid-card:hover .deco-1{
    left: 16px;
    top: 16px;
}

.grid-card:hover .deco-2{
    right: 16px;
    bottom: 16px;
}

.grid-card:hover{
    border-color: #cbfe1c;
}

.grid-card h3{
    font-family: "Days One", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    color: rgb(241, 241, 241);
}

.grid-card-inner{
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: oklch(27.8% .033 256.848);
    margin-bottom: 16px;
    border-radius: 8px;
    transition: .3s;
}

.grid-card:hover .grid-card-inner{
    background-color: #cbfe1c;
}

.grid-card:hover .grid-card-inner i{
    color: #1a1a1a !important;
}

.pc-game{grid-area: pc-game;}

.mobile-game{grid-area: mobile-game;}

.controllers{grid-area: controllers;}

.vr-solution{grid-area: vr-solution;}

.vr-design{grid-area: vr-design;}

.superhero{grid-area: superhero;}

.ps4{grid-area: ps4;}

.three-d{grid-area: three-d;}

.controllers, .superhero{
    border: none !important;
    padding: 0;
}

#what-we-do .d-grid::after{
    content: "";
    background: linear-gradient(90deg, transparent, #cbfe1c 20%, #cbfe1c 80%, transparent);
    width: 80%;
    max-width: 600px;
    height: 3px;
    box-shadow: 0 0 10px #cbfe1c, 0 0 20px #cbfe1c4d;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: -20px;
    transform: translate(-50%);
}

#sponsors{
    padding: 80px 0px;
    overflow: hidden;
}

#sponsors>div>div{
    position: relative;
    isolation: isolate;
}

.animate-scroll-left{
    animation: 40s linear infinite scroll-left;
    margin-bottom: 16px;
    width: max-content;
}

/* Taken from the website, learned how it works, to some extent */

@keyframes scroll-left{
    0%{transform: translate(0);}

    100%{transform: translate(-50%);}
}

.animate-scroll-right{
    animation: 40s linear infinite scroll-right;
    width: max-content;
}

@keyframes scroll-right{
    0%{transform: translate(-50%);}

    100%{transform: translate(0%);}
}

.animate-scroll-left>div{
    min-width: max-content;
}

#sponsors .deco-card{
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: oklch(27.8% .033 256.848);
    margin-right: 16px;
    border-radius: 12px;
    object-fit: cover;
    overflow: hidden;
    transition: .15s;
}

.fade-overlay-left{
    width: 128px;
    height: 96px;
    position: absolute;
    left: 0;
    z-index: 10;
    inset-block: 0;
    background-image: linear-gradient(to right in oklab, oklch(21% .034 264.665), transparent);
}

.fade-overlay-right{
    width: 128px;
    height: 96px;
    position: absolute;
    right: 0;
    z-index: 10;
    inset-block: 0;
    background-image: linear-gradient(to left in oklab, oklch(21% .034 264.665), transparent);
}

.sponsor-background{
    width: 1200px;
    height: 350px;
    z-index: -10;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: radial-gradient(ellipse at center, #cbfe1c 0%, transparent 70%);
    transform: translate(-50%, -50%);
}

#our-team{
    padding: 96px 0px;
    overflow: hidden;
}

#our-team>div>div{
    margin-bottom: 64px;
}

#our-team-text{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 3px;
    color: rgb(203, 254, 28);
}

#our-team-text::before{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    left: -80px;
    top: 50%;
    background-image: linear-gradient(to right in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#our-team-text::after{
    content: '';
    width: 64px;
    height: 2px;
    position: absolute;
    right: -80px;
    top: 50%;
    background-image: linear-gradient(to left in oklab, transparent 0%, #cbfe1c 50%, #cbfe1c 100%);
}

#our-team-text~ h2{
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: rgb(241, 241, 241);
}

#our-team-text~ div>p{
    margin-top: 24px;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: oklch(0.707 0.022 261.325);
}

#our-team .d-grid{
    margin-bottom: 0;
}

#our-team .grid-config{
    grid-template-areas: 
        "member-1 member-2 member-3 member-4"
        "member-5 member-6 member-7 member-8";
    grid-column: repeat(4, 1fr);
    gap: 32px;
}

.member-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.member-card-inner{
    height: 320px;
    position: relative;
}

.member-card-inner::before{
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    backdrop-filter: grayscale() brightness(.9);
    z-index: 1;
    transform: translateY(0);
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.member-card:hover .member-card-inner::before{
    transform: translateY(-100%);
}

.opacity-60{opacity: 0.6;}

.black-transparent{
    background-image: linear-gradient(to top in oklab, #000 0%, transparent 50%, transparent 100%);
    inset: 0;
}

.member-details{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 24px 16px;
}

.member-details h3{
    font-family: "Days One", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.member-details p:first-of-type{
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(203, 254, 28);
}

.member-details p:last-of-type{
   font-size: 12px;
    font-weight: 400;
    line-height: 0px;
    color: oklch(0.707 0.022 261.325);
}

.callsign{
    writing-mode: vertical-rl;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(203, 254, 28);
}

#contact-us{
    padding: 96px 0px;
    background-image: linear-gradient(to bottom right in oklab, oklch(21% .034 264.665), #0b0e13);
}

#contact-us .text-center{
    margin-bottom: 64px;
}

#contact-us .grid-config{
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

#contact-us .grid-config:first-child{column-gap: 32px;}

.details-card{
    padding: 32px;
    margin-bottom: 32px;
    border-radius: 16px;
    background-color: #1e2939;
}

.card-container{
    row-gap: 24px;
    margin-bottom: 24px;
}

.details-icon{
    width: 64px;
    height: 64px;
    margin-right: 24px;
    background-color: #cbfe1c;
}

.details-icon~ div{
    align-items: center;
}

.details-card h3{
    font-family: "Days One", sans-serif;
    margin: 0px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(241, 241, 241);
}

.details-card p{
    margin: 0px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
}

.join-community{
    color: #0b0e13;
    padding: 32px;
    background-image: linear-gradient(to right in oklab, #cbfe1c, oklch(79.2% .209 151.711));
    border-radius: 16px;
}

.join-community h3{
    font-family: "Days One", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: rgb(11, 14, 19);
}

.join-community p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(11, 14, 19);
}

.social-icon{
    width: 48px;
    height: 48px;
    background-color: #0b0e13;
    cursor: pointer;
    transition: .3s;
}

.social-icon:hover{
    background-color: #0b0e13cc;
}

.contact-form{
    padding: 32px;
    background-color: oklch(27.8% .033 256.848);
    border-radius: 16px;
}

.contact-form h3{
    font-family: "Days One", sans-serif;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: rgb(241, 241, 241);
}

form>*{
    margin-bottom: 24px;
}

form .names{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

label{
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: oklch(0.872 0.01 258.338);
}

form .text-input{
    padding: 12px 16px;
    color: #f1f1f1;
    background-color: #364153;
    border: 1px solid oklch(44.6% .03 256.802);
    border-radius: 8px;
    width: 100%;

    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(241, 241, 241);
}

form input:focus, select:focus, textarea:focus{
    outline-style: none;
    border: 2px solid #cbfe1c;
}

.subscribe-checkbox{
    width: 20px;
    height: 20px;
    color: #cbfe1c;
    background-color: oklch(37.3% .034 259.733);
    border: 1px solid #4a5565;
    border-radius: 4px;
    margin-right: 12px;
}

.checkbox-label{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: oklch(0.707 0.022 261.325);
}

form button{
    padding: 16px 24px;
    background-color: #cbfe1c;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 0px;

    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(11, 14, 19);
}

form button:hover{
    background-color: #cbfe1ccc !important;
}

form i{
    margin-left: 8px;
}

.support-stats{
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid oklch(37.3% .034 259.733);
}

.support-stats>div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: center;
}

.support-stats .mb-1{
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: rgb(203, 254, 28);
}

.support-stats .mb-1~ div{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: oklch(0.707 0.022 261.325);
}

#footer{
    background-color: #000;
    padding: 50px 0px;
}

#footer .container-custom{
    width: 80%;
    display: flex;
}

#footer .grid-config{
    gap: 24px;
}

.footer-about{grid-area: footer-about;}

.footer-games{grid-area: footer-games;}

.footer-tournaments{grid-area: footer-tournaments;}

.footer-support{grid-area: footer-support;}

.container-custom .col{
    width: 24%;
}

.col h4{
    font-family: "Days One", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: rgb(241, 241, 241);
    margin-bottom: 24px;
}

.col ul{
    list-style: none;
    padding: 0;
}

ul a{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
}

ul li{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
    margin-bottom: 12px;
}

.policies a{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
}

.col a:hover, .policies a:hover, li:hover{
    color: var(--neon-green);
    cursor: pointer;
}

.footer-about p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
    margin: 24px 12px 24px 0px;
}

.social-links{
    display: flex;
    width: 60%;
    justify-content: space-between;
}

.social-links a:hover i{
    color: #cbfe1c !important;
    cursor: pointer;
}

.bottom-footer{
    width: 80vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid oklch(27.8% .033 256.848);
    padding-top: 40px;
    margin-top: 32px;
}

.bottom-footer p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: oklch(0.707 0.022 261.325);
}

.policies{
    width: 30%;
    display: flex;
    justify-content: space-between;
}