body{
	background-color: black;
	font-family: 'Courgette', sans-serif;
}

.underlined-a {
  text-decoration: none;
  color: var(--main-color);
  padding-bottom: 0.15em;
  box-sizing: border-box;
  box-shadow: inset 0 -0.2em 0 aqua;
  transition: 0.2s;
  &:hover {
    color: #222;
    box-shadow: inset 0 -2em 0 aqua;
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
}


.brk-btn {
  position: absolute;
  background: none;
  color: var(--main-color);
  text-transform: uppercase;
  text-decoration: none;
  border: 0.2em solid var(--main-color);
  padding: 0.5em 1em;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #222;
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #222;
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  &:hover {
    &::before {
      right: 80%;
    }
    &::after {
      left: 80%;
    }
  }
}


.images {
	display: flex;
	animation-duration: 20s;
	animation-name: mesImages;
	animation-iteration-count: infinite;
}
.images_car {
	display: flex;
	animation-duration: 20s;
	animation-name: carImages;
	animation-iteration-count: infinite;
}

#caroussel{
	width: 900px;
	overflow: hidden;
	border: épx solid #333;
}
#caroussel_car{
	width: 300px;
	overflow: hidden;
	border: épx solid #333;
}
@keyframes mesImages{
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-900px);
	}
	40% {
		transform: translateX(-1800px);
	}
	60% {
		transform: translateX(-2700px);
	}
	80% {
		transform: translateX(-3600px);
	}
	100% {
		transform: translateX(-4500px);
	}
	

}
@keyframes carImages{
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-300px);
	}
	40% {
		transform: translateX(-600px);
	}
	60% {
		transform: translateX(-900px);
	}
	80% {
		transform: translateX(-1200px);
	}
	100% {
		transform: translateX(-1500px);
	}
	

}