body {
    background-color: #21467d;
    font-family: "Audiowide";
    color: white;
}
.container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(transparent, transparent 127px, #ffffff44 127px, #ffffff44 128px),
        repeating-linear-gradient(90deg, transparent, transparent 127px, #ffffff44 127px, #ffffff44 128px),
        repeating-linear-gradient(transparent, transparent 15px, #ffffff0f 15px, #ffffff0f 16px),
        repeating-linear-gradient(90deg, transparent, transparent 15px, #ffffff0f 15px, #ffffff0f 16px),
        linear-gradient(45deg, #00a2ff17, transparent 50%, #00a2ff37), radial-gradient(circle at left, #dd00ff44, #dd00ff04 50%, transparent);
    cursor: default;
    overflow: hidden;
}
.btitle {
    position: absolute;
    left: 189px;
    top: 50px;
    height: 63px;
    font-family: "Bruno Ace";
    font-weight: bold;
    font-size: 64px;
    text-transform: uppercase;
    pointer-events: none;
}
.bdotted {
    background-color: #ffffffdd;
    width: 3px;
    height: 752px;
    position: absolute;
    top: 0;
    left: 158px;
    pointer-events: none;
}
.btext {
    position: absolute;
    right: calc(15px + mod(100dvw, 16px));
    top: 15px;
    bottom: calc(128px + mod(100dvh, 16px));
    width: 100dvw;
    padding-right: 15px;
    border-top: 3px solid #ffffffdd;
    border-right: 3px solid #ffffffdd;
    pointer-events: none;
}
.buttonrow {
    position: absolute;
}
.buttonrow.webrings {
    top: 143px;
    left: 159px;
}
.buttonrow.neighbors {
    top: 303px;
    left: 159px;
}
.buttonrow .label {
    color: #ffffff;
    font-size: 16px;
    height: 16px;
    width: 128px;
    padding-left: 17px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ffffffdd;
}
.buttonrow .bitems {
    padding-left: 32px;    
    display: flex;
}
.red {
    color: red;
}
.title-group {
    position: absolute;
    bottom: 1dvh;
    right: 1dvh;
}
.bspacer {
    height: 15px;
}
.navbar {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 511px;
    left: 221px;
    height: 511px;
    width: 100dvw;
    padding-left: 32px;
    border-left: 3px solid #ffffffdd;
    border-bottom: 3px solid #ffffffdd;
    text-align: left;
    font-size: 14px;
}
a {
    cursor: pointer;
    pointer-events: all;
}
.row0 {
    position: absolute;
    top: 48px;
}
.row1 {
    position: absolute;
    top: 176px;
}
.row2 {
    position: absolute;
    top: 304px;
}
.row3 {
    position: absolute;
    top: 432px;
}
.col0 {
    position: absolute;
    padding-left: 2px;
    left: 0;
}
.col1 {
    position: absolute;
    padding-left: 2px;
    left: 128px;
}
.col2 {
    position: absolute;
    padding-left: 2px;
    left: 256px;
}
.col3 {
    position: absolute;
    padding-left: 2px;
    left: 384px;
}
.navbar a {
    color: white;
}
.navbar a:hover {
    color: white;
}
.bold {
    font-weight: bold;
}
p {
    text-align: right;
    font-size: 16px;
}
.pagename {
    position: absolute;
    right: calc(128px + mod(100dvw, 16px));
    bottom: calc(250px + mod(100dvh, 16px));
    line-height: 1;
    font-family: "Bruno Ace";
    font-weight: bold;
    font-size: 50px;
    pointer-events: none;
}
.linkcontainer {
    position: relative;
    height: 32px;
    width: 88px;
    padding: 32px 20px 34px 21px;
    pointer-events: all;
}
.linkcontainer.mb {
    padding: 32px 0 34px 16px;
}
.linkcontainer.fb {
    padding-right: 0;
    padding-left: 32px;
}
.linkcontainer.lb {
    padding-left: 16px;
    padding-right: 33px;
}
.linkcontainer .wb {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ffffffdd;
}
.linkcontainer .hb {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #ffffffdd;
}
.bcircle {
    position: absolute;
    bottom: -1283px;
    left: -513px;
    height: 2048px;
    width: 2048px;
    border: 2px solid #ffffffdd;
    border-radius: 1024px;
    pointer-events: none;
}
.btl {
    top: 0;
    left: 16px;
}
.bbl {
    bottom: 0;
    left: 16px;
}
.btr {
    top: 0;
    right: 16px;
}
.bbr {
    bottom: 0;
    right: 16px;
}
.wtl {
    top: 16px;
    left: 0;
}
.wtr {
    top: 16px;
    right: 0;
}
.wbl {
    bottom: 16px;
    left: 0;
}
.wbr {
    bottom: 16px;
    right: 0;
}
.notation {
    position: absolute;
    height: 32px;
    width: 512px;
}
.line {
    stroke: #ffffffdd;
}
.n-title {
    top: 112px;
    left: 752px;
}
.nav-title {
    top: 830px;
    left: 10px;
}
.nav-subtitle {
    position: absolute;
    bottom: 0;
    left: 70px;
    font-size: 14px;
    font-family: "Verdana";
    text-transform: none;
    pointer-events: none;
}
.n-subtitle {
    position: absolute;
    bottom: 0;
    left: 130px;
    font-size: 14px;
    font-weight: normal;
    font-family: "Verdana";
    text-transform: none;
    pointer-events: none;
}
.s-subtitle {
    position: absolute;
    top: 0;
    right: 156px;
    font-size: 14px;
    font-weight: normal;
    font-family: "Verdana";
    text-transform: none;
    pointer-events: none;
}
.s-title {
    bottom: calc(288px + mod(100dvh, 16px));
    right: calc(512px + mod(100dvw, 16px));
    pointer-events: none;
}