@font-face {
  font-family: 'Covenant';
  src: URL("src/font/Halo\ Covenant.ttf") format('truetype');
}

body {
  font-family: 'Covenant';
  margin: 0;
  opacity: 0;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
  /* Safari */
}

html {
  background-color: #331B8C;
  text-align: center;
  overflow: hidden;
}

main {
  width: 100%;
  height: 100%;
}

.texture {
  overflow: hidden;
  color: #582259;
}

#main-content {
  width: 100%;
  height: 70%;
  position: fixed;
  /*Can also be `fixed`*/
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  margin: auto;
  /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.blink_me {
  font-size: 1.5em;
  margin-top: 50px;
  color: #4A2ABF;
  animation: blinker 0.5s linear infinite;
  transition: transform 1s;
  /* bring your own prefixes */
  /*transform: translate(-50%, -50%);*/
}

.blink_me:hover {
  transform-style: flat;
  transform: rotateY(45deg) rotateX(90deg);
}

.logo {
  margin-top: 4vh;
  width: 150px;
  height: 105px;
  animation: blinker 3s linear infinite;
  transition: transform 2s;
}

.logo:hover {
  cursor: pointer;
}

.flash {
  animation: blinker 2s linear infinite;
  transition: transform 2s;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* TEXTE DEFILE VERTICAL */

.container {
  overflow: hidden;
  display: flex;
  /* Fonctionne avec toutes les tailles */
  width: 100%;
  position: absolute;
  top: 50%;
  /* transform: translateX(-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: #4A2ABF; 
}

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

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

/* TEXT CIRCLE */

svg {
  fill: #4A2ABF;
  height: auto;
  max-width: 66vmin;
  transform-origin: center;
  transition: transform 3s;
  width: 66%;
}

svg:hover {
  transform: rotateY(360deg) rotateX(0deg);
  fill: white;
}


/* MENU FULLSCREEN */

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(43, 28, 64);
  background-color: rgba(43, 28, 64, 1);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #4A2ABF;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

#menuSpan {
  background-image: url('src/img/covenant.png');
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: 30px;
  position: fixed;
  display: inline-block;
  top: 40px;
  right: 55px;
  transition: 0.5s;
  cursor: pointer;
  z-index: 1000000;
}

#menuSpan:hover {
  transform-style: flat;
  transform: rotateX(45deg) rotateY(45deg);
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* unvisited link */
 a:link {
	 color: #fff;
	 text-decoration: none;
}
/* visited link */
 a:visited {
	 color: #fff;
	 text-decoration: none;
}
/* mouse over link */
 a:hover {
	 color: #ff00f0;
	 text-decoration: none;
}
/* selected link */
 a:active {
	 color: #4242e6;
	 text-decoration: none;
}
 .center {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 100%;
	 width: 100%;
}
 h1 {
	 display: block;
	 font-size: 3em;
	 margin: 0.6em 0;
	 font-weight: bold;
}
 .glitch {
	 position: relative;
	 margin: 0 auto;
	 background: #4242e6;
}
 .glitch::before, .glitch::after {
	 animation-iteration-count: infinite;
	 animation-timing-function: linear;
	 animation-direction: alternate-reverse;
	 overflow: hidden;
	 position: absolute;
	 top: 0;
	 clip: rect(0, 900px, 0, 0);
	 content: attr(data-text);
}
 .glitch::after {
	 animation-name: glitch-animation;
	 animation-duration: 4s;
	 left: 4px;
	 text-shadow: -1px 0 #ffa800;
	 background: #4242e6;
}
 .glitch::before {
	 animation-name: glitch-animation-2;
	 animation-duration: 6s;
	 left: -4px;
	 text-shadow: 1px 0 #00d8ff;
	 background: #4242e6;
}
/* Expanded Animations */
 @keyframes glitch-animation {
	 0% {
		 clip: rect(42px, 9999px, 44px, 0);
	}
	 5% {
		 clip: rect(12px, 9999px, 59px, 0);
	}
	 10% {
		 clip: rect(48px, 9999px, 29px, 0);
	}
	 15% {
		 clip: rect(42px, 9999px, 73px, 0);
	}
	 20% {
		 clip: rect(63px, 9999px, 27px, 0);
	}
	 25% {
		 clip: rect(34px, 9999px, 55px, 0);
	}
	 30% {
		 clip: rect(86px, 9999px, 73px, 0);
	}
	 35% {
		 clip: rect(20px, 9999px, 20px, 0);
	}
	 40% {
		 clip: rect(26px, 9999px, 60px, 0);
	}
	 45% {
		 clip: rect(25px, 9999px, 66px, 0);
	}
	 50% {
		 clip: rect(57px, 9999px, 98px, 0);
	}
	 55% {
		 clip: rect(5px, 9999px, 46px, 0);
	}
	 60% {
		 clip: rect(82px, 9999px, 31px, 0);
	}
	 65% {
		 clip: rect(54px, 9999px, 27px, 0);
	}
	 70% {
		 clip: rect(28px, 9999px, 99px, 0);
	}
	 75% {
		 clip: rect(45px, 9999px, 69px, 0);
	}
	 80% {
		 clip: rect(23px, 9999px, 85px, 0);
	}
	 85% {
		 clip: rect(54px, 9999px, 84px, 0);
	}
	 90% {
		 clip: rect(45px, 9999px, 47px, 0);
	}
	 95% {
		 clip: rect(37px, 9999px, 20px, 0);
	}
	 100% {
		 clip: rect(4px, 9999px, 91px, 0);
	}
}
 @keyframes glitch-animation-2 {
	 0% {
		 clip: rect(65px, 9999px, 100px, 0);
	}
	 5% {
		 clip: rect(52px, 9999px, 74px, 0);
	}
	 10% {
		 clip: rect(79px, 9999px, 85px, 0);
	}
	 15% {
		 clip: rect(75px, 9999px, 5px, 0);
	}
	 20% {
		 clip: rect(67px, 9999px, 61px, 0);
	}
	 25% {
		 clip: rect(14px, 9999px, 79px, 0);
	}
	 30% {
		 clip: rect(1px, 9999px, 66px, 0);
	}
	 35% {
		 clip: rect(86px, 9999px, 30px, 0);
	}
	 40% {
		 clip: rect(23px, 9999px, 98px, 0);
	}
	 45% {
		 clip: rect(85px, 9999px, 72px, 0);
	}
	 50% {
		 clip: rect(71px, 9999px, 75px, 0);
	}
	 55% {
		 clip: rect(2px, 9999px, 48px, 0);
	}
	 60% {
		 clip: rect(30px, 9999px, 16px, 0);
	}
	 65% {
		 clip: rect(59px, 9999px, 50px, 0);
	}
	 70% {
		 clip: rect(41px, 9999px, 62px, 0);
	}
	 75% {
		 clip: rect(2px, 9999px, 82px, 0);
	}
	 80% {
		 clip: rect(47px, 9999px, 73px, 0);
	}
	 85% {
		 clip: rect(3px, 9999px, 27px, 0);
	}
	 90% {
		 clip: rect(26px, 9999px, 55px, 0);
	}
	 95% {
		 clip: rect(42px, 9999px, 97px, 0);
	}
	 100% {
		 clip: rect(38px, 9999px, 49px, 0);
	}
}