.trunk {
    margin-top:30px;
  z-index: 2;
  background-color: #13132a;
  height: 450px;
  width: 30px;
  position: relative; /* Position branches inside the trunk */
}

.trunk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 30px;
  background-color: #13132a;
  z-index: 3; /* sits above the branches */
}

.trunk::after {
  content: "Boojum Tree";
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;              /* keep text on one line */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  color: white;
  z-index: 3;
}

.trees-container {
  display: flex;
  justify-content: center;
}

.tree-container {
  display: flex;
  justify-content: center;
  width: 250px;
  padding: 10px 30px;
}

.branch {
  z-index: 1;
  position: absolute;
  width: 150px;
  background: #13132a;
  text-align: center;
  color: white;
  font-size: 80%;
  display: flex;
}

.left-branch {
      background: #13132a;
 height:20px;
  justify-content: right;
  left: -120px; /* Position the left branch to the left of the trunk */
  transform: rotate(30deg); /* Rotate the left branch */
}

.right-branch {
     height:20px;

      background: #13132a;

  justify-content: left;
  right: -120px; /* Position the right branch to the right of the trunk */
  transform: rotate(-30deg); /* Rotate the right branch */
}

.right-prog {
    height:20px;
    position: absolute;
    left:0;
  display: flex;
  justify-content: left;
}

.left-prog {
    height:20px;
    position: absolute;
    right:0;
  display: flex;
  justify-content: right;
}

.left-branch-inner {
    position:absolute;
    right:0;
  padding-right: 40px;
}

.right-branch-inner {
    position:absolute;
    left:0;
  padding-left: 40px;
}

.branch-1 {
  bottom: 35%;
  transform: rotate(-32deg);
}

.branch-2 {
  bottom: 38%;
  transform: rotate(35deg);
}
.branch-3 {
  bottom: 55%;
  transform: rotate(-25deg);
}
.branch-4 {
  bottom: 58%;
  transform: rotate(33deg);
}
.branch-5 {
  bottom: 65%;
  transform: rotate(-28deg);
}
.branch-6 {
  bottom: 75%;
}
.branch-7 {
  transform: rotate(-43deg);
  right: -90px;
  bottom: 82%;
  width: 120px;
}
.branch-8 {
    transform: rotate(41deg);
  left: -80px;
  bottom: 85%;
  width: 110px;
}