@import url("../dashboard/assets/fonts/sh/sh-med.otf");
@import url("../dashboard/assets/fonts/sh/sh-bold.otf");
@import url("../dashboard/assets/fonts/sh/sh-black.otf");
html {
  font-family: Shaw Medium,'Open Sans',BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  background-repeat: no-repeat;
  background-position: fit;
  background-size: cover;
  color: #dfdfdf;
  display: flexbox;
}

h2, h3, h4, h5, h6, a:visited, a {
  color: #dfdfdf;
  margin: 10px 0;
  font-style: normal;
  font-family: Shaw Medium,'Open Sans',BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  justify-content: center;
  text-align: center;
}

.container {
  background-color: rgba(33, 33, 33, 0.7);
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  padding: 18px;
  margin-top: 13px;
  flex-direction: row;
  max-width: 50%;

}

nav {
width: 100%;
background-color: #0b0b0b;
position: fixed;
top: 0;
right: 0;
height: 80px;
overflow: hidden;
z-index: 999 !important;
}
nav ul {
position: absolute;
top: 0;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
width: 140vw;
}

nav li.active {
background-color: #151515;
color: #efefef;
}
nav li.active::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #1893f7;
}
nav li:nth-child(1) {
animation: pop 0.5s 0.15s 1 forwards;
}
nav li:nth-child(2) {
animation: pop 0.5s 0.3s 1 forwards;
}
nav li:nth-child(3) {
animation: pop 0.5s 0.45s 1 forwards;
}
nav li:nth-child(4) {
animation: pop 0.5s 0.6s 1 forwards;
}
nav li:nth-child(5) {
animation: pop 0.5s 0.75s 1 forwards;
}
nav li:nth-child(6) {
animation: pop 0.5s 0.9s 1 forwards;
}
nav li:nth-child(7) {
animation: pop 0.5s 1.05s 1 forwards;
}
nav li:hover {
color: #ececec;
}
nav li:active {
background-color: #222;
}
nav li:nth-child(1):hover ~ .slide {
left: 0;
}
nav li:nth-child(2):hover ~ .slide {
left: 20vw;
}
nav li:nth-child(3):hover ~ .slide {
left: 40vw;
}
nav li:nth-child(4):hover ~ .slide {
left: 60vw;
}
nav li:nth-child(5):hover ~ .slide {
left: 80vw;
}
nav li:nth-child(6):hover ~ .slide {
left: 100vw;
}
nav li:nth-child(7):hover ~ .slide {
left: 120vw;
}
nav li.slide {
position: absolute;
left: -20vw;
top: 0;
background-color: #fff;
z-index: -1; 
height: 2px;
margin-top: 98px;
transition: left 0.3s ease;
transform: translateY(0);
}
@media (min-width: 668px){
.displayDesktopOnly {
display: content;
}
nav li {
margin: 0;
float: left;
display: inline-block;
height: 98px;
margin-bottom: 2px;
line-height: 80px;
width: 20vw;
text-align: center;
color: #555;
transition: background-color 0.5s 0.2s ease, color 0.3s ease;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 800;
transform: translateY(100%);
}
}
@media (max-width: 668px){
.displayMobileOnly {
display: content;
}
nav li {
margin: 0;
float: left;
display: block;
height: 98px;
margin-bottom: 2px;
line-height: 80px;
width: 20vw;
text-align: center;
color: #555;
transition: background-color 0.5s 0.2s ease, color 0.3s ease;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 800;
transform: translateY(100%);
}
}
@media (max-width: 568px){
.hideOnMobile {
display: none;
}
}

@media (max-width: 341px){
.hideOnMobileSm {
display: none;
}
}

.primarySec {
height: 100vh;
display: flex;
}

.titleBack {
height: 100vh;
display: flex;
}

.titleBack .title {
max-width: 60%;
width: 100%;
align-self: center;
transform: translateY(-50px);
margin: 0 auto; 
overflow: hidden;
padding-bottom: 10px;
}
.titleBack .title span {
display: inline-block;
font-size: 5vw;
color: #efefef;
width: 100%;
text-transform: uppercase;
transform: translateX(-100%);
animation: byBottom 1s ease both;
font-weight: 600;
letter-spacing: 0.25vw;
}
.titleBack .title span:last-child {
font-size: 1rem;
animation: byBottom 1s 0.25s ease both;
}
.titleBack .title span a {
position: relative;
display: inline-block;
margin-left: 0.5rem;
text-decoration: none;
background: -webkit-linear-gradient(#ec6417,#03a9f4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.titleBack .title span a::after {
content: "";
height: 2px;
background-color: #959a9f ;
position: absolute;
bottom: -10px;
left: 0;
width: 2;
animation: linkAfter 0.5s 1s ease both;
}
@-moz-keyframes pop {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@-webkit-keyframes pop {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@-o-keyframes pop {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes pop {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@-moz-keyframes byBottom {
0% {
transform: translateY(150%);
}
100% {
transform: translateY(0);
}
}
@-webkit-keyframes byBottom {
0% {
transform: translateY(150%);
}
100% {
transform: translateY(0);
}
}
@-o-keyframes byBottom {
0% {
transform: translateY(150%);
}
100% {
transform: translateY(0);
}
}
@keyframes byBottom {
0% {
transform: translateY(150%);
}
100% {
transform: translateY(0);
}
}
@-moz-keyframes linkAfter {
0% {
width: 0;
}
100% {
width: 30px;
}
}
@-webkit-keyframes linkAfter {
0% {
width: 0;
}
100% {
width: 30px;
}
}
@-o-keyframes linkAfter {
0% {
width: 0;
}
100% {
width: 30px;
}
}
@keyframes linkAfter {
0% {
width: 0;
}
100% {
width: 30px;
}
}

.raise:hover,
.raise:focus {
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.25em);
}
.raise {
--color: #ffa260;
--hover: #e5ff60;
}

@font-face {
font-family: "a Atmospheric";
src: url(https://raiden.gg/assets/fonts/aAtmospheric.ttf) format("truetype");
}

h1 {
  justify-content: center;
  text-align: center;
  font-family: 'a Atmospheric', sans-serif !important;
  font-weight: bolder;
  background: linear-gradient(to right, #4a5ccf, #3359e7, #d74043, #bb5c5f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red {
  background: linear-gradient(to left, #ee0000, #612226 , #d74043, #ff4848) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent  !important;
}

p {
  text-align: left;
}
ul, li {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  list-style-type:circle;
}