*{
	font-family: 'Nunito', Verdana, Tahoma, sans-serif,
}

/*Helvetica, Arial, sans-serif*/


@font-face {
	font-family: 'cakecafe';
	src: url(‘fonts/Cakecafe.woff2’) format(‘woff2’),
		url(‘fonts/Cakecafe.ttf’) format(‘truetype’)
}

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

/*Bouton*/

.bouton{
	margin-top: -40%;
	display: block;
	background-color: #719fee;
	border-radius: 10px;
	border: 4px double #1f69ec;
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	padding: 10px;
	width: 200px;
	cursor: pointer;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.bouton:hover{
	background-color: #ffffff;
	border: 2px solid #1f69ec;
	box-shadow: 10px 5px 5px #719fee;
	color: #1f69ec;
	text-align: center;
	font-size: 22px;
}

/*Bouton*/

.streetaly{
	color: white;
	margin-top: 5%;
	font-family: 'Dancing Script', serif;
	font-size: 9.5vh;
}

/*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{
	padding: 2%;
}

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

body {
  font-family: 'Nunito', 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;
  padding: 0.5rem 0 5rem;
  font-size: 1.25rem;
}

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

#navbar li {
  display: inline-flex;
}

#navbar a {
  position: relative;
  padding: 1rem 0 0.5rem;
  margin: 0 1.5rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}
#navbar 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(182, 55, 43);
  transition: transform 250ms;
}

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

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

/*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('images/back.png');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Nunito', Verdana, Tahoma, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    width: 100%;
    height: 110vh;
}

#navbar{
    list-style: none;
    text-align: center;
    justify-content: center;
    display: flex;
	margin-top: -1%;
}

#navbar li{
    padding: 3%;
	letter-spacing: 1px;
}

#navbar li a{
    color: white;
    font-family: 'Nunito';
    font-size: 85%;
}

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

#navbar li a:active{
    color: rgb(132, 41, 33);
    text-decoration: none;
	transition: 0.1s;
}

.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%;
}

/*anime en scroll

svg {
  position: flex;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

anime en scroll*/

/*GLITCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:100');
 html, body, h1 {
	 padding: 0;
	 margin: 0;
	 font-family: 'Nunito', 'Montserrat', sans-serif;
}
 #app {
	 height: 100vh;
	 width: 100%;
   	 margin-top: -12%;
	 padding: 0;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 background-size: cover;
	 background-position: center;
	 z-index: 1;
}
 #wrapper {
	 text-align: center;
}
 .sub {
	 color: rgb(182, 55, 43);
	 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);
	}
}

/*GLITCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/