.bar[color=primary] {
  background-color: #0d6efd;
}

.bar[color=secondary] {
  background-color: #6c757d;
}

.bar[color=success] {
  background-color: #198754;
}

.bar[color=info] {
  background-color: #0dcaf0;
}

.bar[color=warning] {
  background-color: #ffc107;
}

.bar[color=danger] {
  background-color: #dc3545;
}

.bar[color=light] {
  background-color: #f8f9fa;
}

.bar[color=dark] {
  background-color: #212529;
}

body {
  font-family: "Calibri", sans-serif;
  color: #212529;
}

.code {
  display: block;
  white-space: pre;
  line-height: 0.7;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

h1, p {
  text-align: center;
}

div.chart {
  display: flex;
  justify-content: space-between;
  margin: auto auto;
  height: 300px;
  width: 400px;
}

div.bar-container {
  display: flex;
  flex-direction: column;
  width: 30px;
}

.bar-container[value]::after {
  background-color: #f8f9fa;
  border-radius: 10px;
  display: inline-block;
  content: attr(value);
  margin-top: 5px;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 0.8em;
  color: #212529;
}

div.bar {
  width: 100%;
  bottom: 100px;
  margin-top: auto;
}

div.bar-container[value="0"] > div.bar {
  height: 0%;
}

div.bar-container[value="1"] > div.bar {
  height: 1%;
}

div.bar-container[value="2"] > div.bar {
  height: 2%;
}

div.bar-container[value="3"] > div.bar {
  height: 3%;
}

div.bar-container[value="4"] > div.bar {
  height: 4%;
}

div.bar-container[value="5"] > div.bar {
  height: 5%;
}

div.bar-container[value="6"] > div.bar {
  height: 6%;
}

div.bar-container[value="7"] > div.bar {
  height: 7%;
}

div.bar-container[value="8"] > div.bar {
  height: 8%;
}

div.bar-container[value="9"] > div.bar {
  height: 9%;
}

div.bar-container[value="10"] > div.bar {
  height: 10%;
}

div.bar-container[value="11"] > div.bar {
  height: 11%;
}

div.bar-container[value="12"] > div.bar {
  height: 12%;
}

div.bar-container[value="13"] > div.bar {
  height: 13%;
}

div.bar-container[value="14"] > div.bar {
  height: 14%;
}

div.bar-container[value="15"] > div.bar {
  height: 15%;
}

div.bar-container[value="16"] > div.bar {
  height: 16%;
}

div.bar-container[value="17"] > div.bar {
  height: 17%;
}

div.bar-container[value="18"] > div.bar {
  height: 18%;
}

div.bar-container[value="19"] > div.bar {
  height: 19%;
}

div.bar-container[value="20"] > div.bar {
  height: 20%;
}

div.bar-container[value="21"] > div.bar {
  height: 21%;
}

div.bar-container[value="22"] > div.bar {
  height: 22%;
}

div.bar-container[value="23"] > div.bar {
  height: 23%;
}

div.bar-container[value="24"] > div.bar {
  height: 24%;
}

div.bar-container[value="25"] > div.bar {
  height: 25%;
}

div.bar-container[value="26"] > div.bar {
  height: 26%;
}

div.bar-container[value="27"] > div.bar {
  height: 27%;
}

div.bar-container[value="28"] > div.bar {
  height: 28%;
}

div.bar-container[value="29"] > div.bar {
  height: 29%;
}

div.bar-container[value="30"] > div.bar {
  height: 30%;
}

div.bar-container[value="31"] > div.bar {
  height: 31%;
}

div.bar-container[value="32"] > div.bar {
  height: 32%;
}

div.bar-container[value="33"] > div.bar {
  height: 33%;
}

div.bar-container[value="34"] > div.bar {
  height: 34%;
}

div.bar-container[value="35"] > div.bar {
  height: 35%;
}

div.bar-container[value="36"] > div.bar {
  height: 36%;
}

div.bar-container[value="37"] > div.bar {
  height: 37%;
}

div.bar-container[value="38"] > div.bar {
  height: 38%;
}

div.bar-container[value="39"] > div.bar {
  height: 39%;
}

div.bar-container[value="40"] > div.bar {
  height: 40%;
}

div.bar-container[value="41"] > div.bar {
  height: 41%;
}

div.bar-container[value="42"] > div.bar {
  height: 42%;
}

div.bar-container[value="43"] > div.bar {
  height: 43%;
}

div.bar-container[value="44"] > div.bar {
  height: 44%;
}

div.bar-container[value="45"] > div.bar {
  height: 45%;
}

div.bar-container[value="46"] > div.bar {
  height: 46%;
}

div.bar-container[value="47"] > div.bar {
  height: 47%;
}

div.bar-container[value="48"] > div.bar {
  height: 48%;
}

div.bar-container[value="49"] > div.bar {
  height: 49%;
}

div.bar-container[value="50"] > div.bar {
  height: 50%;
}

div.bar-container[value="51"] > div.bar {
  height: 51%;
}

div.bar-container[value="52"] > div.bar {
  height: 52%;
}

div.bar-container[value="53"] > div.bar {
  height: 53%;
}

div.bar-container[value="54"] > div.bar {
  height: 54%;
}

div.bar-container[value="55"] > div.bar {
  height: 55%;
}

div.bar-container[value="56"] > div.bar {
  height: 56%;
}

div.bar-container[value="57"] > div.bar {
  height: 57%;
}

div.bar-container[value="58"] > div.bar {
  height: 58%;
}

div.bar-container[value="59"] > div.bar {
  height: 59%;
}

div.bar-container[value="60"] > div.bar {
  height: 60%;
}

div.bar-container[value="61"] > div.bar {
  height: 61%;
}

div.bar-container[value="62"] > div.bar {
  height: 62%;
}

div.bar-container[value="63"] > div.bar {
  height: 63%;
}

div.bar-container[value="64"] > div.bar {
  height: 64%;
}

div.bar-container[value="65"] > div.bar {
  height: 65%;
}

div.bar-container[value="66"] > div.bar {
  height: 66%;
}

div.bar-container[value="67"] > div.bar {
  height: 67%;
}

div.bar-container[value="68"] > div.bar {
  height: 68%;
}

div.bar-container[value="69"] > div.bar {
  height: 69%;
}

div.bar-container[value="70"] > div.bar {
  height: 70%;
}

div.bar-container[value="71"] > div.bar {
  height: 71%;
}

div.bar-container[value="72"] > div.bar {
  height: 72%;
}

div.bar-container[value="73"] > div.bar {
  height: 73%;
}

div.bar-container[value="74"] > div.bar {
  height: 74%;
}

div.bar-container[value="75"] > div.bar {
  height: 75%;
}

div.bar-container[value="76"] > div.bar {
  height: 76%;
}

div.bar-container[value="77"] > div.bar {
  height: 77%;
}

div.bar-container[value="78"] > div.bar {
  height: 78%;
}

div.bar-container[value="79"] > div.bar {
  height: 79%;
}

div.bar-container[value="80"] > div.bar {
  height: 80%;
}

div.bar-container[value="81"] > div.bar {
  height: 81%;
}

div.bar-container[value="82"] > div.bar {
  height: 82%;
}

div.bar-container[value="83"] > div.bar {
  height: 83%;
}

div.bar-container[value="84"] > div.bar {
  height: 84%;
}

div.bar-container[value="85"] > div.bar {
  height: 85%;
}

div.bar-container[value="86"] > div.bar {
  height: 86%;
}

div.bar-container[value="87"] > div.bar {
  height: 87%;
}

div.bar-container[value="88"] > div.bar {
  height: 88%;
}

div.bar-container[value="89"] > div.bar {
  height: 89%;
}

div.bar-container[value="90"] > div.bar {
  height: 90%;
}

div.bar-container[value="91"] > div.bar {
  height: 91%;
}

div.bar-container[value="92"] > div.bar {
  height: 92%;
}

div.bar-container[value="93"] > div.bar {
  height: 93%;
}

div.bar-container[value="94"] > div.bar {
  height: 94%;
}

div.bar-container[value="95"] > div.bar {
  height: 95%;
}

div.bar-container[value="96"] > div.bar {
  height: 96%;
}

div.bar-container[value="97"] > div.bar {
  height: 97%;
}

div.bar-container[value="98"] > div.bar {
  height: 98%;
}

div.bar-container[value="99"] > div.bar {
  height: 99%;
}

div.bar-container[value="100"] > div.bar {
  height: 100%;
}

/*# sourceMappingURL=main.css.map */