@font-face {font-family: Sen; 
    src: url(/assets/fonts/sen/sen-regular.otf);
    }
    
@font-face {
    font-family: Sen;
    src: url(/assets/fonts/sen/sen-bold.otf);
    font-weight: bold;
    }


*,*:after, *:before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

}


html, body{
    position: relative;
    overflow-x: hidden;
    font-family: poppins, Sen, sans-serif;
}


body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.329); 
    background: rgb(42, 68, 107);
  }
   
  /* Handle */
body::-webkit-scrollbar-thumb {
    background: #941338; 
    border-radius: 50px;
  }
  
  /* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
    background: #800f2f; 
  }



.hero-bg{
    width: 100vw;
    max-width: 100vw;
    height: 240vh;
    background-image: url("/assets/imgs/hero-bg-2.jpg");
    opacity: 98%;
    position: absolute;
    background-position: top center;
    background-size: cover;
    z-index: -1000;
    background-attachment: fixed;
}

.heropage{
  /* background-image: url("/assets/imgs/hero-bg1.png"); */
    background-position: top center;
    background-size: cover;
    height: 78vh;
    position: relative;
    justify-content: center;
    align-items: center;
}

.heropage::after{
    width: 100%;
    height: 100%;
    content: '' ;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.20);

}
.heropage .texture{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -8 ;
    background-image: url("/assets/imgs/checkered-pattern.png"); 
    opacity: 30%;
}
.hero_video{
    width: 100%;
    height:100% ;
    position: absolute;
    top: 0;
    z-index: -10;
    object-fit: cover ;
}


.logo_container{
    position: absolute;
    display: flex;
    width: 100vw;
    top: calc(45% - 110px);
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.logo_container img{
    margin-top: 25px;
}

.logo_container img:hover{
    animation: pulse 1.2s 1;

}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15);}
    100% { transform: scale(1); }
    
}



.sbt_logo{
    margin: 0 auto;
    padding-top: 20px;
    width: 700px;
    transition: all ease-in-out 0.35s;
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255));
    filter: drop-shadow(0px 0px 3px rgba(255, 255, 255));
    
}

@media (max-width:1199.98px){
    .sbt_logo{
        padding-top: 20px;
        width: 400px;
    }
}

@media (max-width:699.98px){
    .sbt_logo{
        padding-top: 20px;
        width: 300px;
    }
}


/* SOCIAL LINKS */

.social-wrapper{
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    bottom: 80px;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
}

.social-container a i {
    opacity: 0;
    font-size: 22px;
    color:#BF1645;
    will-change: transform;
    -webkit-transform: scale(.1);
            transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 1;
}
.social-container a {
    z-index: 1;
    cursor: pointer;

}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 270px;
    height: 70px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1.1);
            transform: scale(1.1)

}


.btn_wrap span {
    position: absolute;
    z-index: 999 !important;
    width: 270px;
    height: 70px;
    border-radius: 80px;
    font-family: poppins;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 0.2em;
    color: #EEEEED;
    background-color:#BF1645;
    padding: 0 18px;
    -webkit-transition: all 1.1s ease;
    transition: all 1.1s ease;
}
.social-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 270px;
    height: 70px;
    border-radius: 80px;
    cursor:default;
    z-index: 1;
}

.social-container a .fa-discord {
            -webkit-transition-delay: 1s;
                    transition-delay: 1s;
}

.social-container a .fa-x-twitter {
            -webkit-transition-delay: .8s;
                    transition-delay: .8s;
}

.social-container a .fa-facebook-f {
            -webkit-transition-delay: .6s;
                    transition-delay: .6s;
}

.social-container a .fa-instagram{
            -webkit-transition-delay: .4s;
                    transition-delay: .4s;
}

.social-container a .fa-youtube{
            -webkit-transition-delay: .2s;
                    transition-delay: .2s;
}


.btn_wrap:hover span {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    -webkit-transform: translateX(-270px);
    transform: translateX(-270px);
    z-index: 999;
}

.btn_wrap:hover i{
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}

.social-container a:hover{
    filter: grayscale(100%);
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}



@media(max-width:699.98px){
    .btn_wrap:hover {
        /* transition-delay: .4s; */
        -webkit-transform: scale(1.04);
                transform: scale(1.04)
    }
    .btn_wrap{
        width: 250px;
        height: 50px ;
    }
    .social-container{
        width: 250px;
        height: 44px ;
    }
    span{
        z-index: 999 !important;
        width: 250px;
        height: 50px;
        line-height: 50px;
    }
    .social-container a i{
        font-size: 18px !important;
    }
    .btn_wrap:hover span {
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
        z-index: 999;
    }
}



.available_on{
    min-height: 18vh;
    background-color: white;
    padding-bottom: 24px;
}



.availability_container{
    position: relative;
    justify-content: center;
    text-align: center;
}

.availability_container > .availability-item {
    display: inline-block;
}

.availability_container h1{
    font-family: Sen;
    padding-top: 25px;
    /* text-transform: uppercase; */
    letter-spacing: 0.2em;
    font-size: 32px;
    transition: all ease-in-out 0.1s;
    /* color: #BF1645; */
    color: black;
    /* padding-bottom: 10px; */
}
.availability_container h1 > span {
    font-family: Sen;
    color: #BF1645;
    font-weight: 600;
    text-decoration-color: #BF1645;
    text-underline-offset: 4px;
}


.availability_container img{
    /*padding-top: 20px;*/
    /*padding-bottom: 20px;*/
    max-width: 350px;
    margin-top: 16px;
    transition: all ease-in-out 0.25s;
}
.availability_container img:hover {
    animation: pulse 1.2s 1;
    /* filter: invert(1); */
}

@media (max-width:699.98px){
    .availability_container h1{
        font-size: 26px !important;
        letter-spacing: 0.1em;
    }
    .availability_container img{
        max-width: 250px !important;
    }

}



/* INFO SECTION */

.game_info{
    min-height: 22vh;
    background-color: rgb(42, 68, 107)
}

.game_info .container{
    position: relative;
    text-align: center;
}

.header_container{
    margin: 0 auto;
    width: 636px;
    padding-top: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: all ease-in-out 0.35s;
}
.header_container h1{
    width: 100vw;
    font-family: Sen;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 24px;
    transition: all ease-in-out 0.1s;
    color: white;
    padding-top: 7px;
    text-align: center;
}
.title-dash{
    width: 100px;
    height: 8px;
}

.description_container {
    transition: all ease-in-out 0.2s;
}


.description_container p {
    font-family: poppins;
    font-weight: 300 !important;
    padding-top: 25px;
    padding-bottom: 50px;
    letter-spacing: 0.2em;
    font-size: 18px;
    color: white;
    font-weight: 200;
}

/* @media (min-width:699.98px){
    .header_container{
        width: 300px;
    }
} */

@media (max-width:699.98px){
    .header_container h1{
        font-size: 18px !important;
        letter-spacing: 0.1em;
    }
    /* .header_container{
        width: 300px;
    } */
    .title-dash{
        width: 57px !important;
        height: 5px;
    }
    .description_container p {
        letter-spacing: 0.15em;
        font-size: 14px !important;
        color: white;
        font-weight: 200;
    }

    .description_container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .header_container{width: 320px;}

}

@media (max-width:329.98px){
    .title-dash{display: none;}
    .header_container{width: 220px;}
}

.bg-img-section {
    display: flex;
    flex-wrap: wrap;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pc-image-container {
    width: 50%;
    position: relative;
}
.pc-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.mobile-image-container {
    width: 100%;
    display: none;
    position: relative;
}
.mobile-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .pc-image-container {
        display: none;
    }
    
    .mobile-image-container {
        display: block;
    }
}

.bg-img-blank {
    width: 50%;
    padding: 30px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .bg-img-blank {
        width: 100%;
        padding: 25px;
    }
}

.bg-img-section > .pc-image-container,
.bg-img-section > .mobile-image-container {
    transition: all ease-in-out 0.7s;
    background-color: transparent;
}
.bg-img-section > .pc-image-container:hover,
.bg-img-section > .pc-image-container:visited,
.bg-img-section > .mobile-image-container:hover,
.bg-img-section > .mobile-image-container:visited {
    color: white;
    text-decoration: none;
}

.bg-img-section > .pc-image-container:hover > img,
.bg-img-section > .mobile-image-container:hover > img {
    will-change: transform;
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    filter: drop-shadow(0 10px 20px rgba(255, 255, 255, 0.2)) brightness(1.2) saturate(1.2);
}

@media (min-width: 961px) {
    .bg-img-section > .pc-image-container img {
        transform: scale(1.05) translateX(25px);
    }
    .bg-img-section > .pc-image-container:hover > img {
        transform: scale(1.10) translateX(25px);
    }
}

@media (min-width: 1125px) {
    .bg-img-section > .pc-image-container img {
        transform: scale(1.08) translateX(35px);
    }
    .bg-img-section > .pc-image-container:hover > img {
        transform: scale(1.13) translateX(35px);
    }
}

@media (min-width: 1367px) {
    .bg-img-section > .pc-image-container img {
        transform: scale(1.13) translateX(75px);
    }
    .bg-img-section > .pc-image-container:hover > img {
        transform: scale(1.18) translateX(75px);
    }
}

@media (min-width: 1601px) {
    .bg-img-section > .pc-image-container img {
        transform: scale(1.18) translateX(115px);
    }
    .bg-img-section > .pc-image-container:hover > img {
        transform: scale(1.22) translateX(115px);
    }
}

@media (max-width:1076px){
    .hero-bg {
        height: 250vh;
    }
}
@media (max-width:992px){
    .hero-bg {
        height: 260vh;
    }
}
@media (max-width:768px){
    .hero-bg {
        height: 265vh;
    }
}
@media (max-width:722px){
    .hero-bg {
        height: 290vh;
    }
}


.gallery{
    width: 100vw;
    min-height: 60vh;
    background: linear-gradient(180deg, rgba(42,68,107,1) 0%, rgba(12,32,70,1) 35%, rgb(9, 24, 53) 50%, rgba(12,32,70,1) 85%, rgba(42,68,107,1) 100%);
}

.gallery_container{
    width: 90%;
    margin: 0px auto;
    padding-top: 50px;
}

#macy-container{
    opacity:0;
    /* transition: all ease-in-out 0.2s; */
}

.show{
    opacity: 1 !important;
}

.box{
    overflow: hidden;
}

.box img {
    width: 100%;
    height: auto;
    display: block;
    /* outline: 1px solid white;
    outline-offset: -1px; */
    transition: all ease-in-out 0.5s;
}

.box img:hover{
    transform: scale(1.1);
    filter:contrast(125%)

}

/* QUESTIONS SECTION */

.questions{
    width: 100vw;
    min-height: 25vh;
    background: linear-gradient(180deg, rgba(42,68,107,1) 0%, rgb(24, 84, 109) 49%, rgb(24, 124, 163) 100%);
    position: relative;
    justify-content: center;
    align-items: center;
    /* object-fit: cover; */

    
}

.questions_container{
    min-height: 25vh;
    width: 100vw;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    text-align: center;
    padding-top: 20px;
    position: relative;
    align-items: center ;
}

.question_text_container{
   position: relative;
}

.question_text_container h1 {
    padding-top: 15px;
    font-family: poppins;
    letter-spacing: 0.05em;
    font-size: 36px;
    color: white;

}

.question_text_container h2{
    margin-bottom: 40px;
    text-align: center;
    align-items: center;
    line-height: 20px;
    transition: all ease-in 1.4s;
}
.question_text_container h2 span {
    color: white;
}
.question_text_container h2 a {
    text-decoration: none;
    font-size: 26px;
    letter-spacing: 0.05em;
    color: #FF013C;
    /* text-shadow:  0px 1px  1px rgba(255, 255, 255, 0.438), 0px -1px  1px rgba(255, 255, 255, 0.438), -1px 0px  1px rgba(255, 255, 255, 0.438), 1px 0px  1px rgba(255, 255, 255, 0.438); */
    transition: all ease-in-out 0.15s;
}


.question_text_container h2 a:hover{
    color: rgb(255, 255, 255);
    /* text-shadow:  0px 2px  2px rgba(191, 22, 70, 0.8), 0px -2px  2px rgba(191, 22, 70, 0.8), -2px 0px  2px rgba(191, 22, 70, 0.8), 2px 0px  2px rgba(191, 22, 70, 0.8); */
    /* text-decoration: underline;
    text-underline-offset: 10px; */

}

/* Press Kit Btn */
.presskit{
    margin-bottom: 40px;
}

.presskit,
.presskit:after {
  width: 150px;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  font-family: Sen, sans-serif;
  font-weight: bold;
  background: linear-gradient(0deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: rgb(236, 236, 236);
  letter-spacing: 0.2em;
  /* box-shadow: 3px -3px 0px #00E6F6; */
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 1px;
  transition: all ease-in-out 0.25s ;
}

.presskit:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'PRESS KIT';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color:rgb(43, 43, 43);
  background: linear-gradient(0deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #ffae00, 2px 2px 0px #00E6F6;
  clip-path: var(--slice-0);

}


.presskit:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}


.presskit:hover{
    color: #000;
    transform: scale(1.05);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  /* 10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  } */
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  /* 30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  } */
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  /* 80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  } */
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

@media (min-width: 768px) {
  .presskit,
  .presskit:after {
    width: 200px;
    height: 60px;
    line-height: 60px;
  }
}



.character1 img, .character2 img {
    position: absolute;
    display: block;
    bottom: 0;
    height: 100%;
    
    transition: all ease-in-out 0.25s ;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.character2 img{
    right: 0;
}

@media (min-width:1699.98px){
    .character1 img{
        margin-left: 300px;
    }
    .character2 img{
        margin-right: 300px;
    }
}

@media (max-width:1299.98px){
    .character1 img, .character2 img{
        height: 80%;
        width: auto;
    }
    .question_text_container h2 a {
    text-decoration: none;
    font-size: 24px;
    color: #df0c48;

}
}

@media (max-width:999.98px){
    .character1 img, .character2 img{
        height: 60%;
        width: auto;
    }
    .character1 img{
        transition: translateY(200px);
    }

    .question_text_container h1{
        font-size: 28px;
        padding-bottom: 20px;
    }
    .question_text_container h2 a {
        font-size: 18px;
        padding-bottom: 130px;
    }
    

}

@media (max-width:699.98px){
    .character1 img, .character2 img{
        height: 50%;
        width: auto;
        display: none;
    }
    .question_text_container h1{
        font-size: 24px;
        padding-bottom: 0px;
    }
    .question_text_container h2 a {
        font-size: 14px;
    }
}

@media (max-width:499.98px){
    .question_text_container h1{
        font-size: 24px;
    }
    .question_text_container h2 , a{
        font-size: 16px;
        margin-bottom: 30px;
    }
}
@media (max-width:399.98px){
    .question_text_container h1{
        font-size: 18px;
    }
    .question_text_container h2 , a{
        margin-left: 20px;
        margin-right: 20px;
        font-size: 12px;
    }
}

/* FOOTER */


footer{
    background-color: 	rgb(34, 34, 34);
    overflow: hidden;
}
.footer-social ul > li{
    display: inline-block;
}

.social-item {
    text-decoration: none;
    list-style: none;
    transition: all .5s ease-in-out;
    padding: 15px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.social-item:hover {
  transform: scale(1.5);
  transition: all ease 500ms;
}

.social-item img {
    width: auto;
    height: 25px;
    transition: all .2s ease-in-out;
}
.footer-copyright{
    display: flex;
    flex-direction: column;
}


.footer-brand{
    width: 200px;
    margin: 0 auto;
}

.copyright{
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: rgb(185, 185, 185);
}

.footer-navbar-nav{
    list-style-type: none;
    padding: 0;
    

}
.footer-social{
    padding-top: 30px;
    padding-bottom: 20px;
}

@media (min-width: 1199.98px) {
    .footer-navbar-nav{
        width: 320px;
    }
    .footer-social{
        padding-top: 60px;
    }
    .footer-links{
        padding-top: 50px;
    }
}

.footer-social a{
    margin-left: 6px;
    margin-right: 6px;
    color: #000;
}

.footer-social a:hover{
    color: #fff;
}

.footer-brand:hover{ 
animation: pulse 1s infinite;
animation-timing-function: linear;   
}


.termsandprivacy{
    justify-content: center;
    display: flex;
    color: #fff;
    flex-direction: row;
    padding-bottom: 20px;
    font-weight: 300 ;
}

.termsandprivacy a {
    padding-left: 25px;
    padding-right: 25px;
    text-decoration: none;
    color: #fff;

}

.termsandprivacy a:hover {
    text-decoration: none;
    color: rgb(238, 44, 99);
}

@media (max-width: 370px){
    .termsandprivacy a {
        padding-left: 0px;
        padding-right: 0px;
    }
    .termsandprivacy {
        padding-bottom: 5px;
    }
}