:root {
    --light-base0B-lighter: #3e91ae;
    --dark-base0B-darker: #66a8c1;

    --horizontal-ribbon-margin: 2vh;
    --horizontal-ribbon-height: 6vh;
    --horizontal-ribbon-min-height: 60px;
    --horizontal-ribbon-edge-height: 0.4vh;
    --vertical-ribbon-margin: 2vw;
    --vertical-ribbon-width: 6vw;
    --vertical-ribbon-min-width: 100px;
    --vertical-ribbon-edge-width: 0.4vw;
}

body {
    margin: 0;
    min-width: fit-content;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ribbon {
    margin-top: var(--horizontal-ribbon-margin);
    margin-bottom: var(--horizontal-ribbon-margin);
    background-color: var(--light-base0B);
    border-color: var(--light-base0B-lighter);
    border-width: var(--horizontal-ribbon-edge-height);
    border-top-style: solid;
    border-bottom-style: solid;
    position: relative;
}

.ribbon .pattern {
    width: 100%;
    height: var(--horizontal-ribbon-height);
    min-height: var(--horizontal-ribbon-min-height);
    background-image: url("symbols.svg#ribbon-pattern");
    filter: opacity(5%);
}

.ribbon svg {
    fill: var(--light-background);
    --logo-height: calc(max(var(--horizontal-ribbon-min-height), var(--horizontal-ribbon-height)) * 0.7);
    --logo-width: calc(var(--logo-height) * 161.8 / 180.9 );
    width: var(--logo-width);
    height: var(--logo-height);
    position: absolute;
    bottom: calc((max(var(--horizontal-ribbon-min-height), var(--horizontal-ribbon-height)) - var(--logo-height)) / 2);
    left: 1rem;
}

.ribbon .title {
    color: var(--light-background);
    font-size: calc(max(var(--horizontal-ribbon-min-height), var(--horizontal-ribbon-height)) / 2);
    line-height: 0;
    padding-inline: 1rem;
    position: absolute;
    bottom: calc(max(var(--horizontal-ribbon-min-height), var(--horizontal-ribbon-height)) / 2);
    right: 0;
}

body::after {
    content: "";
    width: 100%;
    height: calc(2*var(--horizontal-ribbon-margin) + var(--horizontal-ribbon-height) + 2*var(--horizontal-ribbon-edge-height));
    min-height: calc(2*var(--horizontal-ribbon-margin) + var(--horizontal-ribbon-min-height) + 2*var(--horizontal-ribbon-edge-height));
}

@media screen and (min-width: 60em) {
    body {
        flex-direction: row;
    }

    .ribbon {
        margin-top: unset;
        margin-bottom: unset;
        margin-left: var(--vertical-ribbon-margin);
        margin-right: var(--vertical-ribbon-margin);
        border-width: var(--vertical-ribbon-edge-width);
        border-top-style: unset;
        border-bottom-style: unset;
        border-left-style: solid;
        border-right-style: solid;
    }

    .ribbon .pattern {
        width: var(--vertical-ribbon-width);
        height: 100%;
        min-width: var(--vertical-ribbon-min-width);
    }

    .ribbon svg {
        --logo-width: calc(max(var(--vertical-ribbon-min-width), var(--vertical-ribbon-width)) * 0.7);
        --logo-height: calc(var(--logo-width) * 180.9 / 161.8);
        position: fixed;
        bottom: unset;
        top: 1rem;
        left: calc(var(--vertical-ribbon-margin) + var(--vertical-ribbon-edge-width) + (max(var(--vertical-ribbon-min-width), var(--vertical-ribbon-width)) - var(--logo-width)) / 2);
    }

    .ribbon .title {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        font-size: calc(max(var(--vertical-ribbon-min-width), var(--vertical-ribbon-width)) / 2);
        position: fixed;
        right: unset;
        bottom: 0;
        left: calc(var(--vertical-ribbon-margin) + var(--vertical-ribbon-edge-width) + max(var(--vertical-ribbon-min-width), var(--vertical-ribbon-width))/2);
    }

    body::after {
        width: calc(2*var(--vertical-ribbon-margin) + var(--vertical-ribbon-width) + 2*var(--vertical-ribbon-edge-width));
        height: 100%;
        min-width: calc(2*var(--vertical-ribbon-margin) + var(--vertical-ribbon-min-width) + 2*var(--vertical-ribbon-edge-width));
    }
}

@media (prefers-color-scheme: dark) {
    .ribbon {
        background-color: var(--dark-base0B);
        border-color: var(--dark-base0B-darker);
    }

    .ribbon svg {
        fill: var(--dark-background);
    }

    .ribbon .title {
        color: var(--dark-background);
    }
}