/************ FONTS **************/
@font-face {
  font-family: zaltys;
  src: url(../fonts/Zaltys/ZALTYS-Regular.ttf);
}

@font-face {
  font-family: crystal;
  src: url(../fonts/crystal/Crystal-regular_IMoltsanov.otf);
}

@font-face {
  font-family: elvenes-reg;
  src: url(../fonts/elvenes/Elvenes-RegularDisplay.ttf);
}

@font-face {
  font-family: elvenes-thin;
  src: url(../fonts/elvenes/Elvenes-ThinDisplay.ttf);
}

@font-face {
  font-family: unscii16;
  src: url(../fonts/unscii-16.ttf);
}

/************ INDEX **************/
:root {
  --blend-mode: darken;
  --gti-mode: url("../medias/bg/johannes-plenio-2TQwrtZnl08-unsplash.jpg");
}

html,
#tuning,
#soft,
body {
  margin: 0;
}

button {
  position: absolute;
}

/******************************
************ TUNING ***********
*******************************/
#tuningbgImg {
  height: 100%;
  z-index: -9;
  position: fixed;
  top: 0;
  width: 100vw;
  background: linear-gradient(to right, red, blue, black, rgba(79, 40, 189, 0.5));
  /*macro road*/
  /* background-image: url("../medias/bg/christin-hume-6Dlcufknp58-unsplash.jpg");  */
  /*flammes bleu rouge*/
  /* background-image: url("../medias/bg/marek-piwnicki-6vddaknKm3k-unsplash.jpg");  */
  /*flamme heureux accident*/
  /* background-image: url("../medias/bg/marek-piwnicki-dBCcvcVbJjw-unsplash.jpg");  */
  /*big motor*/
  /* background-image: url("../medias/bg/rktkn-BZ9z9ZeUjbI-unsplash.jpg"); */
  /*infinite road*/
  /* background-image: url("../medias/bg/ilse-orsel-v0oyDAu4Ypg-unsplash.jpg");  */
  /*land road*/
  background-image: var(--gti-mode);
  background-repeat: no-repeat;
  background-size: cover;
  filter: hue-rotate(90deg);
  mix-blend-mode: hard-light;
  /* animation: clignotant 1.5s; OUFF
  animation-iteration-count: infinite; */
}

.offtuning {
  display: none;
}

.ontuning {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 20px;
  height: 100vh;
}

.phareG1 {
  grid-column: 1 / 1;
  grid-row: 2 / 4;
}

.phareG2 {
  grid-column: 2 / 2;
  grid-row: 3 / 5;
}

nav {
  grid-column: 3 / 5;
  grid-row: 2 / 3;
  /* display: none; */
}

.phareD1 {
  grid-column: 5 / 6;
  grid-row: 3 / 5;
}

.phareD2 {
  grid-column: 6 / -1;
  grid-row: 2 / 4;
}

.phareD1,
.phareD2,
.phareG1,
.phareG2 {
  mix-blend-mode: hard-light;
  /*ICI*/
  background-color: yellow;
  border-radius: 500px;
  background-image: radial-gradient(at center, yellow, black);
  border: 8pt groove #000000;
  filter: drop-shadow(0 0 1.75rem gold);
  /* border-bottom-color: gold; */
}

.ligne {
  grid-column: 1 / -1;
}

.aileG {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  background-color: orange;
  border: 5pt groove grey;
  background-image: radial-gradient(at center, orange, black);
  filter: drop-shadow(0 0 1.75rem orangered);
  /*rgb(255, 166, 0)*/
  border-radius: 500px;
  border-right-color: black;
  border-bottom-color: black;
  animation: clignotant 1s;
  animation-iteration-count: infinite;
}

.tuningMain {
  grid-column: 2 / 6;
  grid-row: 5 / 8;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, auto);
}

.aileD {
  grid-column: 6 / -1;
  grid-row: 4 / 5;
  background-color: orange;
  border-radius: 500px;
  background-image: radial-gradient(at center, orange, black);
  filter: drop-shadow(0rem 0rem 1.75rem orangered);
  border: 5pt groove grey;
  border-left-color: black;
  border-bottom-color: #000000;
  animation: clignotant 1s;
  animation-iteration-count: infinite;
}

.tuningArticle {
  overflow-y: scroll;
  max-height: 6vh;
  background-color: black;
  filter: drop-shadow(0 0 1.75rem rgb(255, 0, 255));
  mix-blend-mode: color-dodge;
  /*ICI*/
}

/* article:nth-of-type(odd){
  background-color: rgb(32, 32, 32);
} */
.tuningArticle:first-of-type {
  border-top-left-radius: 30px;
}

.tuningArticle:nth-of-type(6) {
  border-top-right-radius: 30px;
}

.tuningArticle:nth-of-type(19) {
  border-bottom-left-radius: 30px;
}

.tuningArticle:nth-of-type(24) {
  border-bottom-right-radius: 30px;
}

.tuningArticle::-webkit-scrollbar {
  display: none;
}

.air {
  grid-column: 1 / -1;
  grid-row: 7 / 8;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(1, auto);
  display: none;
}

.airC {
  background-color: white;
  border-radius: 100px;
  height: 10vh;
  background: radial-gradient(at center, white, black);
  filter: drop-shadow(0 0 1.75rem white);
}

.airC:nth-of-type(odd) {
  opacity: 0;
  background-color: black;
}

.bas {
  grid-column: 1 / -1;
  grid-row: 8 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, auto);
  column-gap: 5px;
  row-gap: 5px;
  /* background: linear-gradient(0deg, rgba(126,68,255,1) 0%, rgba(0,0,0,1) 74%);  */
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom: 47pt groove #000000;
  filter: drop-shadow(0 0 1.75rem orangered);
}


.basG {
  grid-column: 1 / 1;
  border-bottom-left-radius: 100px;
}

.basD {
  grid-column: 3 / -1;
  border-bottom-right-radius: 100px;
}

.tuningh1 {
  position: fixed;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 10rem;
  margin: 0;
  font-style: italic;
  text-align: center;
  z-index: 99;
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px red,
    0 0 82px red,
    0 0 92px red,
    0 0 102px red,
    0 0 151px red;
  animation: pulsate 6.5s infinite alternate;
}

.tuningh1>sub {
  font-size: 5rem;
}

@keyframes pulsate {

  100% {
    color: #5271ff;
    text-shadow:
      0 0 4px fuchsia,
      0 0 11px fuchsia,
      0 0 19px fuchsia,
      0 0 40px #5271ff,
      0 0 80px #5271ff,
      0 0 90px #5271ff,
      0 0 100px #5271ff,
      0 0 150px #5271ff;

  }

  50% {
    color: black;
    text-shadow:
      0 0 4px blueviolet,
      0 0 11px blueviolet,
      0 0 19px blueviolet,
      0 0 42px orangered,
      0 0 82px orangered,
      0 0 92px orangered,
      0 0 102px orangered,
      0 0 151px orangered;

  }

  0% {
    color: orangered;
    text-shadow:
      0 0 4px #5271ff,
      0 0 10px #5271ff,
      0 0 18px #5271ff,
      0 0 42px red,
      0 0 82px red,
      0 0 92px red,
      0 0 102px red,
      0 0 151px red;

  }
}

/******************************
********** END TUNING *********
*******************************/


/******************************
************ SOFT ***********
*******************************/
.offsoft {
  display: none;
}

.onsoft {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 20px;
  height: 100vh;
}

#softbgImg {
  height: 100%;
  z-index: -9;
  position: fixed;
  top: 0;
  width: 100vw;
}


.softphareD1,
.softphareD2,
.softphareG1,
.softphareG2,
.softaileD,
.softaileG,
.softair,
.softairC,
.softArticle,
.softbas {
  background-color: aqua;
}

.softphareG1 {
  grid-column: 1 / 1;
  grid-row: 1 / 3;
}

.softphareG2 {
  grid-column: 2 / -1;
  grid-row: 1 / 3;
}

nav {
  grid-column: 2 / 6;
  grid-row: 1 / 2;
}

.softphareD1 {
  grid-column: 4 / 6;
  grid-row: 2 / 4;
  display: none;
}

.softphareD2 {
  grid-column: 6 / -1;
  grid-row: 1 / 3;
  display: none;
}

.softligne {
  grid-column: 1 / -1;
}

.softaileG {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}

.softMain {
  grid-column: 1 / 5;
  grid-row: 4 / 7;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 20px;
}

.softaileD {
  grid-column: 5 / -1;
  grid-row: 4 / 7;
}

.softArticle {
  overflow-y: scroll;
}

.softArticle::-webkit-scrollbar {
  display: none;
}

.softair {
  grid-column: 1 / -1;
  grid-row: 6 / 7;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(1, auto);
  display: none;
}

.softairC {
  background-color: white;
  border-radius: 100px;
  height: 10vh;
}

.softairC:nth-of-type(odd) {
  opacity: 0;
  background-color: black;
}

.softbas {
  grid-column: 1 / -1;
  grid-row: 8 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, auto);
  column-gap: 5px;
  row-gap: 5px;
  /* background: linear-gradient(0deg, rgba(126,68,255,1) 0%, rgba(0,0,0,1) 74%);  */
  /* border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom: 47pt ridge fuchsia; */
}

.softbasG {
  grid-column: 1 / 1;
  border-bottom-left-radius: 100px;
}

.softbasD {
  grid-column: 3 / -1;
  border-bottom-right-radius: 100px;
}

.softh1 {
  position: fixed;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5rem;
  margin: 0;
  text-align: center;
}

/******************************
*********** END SOFT **********
*******************************/






/************ 404 **************/
#err404 {
  position: absolute;
  width: 10vw;
  mix-blend-mode: color-burn;
  color: chartreuse;
}

.err {
  position: absolute;
  color: red;
  mix-blend-mode: hard-light;
}

@keyframes superanimation {
  0% {
    left: 0vw;
    top: 0vh;
  }

  50% {
    top: 50vh;
    transform: scale(1);
  }

  100% {
    left: 90vw;
    transform: scale(2);

  }
}

@keyframes clignotant {
  0% {
    /* opacity: 0; */
    background-image: radial-gradient(at center, orange, black);
    /* background-image: radial-gradient(at center, orange, white); */
  }

  /* 50%{
    opacity: .5;
  } */
  100% {
    /* opacity: 1; */
    background-image: radial-gradient(at center, black, orange);
    /* background-image: radial-gradient(at center, white, orange); */
  }
}

button.home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 50px;
  /* background-image: linear-gradient(to right,red, blue, black, rgba(79, 40, 189, 0.5)); */
  animation: superanimation 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

button>a {
  color: white;
}