.header{
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 	padding:0px; 
	margin:0px;
	position: relative;
  background: linear-gradient(9deg, #111, #848484);

}

.title-header{
  font-size: 100px;
  color: white;
  text-align: center;
}

.title-big-header{
  font-size: 84px;
  color: white;
  text-align: center;
}

svg {
  width: 256px;
  height: 256px;
}

/* SMOKE */
#smoke-1 {
  stroke-dasharray: 0, 10;
  animation: smoke 6s ease infinite;
}

#smoke-2 {
  stroke-dasharray: 0, 10;
  animation: smoke 6s 0.5s ease infinite;
}

@keyframes smoke {
  0% { stroke-dasharray: 0, 10; }
  50% { stroke-dasharray: 10, 0; }
  100% { stroke-dasharray: 10, 0; opacity: 0; }
}

/* WRITING */
#line-1 {
  opacity: 0;
  animation: writing 0.5s linear forwards;
}

#line-2 {
  opacity: 0;
  animation: writing 0.5s 1s linear forwards;
}

#line-3 {
  opacity: 0;
  animation: writing 0.5s 1.5s linear forwards;
}

#line-4 {
  opacity: 0;
  animation: writing 0.5s 2s linear forwards;
}

@keyframes writing {
  0% { width: 0px; opacity: 1;}
  100% { width: 14px; opacity: 1;}
}


.title {
  font-size: 2.2em;
  line-height: 1.1em;
  font-weight: bold;
  color: #333;
  position: relative;
  top:-.92em;
  text-shadow:1px 0px 0px rgba(0,0,0,.6)
}

/* FOOTER BODY */

.footer-body{
	display: flex;;
  width: 100%;
  background-color: #ebe7e7;
  line-height: 1.3;
  font-family: Hack, sans-serif;

}

.column .f-body{
	color: slategray;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 hsla(0, 0%, 100%, 0.4);
}

.column .f-body:hover {
  box-shadow: inset 0 -1.2em 0 hsla(0, 0%, 100%, 0.4);
}

.f-body{
	color: #3e3e3e;
}

/* BOUTON */ 

.round-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: whitesmoke;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.round-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none;
}

.round-button:hover {
  transform: scale(0.95);
}

.round-button:hover::before {
  opacity: 1;
  transform: scale(1.2);
}