.wrapper-name {
  --text-color: #fff;
  position: relative;
}
.wrapper-name a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wrapper-name a:nth-child(1) {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
  clip-path: polygon(0 0, 100% 0, 50% 50%); 
}
.wrapper-name a:nth-child(2) {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
.wrapper-name a:nth-child(3) {
  -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.wrapper-name a:nth-child(4) {
  -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.wrapper-name a:hover {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 2;
}
.wrapper-name a:nth-child(1):hover ~ .fill-text:before {
  --fill-from: circle(0% at 50% 0%);
  --fill-to: circle(150% at 0% 50%);
  -webkit-animation: fill-text 3s forwards;
          animation: fill-text 3s forwards;
}
.wrapper-name a:nth-child(1):hover ~ .fill-text:after {
  --hover-text: "la bonne lecture de la vie";
}
.wrapper-name a:nth-child(2):hover ~ .fill-text:before {
  --fill-from: circle(0% at 150% 50%);
  --fill-to: circle(100% at 50% 50%);
  -webkit-animation: fill-text 3s forwards;
          animation: fill-text 3s forwards;
}
.wrapper-name a:nth-child(2):hover ~ .fill-text:after {
  --hover-text: "the science of ethics";
}
.wrapper-name a:nth-child(3):hover ~ .fill-text:before {
  --fill-from: circle(0% at 50% 100%);
  --fill-to: circle(150% at 0% 50%);
  -webkit-animation: fill-text 3s forwards;
          animation: fill-text 3s forwards;
}
.wrapper-name a:nth-child(3):hover ~ .fill-text:after {
  --hover-text: "the art of nourishing";
}
.wrapper-name a:nth-child(4):hover ~ .fill-text:before {
  --fill-from: circle(0% at 0% 50%);
  --fill-to: circle(150% at 0% 50%);
  -webkit-animation: fill-text 3s forwards;
          animation: fill-text 3s forwards;
}
.wrapper-name a:nth-child(4):hover ~ .fill-text:after {
  --hover-text: "the art of ethics";
}

@-webkit-keyframes fill-text {
  0% {
    -webkit-clip-path: var(--fill-from);
            clip-path: var(--fill-from);
  }
  100% {
    -webkit-clip-path: var(--fill-to);
            clip-path: var(--fill-to);
    color: var(--text-color);
  }
}

@keyframes fill-text {
  0% {
    -webkit-clip-path: var(--fill-from);
            clip-path: var(--fill-from);
  }
  100% {
    -webkit-clip-path: var(--fill-to);
            clip-path: var(--fill-to);
    color: var(--text-color);
  }
}
.fill-text { 
  color: transparent;
  -webkit-text-stroke: 1px var(--text-color);
  text-stroke: 1px var(--text-color);
  font-size: 20vw;
  font-family: "cardo", serif !important; 
}
.fill-text:before {  
  content: attr(data-text);
  position: absolute; 
}
.fill-text:after {
  --hover-text: "ethicpolis";
  content: var(--hover-text);
  -webkit-text-stroke: initial;
  text-stroke: initial;
  font: 2vw/1.5 verdana;
  color: #999;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
  white-space: nowrap;  






	/**FORMAT TITLE**/
  	1111font-size: calc(2vw + .5rem);
  7777font-family: sans-serif;
  777font-size: 100px;
  111font-weight: bold;
  111background: 
    repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
  111background-blend-mode: difference;
  111mix-blend-mode: lighten;
  111-webkit-background-clip: text;
          111background-clip: text;
	/**FORMAT TITLE**/










	/**FORMAT TITLE**/
  	font-size: clamp(1.7rem, 2.2vw, 5.7vh) !important;         
	font-family: sans-serif !IMPORTANT;
  	color: #fff;
  	text-align: center;
  	text-transform: uppercase;
  	font-weight: 900;
  	background: 
    		repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
    		repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
  	background-blend-mode: difference;
  	mix-blend-mode: lighten;
  	-webkit-background-clip: text;
        background-clip: text;

  	background-image: radial-gradient(rgba(236, 34, 37, 0.5) 0.0125em, transparent 0.0125em);
  	background-size: 8px 8px;
  	-webkit-background-clip: text;
  	background-clip: text;
  	-webkit-text-stroke: 1px #ec2225;
  	transition: 0.2s;
	/**END OF FORMAT TITLE**/
	}





777.wrapper-name a {
	border: 2px solid red;
	}






.wrapper-name a {
	LEFT: 0; 
	MARGIN-LEFT: 0PX; 
	border: 0px;
	}