@font-face {
    font-family: 'Arteche';
    src:  url('../fonts/arteche.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  --backgroundColor: rgba(246, 241, 209);
  --colorShadeA: rgb(106, 163, 137);
  --colorShadeB: rgb(121, 186, 156);
  --colorShadeC: rgb(150, 232, 195);
  --colorShadeD: rgb(187, 232, 211);
  --colorShadeE: rgb(205, 255, 232);
}

body {background:linear-gradient(to bottom, #00162a 0%, #00162a 30%, #012140 30%, #012140 50%, #00455f 50%, #00455f 65%, #006270 65%, #006270 78%, #007b71 78%, #007b71 84%, #008d73 84%, #008d73 100%);height:100dvh;}
.banner-area-3 .banner-content .title span, .navbar-area .nav-container .navbar-collapse .navbar-nav li a.active, .navbar-area .nav-container .navbar-collapse .navbar-nav li a:hover, .navbar-area .nav-container .navbar-collapse .navbar-nav li:hover a, .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a:hover, .about-content .small-title, .starttimelabel, span.reward  {color:#63EA71;}
.about-content .small-title {border-radius:10px;}
.banner-area-3 .banner-content .title {font-family:"Arteche", sans-serif;color:white;}
.banner-area-3 .banner-content .sub-title {text-transform:uppercase;}
.banner-area-3 .animate-img-2 {max-width:70px;left:0;}
.banner-area-3 .animate-img-5 {max-width:80px;}
.navbar-area.sticky-active {border-bottom:2px solid #FEF100;background:rgba(0,0,0,0.7);}
.navbar-area.sticky-active .navbar-collapse {background:none;}
.navbar-collapse .navbar-nav li > a::before {background:none;}
.navbar-area .nav-container .navbar-collapse .navbar-nav li {padding-right:13px;}
.icon .secondbullet {display:none;}
.intro-box-inner:hover .icon .secondbullet {display:block;}
.intro-box-inner:hover .icon .firstbullet {display:none;}
.intro-box-inner:hover .icon {border:2px solid #FEF100;}
.section-title img {height:30px ! important;}
.btn-base, .slider-control-round button:hover, .back-to-top, .btn-gray:hover {background:#63EA71;border-radius:20px;}
.btn-gray {border-radius:20px;}
.section-title .sub-title, .slider-control-round button {color:#63EA71;}
.intro-box-inner:after {background:rgba(0,0,0,0.6);}
.section-title-games {margin-top:50px;}
.section-title p {margin-top:10px;}
.questsgame {margin-top:50px;}
.tab4 .questsgame {margin-top:0;}

button.buttonarcade {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 2px solid #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.2rem;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-family: inherit;
    padding: 0.4em 1em;
    border-radius: 1em;
    background: linear-gradient(to right, #7FFFE2, #CFFC90, #EFFB70, #CFFC90, #7FFFE2);
    transform-style: preserve-3d;
    transition: transform 175ms cubic-bezier(0, 0, 1, 1);
    z-index: 1;
}

button.buttonarcade::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--colorShadeC, #ccc); /* Fallback if undefined */
    border: 2px solid #000;
    border-radius: inherit;
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 175ms cubic-bezier(0, 0, 1, 1);
    z-index: -1;
}

button.buttonarcade:hover {
    background: #ffffff; /* Force white on hover */
    transform: translate(0, 0.375em);
}

button.buttonarcade:hover::before {
    transform: translate3d(0, 0.75em, -1em);
}

button.buttonarcade:active {
    transform: translate(0, 0.75em);
}

button.buttonarcade:active::before {
    transform: translate3d(0, 0, -1em);
    box-shadow: 0 0 0 2px var(--colorShadeB, #999), 0 0.25em 0 0 var(--colorShadeB, #999);
}


h4.sub-title {margin-bottom:20px;}
.signupbuttoncon {margin-top:40px;}

.gamecontainer {margin-top:150px;}
.about-content .small-title {font-size:17px;}
.gamescreenshot img {border-radius:20px;border:2px solid #63EA71;}
.single-tournament-2 h4 {margin-bottom:10px;}
.rewardicon img {width:30px;}
.navbar-area-3 {margin:40px 0 30px 0;}
span.reward {display:block;margin-bottom:5px;}
span.rewardicon, span.rewardvalue {float:left;}
span.rewardicon {margin-right:10px;}
span.rewardvalue {font-size:14pt;}

.mainnav {width: 45%;text-align: center;display: inline-block; margin: 0 auto;}
.mainnav li {float:left;margin-right:20px;display:block;}
.menu-open {display:inline-block;padding:0 ! important;}
.navbar-area .nav-container .logo {margin:0 auto;}
nav.sticky-active {margin:0;padding:30px 0;}
.tab1 h2 {font-size:38px;}
.tab1 .about-area {margin-top:50px;}
.banner-content .sub-title {font-size:20px;margin-top:10px;}

.mainnav li a {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 2px solid #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 13pt;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-family: inherit;
    padding: 0.35em 0.5em;
    border-radius: 1em;
    background: linear-gradient(to right, #7FFFE2, #CFFC90, #EFFB70, #CFFC90, #7FFFE2);
    transform-style: preserve-3d;
    transition: transform 175ms cubic-bezier(0, 0, 1, 1);
    z-index: 1;
}

.mainnav li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--colorShadeC, #ccc); /* Fallback if undefined */
    border: 2px solid #000;
    border-radius: inherit;
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 175ms cubic-bezier(0, 0, 1, 1);
    z-index: -1;
}

.mainnav li a:hover {
    background: #ffffff; /* Force white on hover */
    transform: translate(0, 0.375em);
}

.mainnav li a:hover::before {
    transform: translate3d(0, 0.75em, -1em);
}

.mainnav li a:active {
    transform: translate(0, 0.75em);
}

.mainnav li a:active::before {
    transform: translate3d(0, 0, -1em);
    box-shadow: 0 0 0 2px var(--colorShadeB, #999), 0 0.25em 0 0 var(--colorShadeB, #999);
}

h4 {text-transform:uppercase;}
.banner-area-3 {padding:0;}
.navbar-area .nav-container .logo a img {max-width:170px;}
.mainimage img {max-width:100%;}
.banner-area-3 .banner-content .title {font-size:68px;}
.banner-area-3 .banner-content {max-width:500px;}
.signupbuttoncon .buttonarcade {margin-right:20px;}
.signupbuttoncon .buttonarcade:nth-child(2) {margin-right:0;}
.split_chars img {height:135px;}
.logomainappear {animation: blackhole-warp 0.5s ease-out forwards;}
.airdroptoken img {width:50px;height:50px;}
.airdroptoken {margin-right:20px;}
.starttime span {display:block;}

/* Start Warp Effect */

/* Black Hole Warp Animation */
@keyframes blackhole-warp {
    0% {
        transform: scaleX(0.1) scaleY(0.6);
        filter: blur(10px) brightness(0.3);
        opacity: 0;
    }
    20% {
        transform: scaleX(0.5) scaleY(1.14);
        filter: blur(8px) brightness(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        filter: blur(0);
        opacity: 1;
    }
}




/* End of Warp Effect */

@media only screen and (max-width: 1300px) { 
.navbar-area .nav-container {display:block;text-align:center;}
.mainnav, .logo {display:inline-block;}
.navbar-area .nav-container .logo {margin-right:100px;}
.mainnav li {float:left;margin-top:0;}
.logo img {float:left;}
.mainnav {width:64%;}
}


@media only screen and (max-width: 900px) { 
.mainnav {width:100%;}
.navbar-area-3 {margin-top:20px;}
.navbar-area .nav-container .logo {margin-right:0;margin-bottom:10px;}
}

@media only screen and (max-width: 700px) { 
button.buttonarcade {padding:0.4em 0.6em;}
}


@media only screen and (max-width: 575px) { 
.gamessectiondesc {margin-top:20px ! important;}
.section-title-games {margin-top:70px;}
}

@media only screen and (max-width: 500px) { 
.banner-area-3 .animate-img-2 {max-width:40px;}
.banner-area-3 .animate-img-5 {max-width:50px;right:10px;}
.mainnav li a {font-size:11pt;}
.mainnav li {margin-right:10px;}
button.buttonarcade {font-size:15pt;}
.banner-area-3 .banner-content .title {font-size:53px;}
.navbar-area .nav-container .logo a img {max-width:150px;}
.details {width:100%;}
.gamequestcon {display:block ! important;text-align:center;}
.gamequestcon .main-img, .gamequestcon h4 {margin-bottom:10px ! important;}
.airdroptoken {margin-bottom:10px;}
}

@media only screen and (max-width: 450px) { 
.bottom-area-quest .col-4 {width:50%;}
.bottom-area-quest .text-end {margin-top:20px;text-align:center ! important;width:100% ! important;}
.bottom-area-quest .text-end a {display:inline-block;}
}

@media only screen and (max-width: 400px) { 
.banner-area-3 .banner-content .title {font-size:44px;}
.mainnav li a {font-size:10pt;}
.mainnav li {margin-right:5px;}
}


@media only screen and (max-width: 350px) { 
.mainnav li {float:none;display:inline-block;}
}