/*------------------------------------------*/
/*ACCUEIL*/
body main {
	display: flex;
	flex-direction: column;
	width: auto;
	height: 100vh;
	margin: auto;
	padding: 0px;
}
.logo_txt {
	height: auto;
	width: 100%;
	margin: auto;
}
.logo_bubbles {
	position: relative;
	height: auto;
	width: 100%;
	margin: auto;
}
.logo_links {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: auto auto 50px auto;
}




/*------------------------------------------*/
/*THE DRAWING*/
/*all the ratios of the following elements*/
._ratio {
	position: relative;
	width: 100%;
}
.logo_bubbles > ._ratio {
	padding-top: 70%;	
}
.circle > ._ratio {
	padding-top: 100%;
}
/*commmon settings*/
.logo_bubbles .circle {
	position: absolute;
	border-radius: 50%;
}
/*sie position and color for each circles*/
.logo_bubbles .circle._1 {
	top: 13.4%;
	left: 2.2%;
	width: 51.6%;
	background-color: #ee1998;
}
.logo_bubbles .circle._2 {
	top: 18.8%;
	left: 27.6%;
	width: 51.6%;
	background-color: #8fce3c;
}
.logo_bubbles .circle._3 {
	top: 5.9%;
	left: 66.1%;
	width: 30.5%;
	background-color: #0c9cb5;
}
.logo_bubbles .circle._4 {
	top: 36%;
	left: 59%;
	width: 10.9%;
	background-color: #e3e00a;
}
/*mix-blend-mode*/
.logo_bubbles .circle._blend._2 {
	mix-blend-mode: luminosity;
}
.logo_bubbles .circle._blend._3 {
	mix-blend-mode: color;
}
/*the line*/
.logo_bubbles .logo_line {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}




/*------------------------------------------*/
/*THE ANIMATION*/
@keyframes position {
	0%		{transform: translate(   0%,    0%);}
	5%		{transform: translate( 0.5%, -0.5%);}
	10%		{transform: translate(   1%,    0%);}
	15%		{transform: translate( 0.5%, -0.5%);}
	20%		{transform: translate(   0%,   -1%);}
	25%		{transform: translate(-0.5%, -0.5%);}
	30%		{transform: translate(  -1%,    0%);}
	35%		{transform: translate(-0.5%, -0.5%);}
	40%		{transform: translate(   0%,   -1%);}
	45%		{transform: translate(-0.5%, -0.5%);}
	50%		{transform: translate(  -1%,    0%);}
	55%		{transform: translate(-0.5%,  0.5%);}
	60%		{transform: translate(   0%,    1%);}
	65%		{transform: translate( 0.5%,  0.5%);}
	70%		{transform: translate(   1%,    1%);}
	75%		{transform: translate( 0.5%,  0.5%);}
	80%		{transform: translate(   1%,    0%);}
	85%		{transform: translate( 0.5%, -0.5%);}
	90%		{transform: translate(   0%,   -1%);}
	95%		{transform: translate(-0.5%, -0.5%);}
	100%	{transform: translate(  -1%,    0%);}
}
@keyframes rotation {
	from	{transform: rotate(0deg);	transform-origin: 50% 50.5%;}
	to		{transform: rotate(360deg);	transform-origin: 50.5% 50%;}
}
.logo_bubbles .circle {
	animation-name: position;
	animation-duration: 8s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	animation-name: rotation;
	animation-duration: 1s;
	animation-direction: normal;
}
.logo_bubbles .circle._1 {
	animation-delay: -0.8s;
}
.logo_bubbles .circle._2 {
	animation-delay: -1.3s;
}
.logo_bubbles .circle._3 {
	animation-delay: -2.7s;
}
.logo_bubbles .circle._4 {
	animation-delay: 0s;
}





/*------------------------------------------*/
/*LINKS*/
.logo_links > * {
	margin: auto;
	padding: 0px;
}
.logo_links > :first-child {
	margin-left: 0px;
}
.logo_links > :last-child {
	margin-right: 0px;
}
.logo_links #kosmopolit a {
	color: var(--color-purple);
}
.logo_links #litterall a {
	color: var(--color-green);
}
.logo_links #lea a {
	color: var(--color-water);
}
.logo_links #actualites a {
	color: hsl(59,  100%,  40%);
}