<h1>World population distribution</h1>

<div id="my-pie-chart-container">
  <div id="my-pie-chart"></div>

  <div id="legenda">
    <div class="entry">
      <div id="color-brown" class="entry-color"></div>
      <div class="entry-text">Antarctica</div>
    </div>
    <div class="entry">
      <div id="color-black" class="entry-color"></div>
      <div class="entry-text">Australia</div>
    </div>
    <div class="entry">
      <div id="color-blue" class="entry-color"></div>
      <div class="entry-text">South America</div>
    </div>
    <div class="entry">
      <div id="color-green" class="entry-color"></div>
      <div class="entry-text">North America</div>
    </div>
    <div class="entry">
      <div id="color-yellow" class="entry-color"></div>
      <div class="entry-text">Europe</div>
    </div>
    <div class="entry">
      <div id="color-orange" class="entry-color"></div>
      <div class="entry-text">Africa</div>
    </div>
    <div class="entry">
      <div id="color-red" class="entry-color"></div>
      <div class="entry-text">Asia</div>
    </div>
  </div>
</div>

body {
  background-color: silver;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#my-pie-chart-container {
  display: flex;
  align-items: center;
}

#my-pie-chart {
  background: conic-gradient(brown 0.00%, black 0.00% 0.55%, blue 0.55% 6.08%, green 6.08% 13.68%, yellow 13.68% 23.27%, orange 23.27% 40.47%, red 40.47%);
  border-radius: 50%;
    width: 150px;
    height: 150px;
}

#legenda {
  margin-left: 20px;
  background-color: white;
  padding: 5px;
}

.entry {
  display: flex;
  align-items: center;
}

.entry-color {
    height: 10px;
    width: 10px;
}

.entry-text {
  margin-left: 5px;
}

#color-red {
  background-color: red;
}

#color-orange {
  background-color: orange;
}

#color-yellow {
  background-color: yellow;
}

#color-green {
  background-color: green;
}

#color-blue {
  background-color: blue;
}

#color-black {
  background-color: black;
}

#color-brown {
  background-color: brown;
}