/* For Chrome, Safari, and Edge */
::-webkit-scrollbar {
    display: none;
  }
  
/* For Firefox */
html {
    scrollbar-width: none;
}

/* For Internet Explorer and Edge (older versions) */
body {
    -ms-overflow-style: none;
}

.hexagon {
    width: 24px;
    height: 14px;
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

/* Blue Hexagon */
.hexagon-blue {
    background-color: #3b1a43;
}

.hexagon-blue:before {
    top: -7px;
    border-bottom: 7px solid #3b1a43;
}

.hexagon-blue:after {
    bottom: -7px;
    border-top: 7px solid #3b1a43;
}

/* Yellow Hexagon */
.hexagon-yellow {
    background-color: #998d2c;
}

.hexagon-yellow:before {
    top: -7px;
    border-bottom: 7px solid #998d2c;
}

.hexagon-yellow:after {
    bottom: -7px;
    border-top: 7px solid #998d2c;
}

/* Green Hexagon */
.hexagon-green {
    background-color: #377654;
}

.hexagon-green:before {
    top: -7px;
    border-bottom: 7px solid #377654;
}

.hexagon-green:after {
    bottom: -7px;
    border-top: 7px solid #377654;
}