html, body {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    color: #222222;

    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}
body > * {
    position: absolute;
}
.blur {
    backdrop-filter: blur(200px);
    background-color: rgba(255, 255, 255, 0.4);
    &.extra {
        background-color: rgba(255, 255, 255, 0.8);
    }
}
@media (min-width: 1000px) {
    .gamewrapper {
        height: 100%;
    }
    .hudwrapper {
        width: 300px;
    }
    .sidebarwrapper {
        top: 0;
        width: 300px;
    }
}
@media (max-width: 1000px) {
    .gamewrapper {
        height: calc(100% - 100px);
    }
    .hudwrapper {
        width: min(300px, calc(100% - 80px));
    }
    .sidebarwrapper {
        height: 200px;
        width: calc(100% - 80px);
    }
}
.wrapper {
    & .header {
        margin: 0;
        padding: 10px;
        border: 2px solid #dddddd;
    }

    & .content {
        margin: 0;
        padding: 10px;
    }
}
.gamewrapper {
    width: 100%;
    top: 0;
    left: 0;
    & canvas {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        &:focus {
            outline: none !important;
        }
    }
}
.hudwrapper {
    height: 100px;
    top: 0;
    left: 0;
    margin: 20px;
    padding: 20px;
    /*background-color: white;*/
    /*border: solid 2px slategrey;*/
    border-radius: 20px;
    box-shadow: 0 0 5px grey;
}
.sidebarwrapper {
    /*height: 200px;*/
    /*top: 0;*/
    bottom: 0;
    right: 0;
    margin: 20px;
    padding: 20px;
    /*background-color: white;*/
    /*border: solid 2px slategrey;*/
    border-radius: 20px;
    box-shadow: 0 0 5px grey;
    overflow: auto;

    & .fixed {
        position: sticky;
        top: 0;
    }

    & .movelist {
        overflow: auto;
        /*margin-left: 15px;*/
        counter-reset: fullmoves;
        & .move {
            &.black::marker {
                content: '';
            }
            &.black {
                margin-bottom: 10px;
            }
            &.white::marker {
                counter-increment: fullmoves;
                content: counter(fullmoves)'. ';
            }
            & .piece::after {
                content: '@';
            }
            & .pos.starting::after {
                content: ' \2192\ ';
            }
        }
    }
}
.databox {
    /*user-select: all;*/
    padding: 10px;
    border-width: 1px;
    width: calc(100% - 20px - 2px);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.invalid {
        background-color: #ffaaaa;
    }
}