engine.css

body {
    margin: 0px;
    background-color: white;
}

.proof {
    margin: 0px;
}

.arrow {
    font-size: 120%;
    margin-top: -5px;
}

.box>div {
    padding: 6px;
    width: fit-content;
}

.box>div.verticalConnector {
    width: initial;
    text-align: center;
}

.box>div.vspace {
    padding: 8px;
    width: fit-content;
}



.box>div.centered {
    width: initial;
    text-align: center;
}

.algo>div {
    width: fit-content;
    position: relative;
}


div.infer1::before {
    display: block;
    content: "⇓";

}



.asciiart {
    margin: 8px;
    overflow: hidden;
    border: 0;
    resize: none;
}

env {
    font-weight: bold;
}


.box {
    position: absolute;
    width: max-content;
    max-height: 100%;
    margin: 0px;
    top: 0px;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    border-left: 2px dotted black;
    border-top: 2px solid black;

    border-radius: 16px;
}


.box.inside {
    top: 10px;
}


.inside {
    position: relative;
    left: 10px;
    display: inline-block;
    max-width: none;
    margin-bottom: 12px;
}

.button {
    border: 1px solid transparent;
    cursor: pointer;
    background-color: rgba(64, 128, 255, 0.1);
    border-radius: 16px;
    transition: all 500ms;
    margin-left: 3px;
    margin-right: 3px;
    padding: 6px;
}


.edge path {
    stroke-width: 6px;
    stroke: black;
}

.edge polygon {
    stroke-width: 3px;
    stroke: black;
}

.button:hover path {
    stroke-width: 8px;
}

.on path {
    stroke-width: 10px;
    stroke: #0088FF;
}

.on polygon {
    stroke-width: 10px;
    fill: #0088FF;
    stroke: #0088FF;
}

.button:hover {
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .3));
}


.ref {
    border-radius: 16px;
    border-left: 4px solid orange;
    border-right: 4px solid orange;
}

:not(.inside) .statement {
    max-width: 500px;
}


.inside .statement {
    max-width: none;
}

.on {
    background-color: lightblue;
}

:not(.insideButton).on {
    border-right: 4px solid black;
}

.insideButton.on {
    border-bottom: 4px solid black;
}

.definition {
    color: rgb(0, 96, 0);
}

.hidden {
    width: 0px;
    padding: 0px;
    overflow: hidden;
    visibility: hidden;
    display: none;
}


.button:active {
    opacity: 0.8;
}

.box0.inside {
    width: 100%;
    max-width: 100%;
}

.inside.hidden {
    display: none;
}



.example {
    color: darkblue;
    background-color: rgba(128, 192, 255, 0.5);
    margin-left: auto;
}


.inside .example {
    color: darkblue;
    background-color: rgba(128, 192, 255, 0.5);
    margin-left: unset;
}



.indent {
    margin-left: 20px;
}

.highlight {
    background-color: rgba(255, 229, 144, 0.8);
}


.highlight path {
    stroke-width: 10px;
    stroke: rgb(255, 196, 0);
}

.highlight polygon {
    stroke-width: 10px;
    stroke: rgb(255, 196, 0);
    fill: rgb(255, 196, 0);
}


.graphvizContainer svg {
    scale: 0.8;
}

foreignObject {
    overflow: visible;
}


#svg {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    width: auto;
    height: auto;
}

#svg line {
    stroke-dasharray: 4 1;
}


table,
tr,
td {
    border-collapse: collapse;
    border: 1px solid black;

}


.block {
    border-left: 1px solid black;
}



.help {
    margin-left: auto;
    background: rgb(255, 255, 128);
    border: 2px solid rgb(187, 131, 26);
    color: rgb(187, 131, 26);
    font-weight: bolder;
    padding: 0px;
    border-radius:2px;
}