.mid {

  margin: auto !important;
}

.flex-mid{
  padding: 20px;
}

.small-text{
  font-size: 12.5px;
}
.arrow-button{
  padding-top: 20px !important;
  color: white !important;

}

.arrow-button:hover{
  color: rgb(206, 206, 206);
}

.quote-wrapper {
  height: 200px;
  position: relative;
  width: 200px;
}

.big-quote-wrapper {
  height: 400px;
  position: relative;
  width: 400px;
}
/*
Ici démarre les fonds des petits cercles
*/
.circle-bg-rose{
  background: radial-gradient(
  ellipse at center,
  #DB7093 0%,
  #DB7093 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-bleu{
  background: radial-gradient(
  ellipse at center,
  #4682B4 0%,
  #4682B4 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-vert{
  background: radial-gradient(
  ellipse at center,
  #2e8b57 0%,
  #2e8b57 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-ange{
  background: radial-gradient(
  ellipse at center,
  #00ced1 0%,
  #00ced1 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-beige{
  background: radial-gradient(
  ellipse at center,
  #d8cf78 0%,
  #d8cf78 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.link-warning2{
  color:#983301 !important;
}
.circle-bg-vert-clair{
  background: radial-gradient(
  ellipse at center,
  #27d77e 0%,
  #27d77e  70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-violet{
  background: radial-gradient(
  ellipse at center,
  #9932CC 0%,
  #9932CC 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-vert-clair{
  background: radial-gradient(
  ellipse at center,
  #27d77e 0%,
  #27d77e 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
.circle-bg-red{
  background: radial-gradient(
  ellipse at center,
  rgb(143, 107, 107) 0%,
  rgb(143, 107, 107) 70%,
  rgba(210, 20, 20, 0) 70.3%
);}
/*
Ici démarre les options des textes dans les cercles
*/
.text {
  height: 100%;
  width: 100%;
  color: white;
  position: relative;
  margin: 0;
}

.text p{
  font-size: 18px ;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}
.text h1 {
  font-size: 18px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text p::before {
  content: "";
  float: right;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
    );
  shape-margin: 7%;
}

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
  
}

.planets{
  color: rgb(248, 193, 73);
}

/* test */

.grid {
  vertical-align:middle !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 900px !important;
  display: grid !important;
  gap: 9%;
  height: 500px !important;
}

.grid > div {
  border-radius: 50%;
}

.grid .top { grid-row: 1; }
.grid .middle { grid-row: 2; }
.grid .bottom { grid-row: 3; }

.grid .left { grid-column: 1; }
.grid .center { grid-column: 2; }
.grid .right { grid-column: 3; }

.grid .left:not(.middle) { left: 40%; }
.grid .right:not(.middle) { right: 40%; }
.grid .top:not(.center) { top: 40%; }
.grid .bottom:not(.center) { bottom: 40%; }