@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --primary-color: #282828;
  --secondary-color: #dbc4ff;
  --tertiary-color: #b995f5;
  --fourth-color: #3e3e3e;
  --border-color: white;
  --text-color: #282828;
  --text-color-2: white;
  --hr-color: #2596be;

  --admin: #ff4600;
  --responsable: #e67e22;
  --dev: #2ecc71;
  --supermod: #992d22;
  --builder: #ffa200;
  --mod: #009bff;
}

h2 span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}
h2 img {
  height: 50px;
  border-radius: 50%;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px 10%;
}
section {
  width: 45%;
  min-width: 320px;
  margin: 0;
}
@media (max-width: 750px) {
  section {
    width: 100%;
  }
  section:first-child {
    margin-top: 150px;
  }
}
section:last-child {
  margin-bottom: 150px;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
}
.role {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.role .img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}
.role h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--text-color-2);
  margin-top: 10px;
  font-size: 20px;
}

.mod {
  background-image: url("/pictures/Icônes/mod.png");
  border: 3px solid var(--mod);
  background-color: color-mix(in srgb, var(--mod) 40%, transparent);
}
.supermod {
  background-image: url("/pictures/Icônes/supermod.png");
  border: 3px solid var(--supermod);
  background-color: color-mix(in srgb, var(--supermod) 40%, transparent);
}
.admin {
  background-image: url("/pictures/Icônes/admin.png");
  border: 3px solid var(--admin);
  background-color: color-mix(in srgb, var(--admin) 40%, transparent);
}
.dev {
  background-image: url("/pictures/Icônes/dev.png");
  border: 3px solid var(--dev);
  background-color: color-mix(in srgb, var(--dev) 40%, transparent);
}
.build {
  background-image: url("/pictures/Icônes/build.png");
  border: 3px solid var(--builder);
  background-color: color-mix(in srgb, var(--builder) 40%, transparent);
}
.responsable {
  background-image: url("/pictures/Icônes/responsable.png");
  border: 3px solid var(--responsable);
  background-color: color-mix(in srgb, var(--responsable) 40%, transparent);
}