@font-face {
  font-family: "neiges";
  src: url(neiges_electriques.woff);
}

@font-face {
  font-family: "MB355";
  src: url(Mario_Bravo-355.woff);
}

@font-face {
  font-family: "MB000";
  src: url(Mario_Bravo-000.woff);
}

@font-face {
  font-family: "MB005";
  src: url(Mario_Bravo-005.woff);
}

@font-face {
  font-family: "MB009";
  src: url(Mario_Bravo-009.woff);
}

@font-face {
  font-family: "MB050";
  src: url(Mario_Bravo-050.woff);
}

@font-face {
  font-family: "MB055";
  src: url(Mario_Bravo-055.woff);
}

@font-face {
  font-family: "MB059";
  src: url(Mario_Bravo-059.woff);
}

@font-face {
  font-family: "MB090";
  src: url(Mario_Bravo-090.woff);
}

@font-face {
  font-family: "MB095";
  src: url(Mario_Bravo-095.woff);
}

@font-face {
  font-family: "MB099";
  src: url(Mario_Bravo-099.woff);
}

@font-face {
  font-family: "MB500";
  src: url(Mario_Bravo-500.woff);
}

@font-face {
  font-family: "MB505";
  src: url(Mario_Bravo-505.woff);
}

@font-face {
  font-family: "MB509";
  src: url(Mario_Bravo-509.woff);
}

@font-face {
  font-family: "MB550";
  src: url(Mario_Bravo-550.woff);
}

@font-face {
  font-family: "MB555";
  src: url(Mario_Bravo-555.woff);
}

@font-face {
  font-family: "MB559";
  src: url(Mario_Bravo-559.woff);
}

@font-face {
  font-family: "MB590";
  src: url(Mario_Bravo-590.woff);
}

@font-face {
  font-family: "MB595";
  src: url(Mario_Bravo-595.woff);
}

@font-face {
  font-family: "MB599";
  src: url(Mario_Bravo-599.woff);
}

@font-face {
  font-family: "MB900";
  src: url(Mario_Bravo-900.woff);
}

@font-face {
  font-family: "MB905";
  src: url(Mario_Bravo-905.woff);
}

@font-face {
  font-family: "MB909";
  src: url(Mario_Bravo-909.woff);
}

@font-face {
  font-family: "MB950";
  src: url(Mario_Bravo-950.woff);
}

@font-face {
  font-family: "MB955";
  src: url(Mario_Bravo-955.woff);
}

@font-face {
  font-family: "MB959";
  src: url(Mario_Bravo-959.woff);
}

@font-face {
  font-family: "MB990";
  src: url(Mario_Bravo-990.woff);
}

@font-face {
  font-family: "MB995";
  src: url(Mario_Bravo-995.woff);
}

@font-face {
  font-family: "MB999";
  src: url(Mario_Bravo-999.woff);
}


@font-face {
  font-family: "Jasminorum-Bold";
  src: url(Jasminorum-Bold.woff);
}

@font-face {
  font-family: "Arcade";
  src: url(Arcade.woff);
}

@font-face {
  font-family: "Banditod";
  src: url(Banditod.woff);
}

@font-face {
  font-family: "Beacons_Bricks";
  src: url(Beacons_Bricks.woff);
}

@font-face {
  font-family: "Cosserat";
  src: url(Cosserat.woff);
}

@font-face {
  font-family: "DiapoMono-Regular";
  src: url(DiapoMono-Regular.woff);
}

@font-face {
  font-family: "Digital_Copist";
  src: url(Digital_Copist.woff);
}

@font-face {
  font-family: "Dirac";
  src: url(Dirac.woff);
}

@font-face {
  font-family: "Kurilian-dot";
  src: url(Kurilian-dot.woff);
}

@font-face {
  font-family: "Kurilian-hollow-nailed";
  src: url(Kurilian-hollow-nailed.woff);
}

@font-face {
  font-family: "Kurilian-line";
  src: url(Kurilian-line.woff);
}

@font-face {
  font-family: "Kurilian-line-hollow-nailed";
  src: url(Kurilian-line-hollow-nailed.woff);
}

@font-face {
  font-family: "Kurilian-nailed";
  src: url(Kurilian-nailed.woff);
}

@font-face {
  font-family: "Kurilian-unnailed";
  src: url(Kurilian-unnailed.woff);
}

@font-face {
  font-family: "Old-Fashioned";
  src: url(Old.Fashioned.woff);
}

@font-face {
  font-family: "Resonance-Bold";
  src: url(Resonance-Bold.woff);
}

@font-face {
  font-family: "Kaesio";
  src: url(Kaesio.woff);
}

@font-face {
  font-family: "Jasminorum-Regular";
  src: url(Jasminorum-Regular.woff);
}

@font-face {
  font-family: "Resonance-Regular";
  src: url(Resonance-Regular.woff);
}

@font-face {
  font-family: "Fornax-Regular";
  src: url(Fornax-Regular.woff);
}

@font-face {
  font-family: "Fornax-Old-Face";
  src: url(Fornax-Old-Face.woff);
}

@font-face {
  font-family: "Jasminorum-Monospace";
  src: url(Jasminorum-Mono-Regular.woff);
}

@font-face {
  font-family: "Jasminorum-Italic";
  src: url(Jasminorum-Regular-Italic.woff);
}

body {
  margin: 0;
  background-color: #e2e2e2;
  margin: 0;

}

* {
  box-sizing: border-box;

}

.container {
  display: block;
  height: 100%;
  width: 100%;
}

p::selection {
  background-color: #E01F00;
}

#gauche {

  cursor: col-resize;
  position: fixed;
  height: 100%;
  width: 35%;
  text-align: right;
  z-index: 4;
  background-color: #21231E;
  padding: 5% 0 0% 0;
  border: #21231E solid 1px;
}



#contGauche {
  user-select: none;
  text-align: left;
  margin: 0% 0% 0% 2%;
  background-color: #e2e2e2;
  padding-left: 2em;
  padding-right: 2em;
  height: 80%;
  overflow: scroll;
  scrollbar-width: none;
}

#copyrights {

  user-select: none;
  margin: 0% 1% 0% 1%;
  width: 250px;
  bottom: 10px;
  left: 0;
  position: fixed;
}


#menu a {
  user-select: none;
  text-decoration: none;
  color: #21231E;
  font-size: 1.2em;
  background: linear-gradient(0deg, #821FE0, #821FE0) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 150ms;
  --bg-h: 100%;
  text-overflow: ellipsis;
}

#certes {

  user-select: none;
  font-family: neiges;
  text-decoration: none;
  font-size: 1.5em;
  color: #E01F00;
  background: linear-gradient(0deg, #821FE0, #821FE0) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 150ms;
  --bg-h: 100%;
}

#gauche a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  color: #e2e2e2;
}




#menu {
  font-family: neiges;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #21231E;
}

#text {
  font-family: Jasminorum-Regular;
  font-size: 1em;
  font-variant-ligatures: discretionary-ligatures;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #text {
    font-size: 0.8em;
  }
}




#droite {
  user-select: none;
  height: 100%;
  width: 100%;
  z-index: 2;
  right: 0;
  position: relative;
  overflow-y: scroll;
  scrollbar-width: none;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 50px 2% 50px 25%;
  text-decoration: none;
  text-align: right;
  display: grid;
  float: right;
}


.d1 {
  margin: 0;
  animation: fondu 140s ease-in-out infinite both;
  overflow: hidden;
}

.conteneur {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
}

.d2 {
  padding-top: 1080px;
  animation: fondu 140s ease-in-out infinite both;
  overflow: hidden;
}

@keyframes fondu {
  0% {
    background: url("prod-mahjong.png") center fixed;
    background-size: cover;
  }

  4.3% {
    background: url("prod-chichirgee.png") center fixed;
    background-size: cover;
  }

  8.7% {
    background: url("prod-chichirgee.png") center fixed;
    background-size: cover;
  }

  13.0% {
    background: url("prod-fragments.png") center fixed;
    background-size: cover;
  }

  17.4% {
    background: url("prod-fragments.png") center fixed;
    background-size: cover;
  }

  21.7% {
    background: url("prod-universquantique.png") center fixed;
    background-size: cover;
  }

  26.1% {
    background: url("prod-universquantique.png") center fixed;
    background-size: cover;
  }

  30.4% {
    background: url("prod-reliquia.png") center fixed;
    background-size: cover;
  }

  34.8% {
    background: url("prod-reliquia.png") center fixed;
    background-size: cover;
  }

  39.1% {
    background: url("prod-newprovidence.png") center fixed;
    background-size: cover;
  }

  43.5% {
    background: url("prod-newprovidence.png") center fixed;
    background-size: cover;
  }

  47.8% {
    background: url("prod-horizons.png") center fixed;
    background-size: cover;
  }

  52.2% {
    background: url("prod-horizons.png") center fixed;
    background-size: cover;
  }

  56.2% {
    background: url("prod-cityspirituous.png") center fixed;
    background-size: cover;
  }

  60.8% {
    background: url("prod-cityspirituous.png") center fixed;
    background-size: cover;
  }

  65.2% {
    background: url("prod-justiceisblind.png") center fixed;
    background-size: cover;
  }

  69.5% {
    background: url("prod-justiceisblind.png") center fixed;
    background-size: cover;
  }

  73.9% {
    background: url("prod-chiripa.png") center fixed;
    background-size: cover;
  }

  78.2% {
    background: url("prod-chiripa.png") center fixed;
    background-size: cover;
  }

  82.6% {
    background: url("prod-divers.png") center fixed;
    background-size: cover;
  }

  86.9% {
    background: url("prod-divers.png") center fixed;
    background-size: cover;
  }

  91.3% {
    background: url("prod-massalia.png") center fixed;
    background-size: cover;
  }

  95.6% {
    background: url("prod-massalia.png") center fixed;
    background-size: cover;
  }

  100% {
    background: url("prod-mahjong.png") center fixed;
    background-size: cover;
  }
}

#droite img {
  width: 100%;
  float: right;
  margin-bottom: 50px;
}

#droite video {
  width: 100%;
  float: right;
  margin-bottom: 50px;
}

#droite a {
  text-decoration: none;
}

.paroles {
  caret-color: #E01F00;
  text-overflow: clip;
  overflow: hidden;
}



.noms {
  font-family: Jasminorum-Monospace;
  color: #21231E;
  font-size: 1.5rem;
  padding: 0;
  margin: 2% 0 1% 0;
  background: linear-gradient(0deg, #821FE0, #821FE0) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 150ms;
  --bg-h: 100%;
}

.noms:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  color: #e2e2e2;
}



[contenteditable="true"]:active,
[contenteditable="true"]:focus {
  border: none;
  outline: none;
}



.rangers {
  display: inline-block;
  font-family: Jasminorum-Italic;
  color: #E01F00;
  font-size: 1em;
  text-align: right;
  margin: 0;
  position: sticky;
}

.range {
  background: transparent;
  cursor: pointer;
  width: 10rem;
  margin: 0 0rem 0 1rem;
  transform: translateY(7px);
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #E01F00;
  height: 0.1rem;
}

input[type="range"]::-moz-range-track {
  background: #E01F00;
  height: 0.1rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #e2e2e2;
  border-radius: 15px;
  background-color: #E01F00;
  height: 0.5rem;
  width: 0.5rem;
  transform: translateY(-50%);
}

input[type="range"]::-moz-range-thumb {
  border: 0.3rem solid #e2e2e2;
  border-radius: 15px;
  background-color: #E01F00;
  height: 0.51rem;
  width: 0.5rem;
}






select {
  margin: 0rem 1rem 0 0.2rem;
  font-family: Jasminorum-Italic;
  color: #E01F00;
  font-size: 1em;
  background-color: #e2e2e2;
  border: none;
  cursor: pointer;
}

option {
  font-family: Jasminorum-Italic;
}





#fNE {
  font-family: neiges;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fNE {
    font-size: 2em;
  }
}

#fMB {
  font-family: MB355;
  font-size: 5em;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fMB {
    font-size: 2em;
  }
}

#fJ {
  font-family: Jasminorum-Regular;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fJ {
    font-size: 2em;
  }
}

#fR {
  font-family: Resonance-Regular;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fR {
    font-size: 2em;
  }
}

#fD {
  font-family: Dirac;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fD {
    font-size: 2em;
  }
}

#fF {
  font-family: Fornax-Regular;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fF {
    font-size: 2em;
  }
}

#fK {
  font-family: Kurilian-hollow-nailed;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fK {
    font-size: 2em;
  }
}

#fDM {
  font-family: DiapoMono-Regular;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fDM {
    font-size: 2em;
  }
}

#fB {
  font-family: Beacons_Bricks;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fB {
    font-size: 2em;
  }
}

#fA {
  font-family: Arcade;
  font-size: 5em;
  margin-bottom: 5rem;
  margin-top: 0;
  color: #21231E;
}

@media screen and (max-width: 800px) {
  #fA {
    font-size: 2em;
  }
}



#cv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2%;
  font-family: Jasminorum-Monospace;

}

@media screen and (max-width: 800px) {
  #cv {
    display: block;
  }
}



#cv p {
  margin: 0;
  color: #e2e2e2;
  background-color: #21231E;
}

#formations {
  grid-column: 1;
}

#expériences {
  grid-column: 2;
}

#compétences {
  grid-column: 3;
}



.left {
  color: #E01F00;
  text-align: left;
}

.middle {
  color: #21231E;
  text-align: center;
}

.right {
  color: #21231E;
  text-align: right;
}




form {
  padding-right: 5%;
  padding-left: 20%;
  margin-bottom: 50px;
}

.input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.input-box input,
.input-box textarea {
  height: 100%;
  width: 100%;
  border: solid 1px #21231E;
  outline: none;
  overflow-wrap: break-word;
  font-family: Jasminorum-Regular;
  font-size: 15px;
  color: #21231E;
  caret-color: #E01F00;
  background: #e2e2e2;
  padding: 0 15px;
  resize: none;
}

.input-box input::selection {
  background-color: #E01F00;
}

.input-box textarea::selection {
  background-color: #E01F00;
}

.message-box {
  min-height: 110px;
}

.input-box textarea {
  padding-top: 6px;
}

.button {
  padding: 0;
  display: inline-block;
  margin-top: 12px;
  border: none;
  background-color: #e2e2e2;
}

.button input[type="submit"] {
  font-family: Jasminorum-Monospace;
  color: #e2e2e2;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  background: #21231E;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="submit"]:hover {
  background: #821FE0;
}


.linkedin {
  padding-left: 20%;
  text-align: center;
  font-family: Jasminorum-Monospace;
  margin-bottom: 50px;
  color: #E01F00;
}

.instagram {
  padding-left: 20%;
  text-align: center;
  font-family: Jasminorum-Monospace;
  color: #E01F00;
}

.linkedin a {
  text-decoration: none;
  color: #21231E;
  background: linear-gradient(0deg, #821FE0, #821FE0) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 150ms;
  --bg-h: 100%;
}

.linkedin a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  color: #e2e2e2;
}

.instagram a {
  text-decoration: none;
  color: #21231E;
  background: linear-gradient(0deg, #821FE0, #821FE0) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 150ms;
  --bg-h: 100%;
}

.instagram a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
  color: #e2e2e2;
}





table {
  border-collapse: collapse;
  text-align: center;
  vertical-align: middle;
  width: auto;
  margin-bottom: -1px;
}

.tMB {
  font-family: MB355;
  font-size: 2em;
  border: 1px solid #821FE0;
}

@media screen and (max-width: 800px) {
  .tMB {
    font-size: 1em;
  }
}

.tNE {
  font-family: neiges;
  font-size: 2em;
  border: 1px solid #1fe082;
}

@media screen and (max-width: 800px) {
  .tNE {
    font-size: 1em;
  }
}

.tJ {
  font-family: Jasminorum-Regular;
  font-size: 2em;
  border: 1px solid #e0e000;
}

@media screen and (max-width: 800px) {
  .tJ {
    font-size: 1em;
  }
}

.tR {
  font-family: Resonance-Regular;
  font-size: 2em;
  border: 1px solid #1fe082;
}

@media screen and (max-width: 800px) {
  .tR {
    font-size: 1em;
  }
}

.tD {
  font-family: Dirac;
  font-size: 2em;
  border: 1px solid #821FE0;
}

@media screen and (max-width: 800px) {
  .tD {
    font-size: 1em;
  }
}

.tF {
  font-family: Fornax-Regular;
  font-size: 2em;
  border: 1px solid #e0e000;
}

@media screen and (max-width: 800px) {
  .tF {
    font-size: 1em;
  }
}

.tK {
  font-family: Kurilian-Hollow-nailed;
  font-size: 2em;
  border: 1px solid #821FE0;
}

@media screen and (max-width: 800px) {
  .tK {
    font-size: 1em;
  }
}


td {
  padding: 10px;
  width: 10%;
}

@media screen and (max-width: 800px) {
  td {
    padding: 5px;
  }
}