.highlightBox {
    --bgColor: #7944A3;
    --shadowColor: #361153;
    --textColor: #AF881C;
    --borderColor: #E7C438;
    --borderColor2: #AF881C;
    --borderColor3: #F9DF78;
    width: 100%;
    height: 100%;
    background: var(--bgColor);
    border: 3px solid var(--borderColor);
    box-shadow: 6px 6px 0px 0px var(--shadowColor);
    color: var(--textColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 8px 12px;
    gap: 12px;
    transition: 0.2s;
    --white:#ffffff;
    --black:#000000;
    --color1:#f1e8fc;
    --color2:#9469e4;
    --color3:#7f42b8;
    --color4:#6e34a5;
    --color5:#3e1564;
    --bgColor: var(--color1);
    --shadowColor: var(--color4);
    --textColor: var(--white);
    --borderColor: var(--color2);
    --bannerColor: var(--color4);
    --headingColor: var(--white);
    --headingShadowColor: none;
    --bannerDropShadow: var(--color5);
    --iconColor: var(--color2);
    --foldColor: var(--color5);
}

.highlightBox:hover {
    box-shadow: 8px 8px 0px 0px var(--shadowColor);
}

.highlightBox .heading {
    width: calc(100% + 24px + 6px + 48px);
    /* 100% + double padding + double border width + double extra on each side*/
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(1px 1px 2px var(--bannerDropShadow));
    /* 100% + double padding + double border width + double extra on each side*/
}

.highlightBox::before{
    display:block;
    content:"Homebrew Highlight";
    position:absolute;
    width:100%;
    height: 18px;
    top: -26px;
    left:0;
    color: black;
    opacity: 0.65;
    text-align:center;
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 18px;
    line-height: 18px;
}

.highlightBox .heading .headingText {
    display: block;
    width: 100%;
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 22px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--headingColor);
    white-space: wrap;
    padding: 4px 24px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlightBox .heading::after {
    --bannerEdgeColor: var(--iconColor);
    --bannerEdgeWidth: 3px;
    display: block;
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bannerColor);
    border: var(--bannerEdgeWidth) solid var(--bannerEdgeColor);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
}

.highlightBox .content {
    flex-grow: 1;
    width: 100%;
}

.highlightBox .content .content-text {
    display: block;
    width: 100%;
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
}