/*SCROLLBAR*/
/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(50, 50, 50) rgb(205, 205, 205);
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }
  
  *::-webkit-scrollbar-track {
    background: rgb(205, 205, 205);
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: rgb(50, 50, 50);
  }
/*SCROLLBAR*/

p{
    background-color: rgba(0, 0, 0, 0.062);
    border-radius: 10px;
    padding: 2%;
}

.carousel-item img{
    border-radius: 20px;
}

@import url("https://fonts.googleapis.com/css?family=Saira+Extra+Condensed");
*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
    font-family: 'Hey-Comic';
    src: url('fonts/Hey-Comic.woff2') format('woff2'),
        url('fonts/Hey-Comic.ttf') format('truetype');
}

body {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
	letter-spacing: 1px;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-size: cover;
  background-position: center center;
}

header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) -10%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  font-size: 1.25rem;
}

#navbar{
	margin-left: -5rem;
    list-style: none;
    display: flex;
    justify-content: center;
	align-items: center;
}

#navbar li{
    padding: 2rem 4% 0 4%;
	letter-spacing: 1px;
}

#navbar li a{
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
}

#navbar li a:hover{
    /*color: rgb(0, 156, 223);
    transition: 0.5s;*/
	color: rgb(0, 129, 184);
    text-decoration: none;
	transition: 0.2s;
}

#navbar li a:active{
    color: rgb(0, 84, 120);
    text-decoration: none;
	transition: 0.1s;
}

#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navbar a {
  position: relative;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 1px;
  background-color: rgb(0, 156, 223);
  transition: transform 250ms;
}

#navbar a:hover::after {
  transform: translateX(-50%) scaleX(1);
}


/*anim apparition*/
.vignets {
    
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari et Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*anim apparition*/


body{
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('gif/atome.gif');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    width: 100%;
    height: 115vh;
}

.contenu{
  margin-top: 20%;
  margin-left: 15%;
  margin-right: 15%;
  animation: slide-in 0.5s ease-out;
  text-align: justify;
}

@keyframes slide-in{
	from{
		opacity: 0;
		transform: translateX(-50px);
	}
	to{
		opacity: 1;
		transform: translateX(0px);
	}
}

p, .contenu h5{
  margin-left: 3%;
}

.contenu p{
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 5%;
}

#basdepage{
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2%;
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #292929;
  color: white;
  list-style-type: none;
}

#precsuiv{
	padding: 5%;
	text-align: center;
	margin-bottom: 5%;
}

/*GLITCH*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:100');
 html, body, h1 {
	 padding: 0;
	 margin: 0;
	 font-family: Helvetica, Arial, sans-serif;
}
 #app {
	 height: 100%;
	 width: 100%;
   	 margin-top: -12%;
	 padding: 0;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 z-index: 1;
}
 #wrapper {
	 text-align: center;
}
 .sub {
	 color: #64dcdc;
	 letter-spacing: 1em;
}
/* Our mixin positions a copy of our text directly on our existing text, while also setting content to the appropriate text set in the data-text attribute. */
 .glitch {
	 position: relative;
	 color: white;
	 font-size: 4em;
	 letter-spacing: 0.5em;
	/* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
	 animation: glitch-skew 1s infinite linear alternate-reverse;
}
 .glitch::before {
	 content: attr(data-text);
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 left: 2px;
	 text-shadow: -2px 0 #ff00c1;
	/* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
	 clip: rect(44px, 450px, 56px, 0);
	/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
	 animation: glitch-anim 5s infinite linear alternate-reverse;
}
 .glitch::after {
	 content: attr(data-text);
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 left: -2px;
	 text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
	 animation: glitch-anim2 1s infinite linear alternate-reverse;
}
/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch.*/
 @keyframes glitch-anim {
	 0% {
		 clip: rect(4px, 9999px, 93px, 0);
		 transform: skew(0.75deg);
	}
	 5% {
		 clip: rect(50px, 9999px, 93px, 0);
		 transform: skew(0.83deg);
	}
	 10% {
		 clip: rect(3px, 9999px, 12px, 0);
		 transform: skew(0.8deg);
	}
	 15% {
		 clip: rect(99px, 9999px, 77px, 0);
		 transform: skew(0.07deg);
	}
	 20% {
		 clip: rect(46px, 9999px, 30px, 0);
		 transform: skew(0.43deg);
	}
	 25% {
		 clip: rect(52px, 9999px, 89px, 0);
		 transform: skew(0.32deg);
	}
	 30% {
		 clip: rect(59px, 9999px, 54px, 0);
		 transform: skew(0.57deg);
	}
	 35% {
		 clip: rect(78px, 9999px, 7px, 0);
		 transform: skew(0.3deg);
	}
	 40% {
		 clip: rect(37px, 9999px, 76px, 0);
		 transform: skew(0.16deg);
	}
	 45% {
		 clip: rect(87px, 9999px, 28px, 0);
		 transform: skew(0.55deg);
	}
	 50% {
		 clip: rect(56px, 9999px, 36px, 0);
		 transform: skew(0.56deg);
	}
	 55% {
		 clip: rect(32px, 9999px, 78px, 0);
		 transform: skew(0.07deg);
	}
	 60% {
		 clip: rect(46px, 9999px, 90px, 0);
		 transform: skew(0.3deg);
	}
	 65% {
		 clip: rect(6px, 9999px, 16px, 0);
		 transform: skew(0.05deg);
	}
	 70% {
		 clip: rect(96px, 9999px, 6px, 0);
		 transform: skew(0.55deg);
	}
	 75% {
		 clip: rect(62px, 9999px, 84px, 0);
		 transform: skew(0.24deg);
	}
	 80% {
		 clip: rect(75px, 9999px, 56px, 0);
		 transform: skew(0.04deg);
	}
	 85% {
		 clip: rect(36px, 9999px, 42px, 0);
		 transform: skew(0.37deg);
	}
	 90% {
		 clip: rect(76px, 9999px, 68px, 0);
		 transform: skew(0.55deg);
	}
	 95% {
		 clip: rect(40px, 9999px, 46px, 0);
		 transform: skew(0.18deg);
	}
	 100% {
		 clip: rect(7px, 9999px, 4px, 0);
		 transform: skew(0.77deg);
	}
}
 @keyframes glitch-anim2 {
	 0% {
		 clip: rect(64px, 9999px, 66px, 0);
		 transform: skew(0.53deg);
	}
	 5% {
		 clip: rect(37px, 9999px, 19px, 0);
		 transform: skew(0.93deg);
	}
	 10% {
		 clip: rect(55px, 9999px, 31px, 0);
		 transform: skew(0.24deg);
	}
	 15% {
		 clip: rect(82px, 9999px, 43px, 0);
		 transform: skew(0.96deg);
	}
	 20% {
		 clip: rect(84px, 9999px, 64px, 0);
		 transform: skew(0.89deg);
	}
	 25% {
		 clip: rect(61px, 9999px, 15px, 0);
		 transform: skew(0.48deg);
	}
	 30% {
		 clip: rect(3px, 9999px, 97px, 0);
		 transform: skew(0.43deg);
	}
	 35% {
		 clip: rect(71px, 9999px, 76px, 0);
		 transform: skew(0.11deg);
	}
	 40% {
		 clip: rect(97px, 9999px, 71px, 0);
		 transform: skew(0.79deg);
	}
	 45% {
		 clip: rect(51px, 9999px, 37px, 0);
		 transform: skew(0.77deg);
	}
	 50% {
		 clip: rect(8px, 9999px, 67px, 0);
		 transform: skew(0.48deg);
	}
	 55% {
		 clip: rect(7px, 9999px, 54px, 0);
		 transform: skew(0.69deg);
	}
	 60% {
		 clip: rect(41px, 9999px, 48px, 0);
		 transform: skew(0.49deg);
	}
	 65% {
		 clip: rect(59px, 9999px, 68px, 0);
		 transform: skew(0.77deg);
	}
	 70% {
		 clip: rect(81px, 9999px, 16px, 0);
		 transform: skew(0.08deg);
	}
	 75% {
		 clip: rect(83px, 9999px, 31px, 0);
		 transform: skew(0.54deg);
	}
	 80% {
		 clip: rect(66px, 9999px, 42px, 0);
		 transform: skew(0.22deg);
	}
	 85% {
		 clip: rect(40px, 9999px, 21px, 0);
		 transform: skew(0.12deg);
	}
	 90% {
		 clip: rect(7px, 9999px, 10px, 0);
		 transform: skew(0.44deg);
	}
	 95% {
		 clip: rect(49px, 9999px, 67px, 0);
		 transform: skew(0.11deg);
	}
	 100% {
		 clip: rect(74px, 9999px, 68px, 0);
		 transform: skew(0.66deg);
	}
}
 @keyframes glitch-skew {
	 0% {
		 transform: skew(4deg);
	}
	 10% {
		 transform: skew(-2deg);
	}
	 20% {
		 transform: skew(2deg);
	}
	 30% {
		 transform: skew(4deg);
	}
	 40% {
		 transform: skew(-2deg);
	}
	 50% {
		 transform: skew(-3deg);
	}
	 60% {
		 transform: skew(4deg);
	}
	 70% {
		 transform: skew(1deg);
	}
	 80% {
		 transform: skew(5deg);
	}
	 90% {
		 transform: skew(4deg);
	}
	 100% {
		 transform: skew(-2deg);
	}
}

/* Responsive Design */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }

  p {
    padding: 5%;
  }

  .carousel-item img {
    width: 100%;
    height: auto;
  }
  
  .glitch {
	font-size: 2em;
	}
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    font-size: 16px;
  }

  p {
    padding: 4%;
  }

  .carousel-item img {
    width: 80%;
    height: auto;
  }

  .glitch {
	font-size: 2em;
	}
}

@media screen and (min-width: 901px) {
  body {
    font-size: 18px;
  }

  p {
    padding: 2%;
  }

  .carousel-item img {
    width: 60%;
    height: auto;
  }
}