.margin {
    background: #ffffff;
    border-style: solid;
    border-color: var(--border-color);
    position: fixed;
    z-index: 30000;
}
.corner {
    border-width: 0;
    z-index: 29900!important;
}
.bottom {
    border-width: var(--border-width) 0 0 0;
    width: calc(var(--max-width-adjusted) - 6 * var(--vw));
    height: calc(100 * var(--vh) - var(--max-height-adjusted) + 100px);
    top: calc(var(--max-height-adjusted) + var(--margin-top-height));
    left: calc(var(--left-margin) + 3 * var(--vw));
    z-index: 29900!important;
}
.right-side {
    border-width: 0 0 0 var(--border-width);
    background-blend-mode: darken, luminosity;
    width: calc(2 * (100 * var(--vw) - var(--max-width-adjusted) + 3 * var(--vw) - var(--left-margin)));
    height: calc(var(--max-height-adjusted) + 2 * var(--margin-border-height));
    left: calc(var(--max-width-adjusted) + calc(var(--left-margin) - 3 * var(--vw)));
    top: var(--margin-top-height);
}
.bottom-right {
    border-color: var(--border-color);
    width: 100%;
    height: calc(100 * var(--vh) - var(--max-height-adjusted) + 100px);
    top: calc(var(--max-height-adjusted) + var(--margin-top-height));
    bottom: 0;
    left: calc(var(--max-width-adjusted) + calc(var(--left-margin) - 3 * var(--vw)));
}



.left-side {
    border-width: 0 var(--border-width) 0 0;
    background-blend-mode: darken, luminosity;
    width: calc(var(--left-margin) + 3 * var(--vw));
    height: calc(var(--max-height-adjusted) + 2 * var(--margin-border-height));
    left: 0;
    top: var(--margin-top-height);
}
.bottom-left {
    width: calc(var(--left-margin) + 3 * var(--vw));
    height: calc(100 * var(--vh) - var(--max-height-adjusted) + 100px);
    left: 0;
    border-width: var(--border-width) 0 0 0;
    top: calc(var(--max-height-adjusted) + var(--margin-top-height));
}
.top-right {
    top: 0;
    left: calc(var(--max-width-adjusted) + calc(var(--left-margin) - 3 * var(--vw)));
    height: var(--margin-top-height);
    width: 100%;
}
.top-left {
    height: var(--margin-top-height);
    width: calc(var(--left-margin-not-zero) + 3 * var(--vw));
    top: 0;
    border-width: 0 0 var(--border-width) 0;

}
.top {
    z-index: 29000!important;
    border-width: 0 0 var(--border-width) 0;
    height: var(--margin-top-height);
    width: calc(var(--max-width-adjusted) - 6 * var(--vw));
    max-width: calc(100 * var(--vw));
    top: 0;
    left: calc(var(--left-margin-not-zero) + 3 * var(--vw));
}


.credits {
    position: fixed;
    z-index: 400000!important;
    right: 0;
    bottom: 0;
    padding-left: 1em;
    padding-right: 1em;
    border-style: solid;
    border-width: var(--border-width) 0 0 var(--border-width);
    border-radius: 1em 0 0 0;
    background-color: #ffffff;
}
.credits-title {
    padding: calc(2 * var(--vh));
    transition: transform 1s ;
}
.credits-content a {
    text-decoration: none;
    text-decoration-color: #495374;
}
.credits-content {
    max-height: 0;
    max-width: 10vw;
    overflow: hidden;
    text-align: right;
    opacity: 0;
    pointer-events: none;
    transition: max-height 2s, max-width 2s, opacity 2s;
}
.credits:hover .credits-content {
    pointer-events: auto;
    max-height: 500px;
    max-width: 100vw;
    opacity: 1;
}
.credits:hover .credits {
    padding-bottom: 1em;
}