.trianglesTable {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    --triangleWidth: calc(min(15vh, 15vw));
    --triangleHeight: calc(var(--triangleWidth) / 2 * 1.7320508076);
    --starMultiplier: 1.5;
    --colorShape: white;
    --colorText: black;
    --colorShapePast: #5f7de4;
    --colorTextPast: white;
    --colorShapeCurrent: #cd3c37;
    --colorTextCurrent: white;
    --colorShapeHover: #fefe00;
    --colorTextHover: black;

    font-family: "susiSSP-sb";
}

.triangleRow {
    display: flex;
}

.triangleUp {
    width: var(--triangleWidth);
    height: var(--triangleHeight);
    
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

    text-align: center;
    line-height: calc(var(--triangleHeight) * 4 / 3);
    margin: 1px calc(var(--triangleWidth) * (-1) / 4 + 1px);
}
.triangleDown {
    width: var(--triangleWidth);
    height: var(--triangleHeight);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);

    text-align: center;
    line-height: calc(var(--triangleHeight) * 2 / 3);
    margin: 1px calc(var(--triangleWidth) * (-1) / 4 + 1px);
}
.starShape {
    width: calc(var(--triangleWidth) * var(--starMultiplier));
    height: calc(var(--triangleWidth) * var(--starMultiplier));
    clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);

    text-align: center;
    line-height: calc(var(--triangleHeight) * var(--starMultiplier) * 1.3);
    margin-bottom: calc(var(--triangleWidth) * var(--starMultiplier) * (-1) / 4 + 1px)
}

.triangleUp, .triangleDown, .starShape {
    background-color: var(--colorShape);
    color: var(--colorText);
}

.shapeIsCurrent {
    background-color: var(--colorShapeCurrent);
    color: var(--colorTextCurrent);
    cursor: pointer;
}
.shapeIsPast {
    background-color: var(--colorShapePast);
    color: var(--colorTextPast);
    cursor: pointer;
}

.triangleUp:hover, .triangleDown:hover, .starShape:hover {
    background-color: var(--colorShapeHover);
    color: var(--colorTextHover);
}