@font-face {
  font-family: "Poppins";
  src: url(../../../asets/fonts/Poppins-Medium.ttf);
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Poppins, Helvetica, sans-serif;
  background: #f4f4f4;
  padding-top: 100px;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

/* Oblige le container à prendre la hauteur de l'élément flottant, si le texte n'est pas assez long */
.container::after {
  content: "";
  display: block;
  clear: both;
}

.container h2 {
  margin-bottom: 10px;
}

.container p {
  line-height: 1.4;
}

/* Retailler une image sans la déformer avec "object-fit" */
/* créer une marge entre l'image et le texte avec "shape-outside" */
img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  float: left;
  shape-outside: margin-box;
  margin: 0 20px 5px 0;
}