:root{
    --page-w: 54em;
}

.filled{
	fill: none !important;
}
text{
    font-family: monospace !important;
    font-weight: bold !important;
    fill: red !important;
    visibility: visible;
}
marker > *{
    stroke: darkorange !important;
    visibility: visible;
}

.drawing:not(.preview) .backdrop{
    stroke: aquamarine !important;
    stroke-width: 1px !important;
}

.drawing{
    margin: 1em;
    margin-bottom: 90vh;
}
.drawing:not(.preview):before{
    content: '';
    top: 0;
    left: 0;
    width: var(--page-w);
    height: calc(var(--page-w) * sqrt(2));
    border: 2px solid MediumSeaGreen;
    position: fixed;
}

.text-color{
    color: red;
}
.marker-color{
    color: darkorange;
}
.svg-color{
    color: aquamarine;
}
.page-color{
    color: mediumseagreen;
}

body.preview text,
body.preview marker > *,
body.preview #svg-legend{
    visibility: hidden;
}


#svg-buttons,
#svg-legend{
    position: fixed;
    right: 0.5em;
    width: fit-content;
    margin-left: auto;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#svg-buttons{
    top: 0.5rem;
}
#svg-legend{
    bottom: 0.5rem;
    width: 16rem;
    font-size: 0.825rem;
}




.scheme text{
    fill: currentColor !important;
    font-weight: normal !important;
}
.scheme a,
.scheme a text{
    font-weight: bold !important;
}