/*  NEON PROTOCOL ECOSYSTEM MODULE STYLESHEET */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,300,400,500,600,700,800');

body {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), url('../imgs/banner-bg.webp') !important;
    font-family: "Space Grotesk", monospace, sans-serif !important;
}
.neon-blue {
    text-shadow: 0 0 2px #188dd6, 0 0 3px #188dd6, 0 0 15px #188dd6, 0 0 15px #188dd6, 0 0 3px #188dd6, 3px 3px 0.5px #0e567c !important;  
    color: #92f1fc !important;
    color: #08e7fe !important;/* darker */
}
header {
    border-bottom: 0.5px solid #15213c !important;
    padding-block: 0.5rem;
}
footer {
    background: unset !important;
}
main {
    position: relative;
    min-height: 50rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    /* background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7) 80%); */
    padding-block: 8rem 5rem;
    box-sizing: border-box;
    overflow: hidden !important;

    font-family: "Space Grotesk", monospace, sans-serif;
}
#ecosystemContainer {
    position: relative;
    width: 100%;
    overflow: hidden !important;
}
#ecoContent {
    position: absolute;
}
#ecosystemContainer img {
    position: absolute;
    left: 50px;
    z-index: 2;
    width: 2px;
    height: 0px;
    top: 50%;
    margin-top: -100px;
}
#ecosystemContainer #ecosystemWelcome {
    opacity: 0;
    width: 900px;
    padding-left: 20px;
    color: white;
    font-size: 18pt;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    left: 50px;
}
#ecosystemContainer #ecosystemWelcome #lastSentence {
    margin: 0;
    font-weight: 400;
    font-size: 14pt;
}
#ecosystemContainer #ecosystemWelcome #firstSentence {
    font-weight: 500;
    font-size: 22pt;
    margin: 0;
    margin-bottom: 8px;
    margin-top: 2px;
}
#ecosystemContainer #ecosystemWelcome #universe {
    text-transform: uppercase;
    font-size: clamp(26px, 5vw, 40px);
    font-family: Raleway,monospace, sans-serif, "Helvetica Neue", Helvetica, "Liberation Sans" !important;
    font-weight: 100;
}
#ecosystemContainer #ecoContent {
    top: 50%;
    margin-top: -70px;
    width: 500px;
    left: 70px;
}
#ecosystemContainer #ecoContent h2 {
    margin: 0;
}
#ecosystemContainer #ecoContent span {
    font-weight: 200;
}
.ecosystemH {
    letter-spacing: 0.2vw !important;
    font-size: clamp(26px, 5vw, 40px);
    font-family: Raleway,monospace, sans-serif, "Helvetica Neue", Helvetica, "Liberation Sans" !important;
    font-weight: 100;
}
#ecoContentTitle {
    font-size: clamp(26px, 5vw, 35px);
    font-family: Raleway,monospace, sans-serif, "Helvetica Neue", Helvetica, "Liberation Sans" !important;
    font-weight: 100;

    color: #08e7fe;
    text-shadow: 0 0 2px #188dd6, 0 0 3px #188dd6, 0 0 15px #188dd6, 0 0 15px #188dd6, 0 0 3px #188dd6, 3px 3px 0.5px #0e567c;
    opacity: 1;
    font-weight: 200;
    letter-spacing: 0.5vw;
    font-size: 25pt;
    padding-bottom: 1vw;
}
#ecoContentTitle span {
    font-size: clamp(26px, 5vw, 36px);
    font-family: Raleway,monospace, sans-serif, "Helvetica Neue", Helvetica, "Liberation Sans" !important;
    font-weight: 500;
    letter-spacing: 0.5vw;

    color: #08e7fe;
    text-shadow: 0 0 2px #188dd6, 0 0 3px #188dd6, 0 0 15px #188dd6, 0 0 15px #188dd6, 0 0 3px #188dd6, 3px 3px 0.5px #0e567c;
}
#ecoContentTitle div {
    font-size: 12pt;
    display: inline-block;
}
#ecoContent #subtitle {
    letter-spacing: 1.5px;
    margin: 0;
    font-size: 16pt;
    font-family: Raleway;
    font-weight: 200;
    color: white;
}
#ecoContent #description {
    color: white;
    letter-spacing: 1.5px;
    font-family: Raleway;
    font-weight: 200;
    font-size: 16pt;
}
#ecoContent #description span {
    color: #08e7fe;
    text-shadow: 0 0 2px #188dd6, 0 0 3px #188dd6, 0 0 15px #188dd6, 0 0 15px #188dd6, 0 0 3px #188dd6, 3px 3px 0.5px #0e567c;
}
#ecoContent #description div {
    color: #acacac;
    font-size: 10pt;
}
#ecoContent #description a {
    color: white;
    line-height: 10px;
    transition: 0.3s;
}
#ecoContent #description a:hover {
    line-height: 11px;
    font-weight: 500;
}
#ecosystemContainer, #ecoContent, #developmentStatus {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 200;
    color: white;
    letter-spacing: 1.5px;
    font-size: 16pt;
}
#developmentStatus {
    margin-top:2rem;
    position: relative;
    padding:2rem 1rem;
    box-sizing: border-box;
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    transition: 0.5s;
}

.rewardsInformer {
	padding: 5px 20px;
	font-size: clamp(12.5px, 1vw, 13px);
	font-weight: 100;
	text-align: center;
	cursor:help;
	transition: background-color 0.3s;
	color: #08e7fe;
	border: 1px solid rgba(51, 153, 255, 0.15);
	border-radius: 8px;
/*
	background-color: rgba(29, 163, 216, 0.2);
	background-color: rgba(29, 129, 216, 0.2);
*/
	background-color: rgba(29, 129, 216, 0.15);
	animation: hideDiv 60s forwards;
	transition: 0.5s;
}
@keyframes hideDiv {
	0% {
	  opacity: 1;
	  visibility: visible;
	}
	95% {
		opacity: 0.95;
	}
	99.9% {
	  opacity: 0;
	  visibility: hidden;
	}
	100% {
	  opacity: 0;
	  visibility: hidden;
	  display: none;
	}
}