
body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  text-decoration: none;
  background-color: #f56565d8;
  color: white;
  animation: myAnim 1s ease 0s 1 normal forwards;
  font-size: 1rem;
}

@keyframes myAnim {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.container {  display: grid;
  grid-template-columns: 4em repeat(6, 1fr) 4em;
  grid-template-rows: 1 auto repeat(3, 1fr);
  grid-auto-flow: row;
  gap : 1.5%;
}

.description { 
  grid-area: 2 / 2 / 4 / 4;
}

.projet { 
  grid-area: 2 / 4 / 4 / 6;
}

.equipe { 
  grid-area: 2 / 6 / 4 / 8;
}

header { grid-area: 1 / 2 / 2 / 8; }

footer { grid-area: 4 / 2 / 5 / 8; }


h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 4em;
  flex-grow: 3;
}

h2 {
  display: grid;
  justify-content: center;
  border: 1px solid white;
  /*color: #F56565;*/
  font-weight: 300;
  padding: 2%;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2em;
  align-items: right;
}

h3:hover {
  animation: myAnim2 2s ease 0s 1 normal forwards;
}

@keyframes myAnim2 {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-6deg);
	}

	30% {
		transform: translateX(15px) rotate(6deg);
	}

	45% {
		transform: translateX(-15px) rotate(-3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(-1.2deg);
	}
}

h4 {
  font-weight: 300;
  padding-top: 3%;
}

a {
  align-items: flex-end;
	text-decoration:none;
  color: inherit; 
	transition: 0.5s;
	} 

.equipe2 {
  padding: 3%;
  border: 1px solid;
}

.description2 {
  padding: 3%;
  border: 1px solid;
}

.projet2 {
  padding: 3%;
  border: 1px solid;
}

.nom {
  display : flex;
    justify-content: space-between;
	align-items: center;
  gap: 5%;
  color: red;
  text-decoration: none;
}

.profil {
  display: block;
  margin-left: auto;
  margin-right: auto; 
  height: 8em;
  border-radius: 50%;
  padding: 4%;
  filter: grayscale(1);
}

figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120%;
}

span {
  padding-bottom: 2%;
}

img {
  display: flex;
  justify-content: right;
  align-items: right;
  height: 4em;
  padding-bottom: 3%;
}

@media screen 
 and (max-device-width: 600px) 
 and (min-device-width: 480px)  {

    .description {
      display: none;
      visibility: hidden;
    }

    .projet {
      display: none;
      visibility: hidden;
    }

    .equipe {
      display: none;
      visibility: hidden;
    }

    .nom {
      display: flex;
      flex-direction: column;
    }
  }

  @media screen 
 and (max-width: 600px) 
 and (min-width: 480px) 
{ 
  .description {
    display: none;
    visibility: hidden;
  }

  .projet {
    display: none;
    visibility: hidden;
  }

  .equipe {
    display: none;
    visibility: hidden;
  }

  .nom {
    display: flex;
    flex-direction: column;
  }

.partenaires {
    display:inline-block;
}

}


