body {
  background: rgb(43,28,64);
  background: -moz-radial-gradient(circle, rgba(43,28,64,1) 0%, rgba(86,40,255,1) 45%, rgba(191,60,246,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(43,28,64,1) 0%, rgba(86,40,255,1) 45%, rgba(191,60,246,1) 100%);
  background: radial-gradient(circle, rgba(43,28,64,1) 0%, rgba(86,40,255,1) 45%, rgba(191,60,246,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2b1c40",endColorstr="#bf3cf6",GradientType=1); 
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  overflow: hidden;
  display: flex;
  margin: 0 auto;
  font-family: "Covenant";
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  perspective: 600px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 2s;
  -webkit-transition: opacity 2s; /* Safari */
}

::-moz-selection { /* Code for Firefox */
  color: #ffffff;
  background: #5D2973;
  font-family: Arial, Helvetica, sans-serif;
}

::selection {
  color: #ffffff;
  background: #5D2973;
  font-family: Arial, Helvetica, sans-serif;
}

#canv {
  position: fixed;
  top: 0;
  left: 0;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

/* TEXTE DEFILE */

.container {
  overflow: hidden;
  display: flex;
  /* Fonctionne avec toutes les tailles */
  width: 100%;
  position: absolute;
  top: 95%;
  transform: translateY(-50%);
  /* pour rotate on enlève le translate et on rajoute le rotate */
  /* transform:  rotate(90deg); */
}

.container-hex {
  position: relative;
			overflow: hidden;
			height: 100vh;
			animation: animate 4s linear infinite;
}

.txt {
  white-space: nowrap;
  font-size: 20px;
  animation: scrollTxt 15s linear infinite;
  
}

.t1 {
   color: white; 
   animation: .1s shake infinite alternate;
}

.t2 {
  color: #582259; 
  animation: .1s shake infinite alternate;
}

/* .t2 {
   color: blue; 
} */

@keyframes scrollTxt {
  0%{
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0%, 0);
  }
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  line-break: strict;
  font-size: 20px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

@keyframes shake {
  0% { transform: skewX(-1deg); }
  5% { transform: skewX(1deg); }
  10% { transform: skewX(-1deg); }
  15% { transform: skewX(1deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

/* #overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:rgba(0,0,0,0.2); 
} */

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

div {
  transform-style: preserve-3d;
}

.logo {
  width: 100px;
  height: auto;
  position: absolute;
  margin: auto;
  top: -500px;
  left: 0;
  right: 0;
  bottom: 0;
}

.camera.-x {
  -webkit-animation: rotateX 20000ms linear infinite;
  animation: rotateX 20000ms linear infinite;
}

.camera.-y {
  -webkit-animation: rotateY 20000ms linear infinite;
  animation: rotateY 20000ms linear infinite;
}

.camera.-z {
  -webkit-animation: rotateZ 15000ms infinite alternate;
  animation: rotateZ 15000ms infinite alternate;
}

.move {
  -webkit-animation: move 12000ms infinite alternate;
          animation: move 12000ms infinite alternate;
          position: absolute;
          margin: auto;
          top: 30%;
          left: 50%;
          right: 50%;
          bottom: 50%;
}

.star {
  width: 50px;
  height: 50px;
}

.star:hover {
  color: blueviolet;
}

div.star:nth-child(1) {
  transform: translate3d(-252.25px, -43.25px, 143.25px) rotateY(181deg);

}

.star:nth-child(1)::before {
  content: "affv";
  position: absolute;
  -webkit-animation: code 704ms -980ms infinite;
  animation: code 704ms -980ms infinite;
}

.star:nth-child(2) {
  transform: translate3d(-117px, -27.5px, -74.5px) rotateY(133deg);
}

.star:nth-child(2)::before {
  content: "bfvv";
  position: absolute;
  -webkit-animation: code 803ms -97ms infinite;
  animation: code 803ms -97ms infinite;
}

.star:nth-child(3) {
  transform: translate3d(78px, -126.5px, -28.75px) rotateY(33deg);
}

.star:nth-child(3)::before {
  content: "cffgtt";
  position: absolute;
  -webkit-animation: code 892ms -365ms infinite;
  animation: code 892ms -365ms infinite;
}

.star:nth-child(4) {
  transform: translate3d(53.75px, 24px, -67px) rotateY(191deg);
}

.star:nth-child(4)::before {
  content: "dfggg";
  position: absolute;
  -webkit-animation: code 903ms -256ms infinite;
  animation: code 903ms -256ms infinite;
}

.star:nth-child(5) {
  transform: translate3d(74.5px, -122.5px, -194px) rotateY(60deg);
}

.star:nth-child(5)::before {
  content: "etggt";
  position: absolute;
  -webkit-animation: code 558ms -474ms infinite;
  animation: code 558ms -474ms infinite;
}

.star:nth-child(6) {
  transform: translate3d(-0.5px, 77.5px, 155.25px) rotateY(165deg);
}

.star:nth-child(6)::before {
  content: "fefewf";
  position: absolute;
  -webkit-animation: code 935ms -766ms infinite;
  animation: code 935ms -766ms infinite;
}

.star:nth-child(7) {
  transform: translate3d(114px, -163.5px, 298px) rotateY(265deg);
}

.star:nth-child(7)::before {
  content: "fqweqwe";
  position: absolute;
  -webkit-animation: code 531ms -979ms infinite;
  animation: code 531ms -979ms infinite;
}

.star:nth-child(8) {
  transform: translate3d(-212.25px, 14.25px, 42.75px) rotateY(327deg);
}

.star:nth-child(8)::before {
  content: "gqweeff";
  position: absolute;
  -webkit-animation: code 876ms -178ms infinite;
  animation: code 876ms -178ms infinite;
}

.star:nth-child(9) {
  transform: translate3d(-84px, 82px, 15.5px) rotateY(335deg);
}

.star:nth-child(9)::before {
  content: "hqeqwe";
  position: absolute;
  -webkit-animation: code 943ms -453ms infinite;
  animation: code 943ms -453ms infinite;
}

.star:nth-child(10) {
  transform: translate3d(-7.75px, -55.25px, -56.75px) rotateY(206deg);
}

.star:nth-child(10)::before {
  content: "bgbbi";
  position: absolute;
  -webkit-animation: code 668ms -13ms infinite;
  animation: code 668ms -13ms infinite;
}

.star:nth-child(11) {
  transform: translate3d(-29px, 336.75px, 75.5px) rotateY(351deg);
}

.star:nth-child(11)::before {
  content: "jtrht";
  position: absolute;
  -webkit-animation: code 654ms -653ms infinite;
  animation: code 654ms -653ms infinite;
}

.star:nth-child(12) {
  transform: translate3d(155.25px, -93.75px, 21px) rotateY(175deg);
}

.star:nth-child(12)::before {
  content: "kgrzjuj";
  position: absolute;
  -webkit-animation: code 823ms -199ms infinite;
  animation: code 823ms -199ms infinite;
}

.star:nth-child(13) {
  transform: translate3d(86.5px, 237.25px, 184px) rotateY(287deg);
}

.star:nth-child(13)::before {
  content: "ltzjuk";
  position: absolute;
  -webkit-animation: code 951ms -189ms infinite;
  animation: code 951ms -189ms infinite;
}

.star:nth-child(14) {
  transform: translate3d(-50.5px, 9.5px, -106.75px) rotateY(269deg);
}

.star:nth-child(14)::before {
  content: "mukuiup";
  position: absolute;
  -webkit-animation: code 946ms -397ms infinite;
  animation: code 946ms -397ms infinite;
}

.star:nth-child(15) {
  transform: translate3d(-28.75px, -178.75px, 81.25px) rotateY(147deg);
}

.star:nth-child(15)::before {
  content: "nadcsrgj";
  position: absolute;
  -webkit-animation: code 724ms -147ms infinite;
  animation: code 724ms -147ms infinite;
}

.star:nth-child(16) {
  transform: translate3d(120.25px, -223px, -104.75px) rotateY(277deg);
}

.star:nth-child(16)::before {
  content: "ouzkzip";
  position: absolute;
  -webkit-animation: code 708ms -528ms infinite;
  animation: code 708ms -528ms infinite;
}

.star:nth-child(17) {
  transform: translate3d(270px, 184px, -57.75px) rotateY(66deg);
}

.star:nth-child(17)::before {
  content: "pukzip";
  position: absolute;
  -webkit-animation: code 657ms -616ms infinite;
  animation: code 657ms -616ms infinite;
}

.star:nth-child(18) {
  transform: translate3d(-21.5px, -107.25px, 232px) rotateY(327deg);
}

.star:nth-child(18)::before {
  content: "qdvxcbn";
  position: absolute;
  -webkit-animation: code 955ms -885ms infinite;
  animation: code 955ms -885ms infinite;
}

.star:nth-child(19) {
  transform: translate3d(-184.25px, 170.5px, 119.75px) rotateY(238deg);
}

.star:nth-child(19)::before {
  content: "rjzujuj";
  position: absolute;
  -webkit-animation: code 507ms -154ms infinite;
  animation: code 507ms -154ms infinite;
}

.star:nth-child(20) {
  transform: translate3d(185.75px, 16.5px, 67.75px) rotateY(131deg);
}

.star:nth-child(20)::before {
  content: "sycasdfd";
  position: absolute;
  -webkit-animation: code 922ms -429ms infinite;
  animation: code 922ms -429ms infinite;
}

.star:nth-child(21) {
  transform: translate3d(102px, 47.25px, 35px) rotateY(81deg);
}

.star:nth-child(21)::before {
  content: "tuilouz";
  position: absolute;
  -webkit-animation: code 779ms -858ms infinite;
  animation: code 779ms -858ms infinite;
}

.star:nth-child(22) {
  transform: translate3d(-218.5px, 221.5px, 315.75px) rotateY(118deg);
}

.star:nth-child(22)::before {
  content: "uweffff";
  position: absolute;
  -webkit-animation: code 927ms -327ms infinite;
  animation: code 927ms -327ms infinite;
}

.star:nth-child(23) {
  transform: translate3d(29.25px, 196.25px, 62.25px) rotateY(139deg);
}

.star:nth-child(23)::before {
  content: "v";
  position: absolute;
  -webkit-animation: code 615ms -75ms infinite;
  animation: code 615ms -75ms infinite;
}

.star:nth-child(24) {
  transform: translate3d(40.5px, 147.5px, -220.5px) rotateY(181deg);
}

.star:nth-child(24)::before {
  content: "w";
  position: absolute;
  -webkit-animation: code 759ms -257ms infinite;
  animation: code 759ms -257ms infinite;
}

.star:nth-child(25) {
  transform: translate3d(137.5px, 74.75px, 30px) rotateY(113deg);
  background-image: url("https://cssversicherung.scene7.com/is/image/csskrankenversicherung/css-logo-schutzzone-large:image-16-9?wid=1600&fit=constrain,0&resMode=sharp2");
}

.star:nth-child(25)::before {
  content: "x";
  position: absolute;
  -webkit-animation: code 822ms -116ms infinite;
  animation: code 822ms -116ms infinite;
}

.star:nth-child(26) {
  transform: translate3d(68.75px, 401px, -133px) rotateY(105deg);
}

.star:nth-child(26)::before {
  content: "y";
  position: absolute;
  -webkit-animation: code 819ms -499ms infinite;
  animation: code 819ms -499ms infinite;
}

.star:nth-child(27) {
  transform: translate3d(-132px, -70.75px, 305.75px) rotateY(318deg);
}

.star:nth-child(27)::before {
  content: "z";
  position: absolute;
  -webkit-animation: code 579ms -188ms infinite;
  animation: code 579ms -188ms infinite;
}

@-webkit-keyframes move {
  0% {
    transform: translateZ(-200px);
  }

  100% {
    transform: translateZ(200px);
  }
}

@keyframes move {
  0% {
    transform: translateZ(-200px);
  }

  100% {
    transform: translateZ(200px);
  }
}

@-webkit-keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateZ {
  0% {
    transform: rotateZ(45deg);
  }

  100% {
    transform: rotateZ(-45deg);
  }
}

@keyframes rotateZ {
  0% {
    transform: rotateZ(45deg);
  }

  100% {
    transform: rotateZ(-45deg);
  }
}

@-webkit-keyframes code {
  0% {
    content: "z";
  }

  50% {
    content: "h";
  }
}

@keyframes code {
  0% {
    content: "r";
  }

  50% {
    content: "u";
  }
}