:root {  
  /* Set neon color */
  --neon-border-color-red: red;
  --neon-border-color-blue: blue;
}

body {
  font-family: "Orbitron", "Ionicons", sans-serif;
  width: 100dvw;
  overflow: hidden;
  color: #CDCCFF;
}

/* Progresse bar */
.turbo-progress-bar {
  visibility: hidden;
}

/* Background */
.bg-radial-gradient-blue {
    background-image: radial-gradient(#040491, #000000);
    background: -webkit-linear-gradient();
    background: -moz-linear-gradient();
    background: linear-gradient();
}

.bg-radial-gradient-red {
    background-image: radial-gradient(#910404, #000000);
    background: -webkit-linear-gradient();
    background: -moz-linear-gradient();
    background: linear-gradient();
}

.bg-black {
    background-color: black;
}

.bg-blue {
    background: linear-gradient(60deg, black 0%, #0F0E35 100%);
}

.bg-red {
    background: linear-gradient(60deg, black 0%, #350e0e 100%);
}

/* Border */
.neon-border-flicker-red {
  border: 1px solid #fff;
  animation: flicker-red 1.5s infinite alternate;     
}

/* Animate neon flicker */
@keyframes flicker-red {    
    from, 19%, 21%, 23%, 25%, 54%, 56%, to {
        box-shadow:
            0 0 1px #fff,
            inset 0 0 1px #fff,
            0 0 2px var(--neon-border-color-red),
            inset 0 0 10px var(--neon-border-color-red),
            0 0 4px var(--neon-border-color-red),
            inset 0 0 1px var(--neon-border-color-red);        
    }
    
    20%, 24%, 55% { 
        box-shadow: none;
    }    
}

.neon-border-flicker-blue {
  border: 1px solid #fff;
  animation: flicker-blue 1.5s infinite alternate;     
}

/* Animate neon flicker */
@keyframes flicker-blue {    
    from, 19%, 21%, 23%, 25%, 54%, 56%, to {
        box-shadow:
            0 0 1px #fff,
            inset 0 0 1px #fff,
            0 0 2px var(--neon-border-color-blue),
            inset 0 0 10px var(--neon-border-color-blue),
            0 0 4px var(--neon-border-color-blue),
            inset 0 0 1px var(--neon-border-color-blue);        
    }
    
    20%, 24%, 55% { 
        box-shadow: none;
    }    
}

/* Bottom */
.bottom-0 {
    bottom: 0;
}

/* Card */
.attackCard {
    background: #1e1e1e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQYV2P8//+/FCMj4zMGJMCIzIGxKRQEAJgPBAbJqUVTAAAAAElFTkSuQmCC) repeat;    
}

.attackCard > .row {
    background: linear-gradient(0deg, rgba(245, 213, 70, 0.1) 0%, rgba(17, 17, 17, 0) 100%);
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* Font */
.font-digital {
    font-family: 'Digital Numbers', sans-serif;
}

/* Font size */
.fs-13px {
    font-size: 13px;
}

/* Height */
.dvh-100 {
    height: 100dvh !important;
}

.h-8 {
    height: 8%;
}

.h-9 {
    height: 9%;
}

.h-20 {
    height: 20%;
}

.h-33 {
    height: 33%;
}

.h-34 {
    height: 34%;
}

.h-40 {
    height: 40%;
}

.h-41 {
    height: 41%;
}

.h-42 {
    height: 42%;
}

.h-60 {
    height: 60%;
}

.h-68px {
    height: 68px;
}

.h-100px {
    height: 100px;
}

/* Line */
.lh-18 {
    line-height: 18px;
}

.w-100px {
    width: 100px;
}

/* Margin top */
.mt-n135 {
    margin-top: -135%;
}

/* Max Width */
.mw-500px {
    max-width: 500px;
}

/* Overlay */
.overlay-disable {
    position: relative;
    overflow: hidden;
}
.overlay-disable::after {
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.7);
    opacity: 1;
}

/* Rotation */
@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.rotating {
    animation: rotating 5s linear infinite;
}

/* Start */
.start-85 {
    left: 85%;
}

.start-90 {
    left: 90%;
}

/* Top */
.top-90 {
    top: 90%;
}

/* Vertical align */
.align-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Pour centrer uniquement verticalement */
}

.align-horizontal {
    position: absolute;
    left: 50%;
    transform: translateY(-50%); /* Pour centrer uniquement verticalement */
}

/* Width */
.w-90px {
    width: 90px;
}

/* Z index */
.z-max {
    z-index: 999 !important;
}

/*** UTILS ***/

/* Banner */
.hero-wrapper {
  position: relative;
  /*background: steelblue;
  background: #283f63;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hero-wrapper.hero-wrapper-left .hero-text-content {
  width: 50%;
  margin-left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}

.hero-wrapper.hero-wrapper-left .hero-img {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  align-self: stretch;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
}

.hero-wrapper.hero-wrapper-right .hero-text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}
.hero-wrapper.hero-wrapper-right .hero-img {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  align-self: stretch;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}

/* nav-neon */
.nav-neon.nav .icon {
    position: absolute;
    top: 0;
    left: -350px;
    width: 350px;
    height: 270px;
    line-height: 270px;
    text-align: center;
    font-size: 6.5em;
    color: #CDCCFF;
    text-shadow: 5px 5px 100px #4C4C99;
}

.nav-neon.nav .active {
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px #46467F;
    animation: bolder 1.5s ease-in-out infinite;
    transition: 0.15s;
}

.nav-neon.nav .nav-link {
    position: relative;
    height: 100px;
    text-indent: 25px;
    line-height: 90px;
    box-shadow: inset 0 0 0 2px transparent;
    cursor: pointer;
    overflow: hidden;
    transition: 0.15s;
    color: #4C4C99;
}

.nav-neon.nav .nav-link .sub {
    position: absolute;
    font-size: 50%;
    line-height: 0px;
    transform: translateY(-40px);
    opacity: 0;
    font-weight: bolder;
    transition: 0.15s;
    color: #4C4C99;
}

.nav-neon.nav .nav-link:before {
  content: "";
  position: absolute;
  right: 30px;
  line-height: 90px;
  font-family: "fontawesome";
  color: #4C4C99;
  text-shadow: 0 0 30px #4C4C99;
  transform-origin: left center;
  transform: scale(0.9);
  opacity: 0;
  transition: 0.15s;
}

.nav-neon.nav .nav-link.active {
  line-height: 65px;
  color: #CDCCFF;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.nav-neon.nav .nav-link.active .sub {
  transform: translateY(0px);
  opacity: 1;
  color: #4C4C99;
  text-shadow: none;
}

.nav-neon.nav .nav-link.active:before {
  transform: scale(1);
  right: 25px;
  opacity: 1;
}

@keyframes scaleIn {
  0% {
    transform: scale(1.3);
    filter: blur(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes bolder {
  0%, 100% {
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #46467F;
  }
  50% {
    border-radius: 15px;
    box-shadow: inset 0 0 0 2px #4C4C99;
    background: rgba(255, 255, 255, 0.015);
  }
}