body {
    background-color: #000000;
    color: #CCCCCC;
    font-family: 'Noto Sans Mono', monospace;
    font-size: large;
}

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    touch-action: none;
}

.bodyText {
    inline-size: 450px;
    position: absolute;
    work-break: break-all;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.5em;
}

.infoText {
    margin-left: 80px;
    margin-right: 80px;
}

.gamelink {
    width:48ch;
    text-align: center;
    margin: 0 auto;
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
}

.counter {
    width: 32ch;
    text-align: left;
    font-size: 16px;
}

img {
    max-width: 100%;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center-img-50 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.center-img-75 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

.block {
    display: block;
    width: 75%;
    margin: auto;
    border: 3px solid #CCCCCC;
    background-color: #FFFFFF;
    color: #222222;
    padding: 14px 28px;
    font-size: 24px;
    font-family: 'Noto Sans Mono', monospace;
    cursor: pointer;
    text-align: center;
}

div.horizontalgap {
    float: left;
    overflow: hidden;
    height: 1px;
    width: 0px;
}

input[type="text"] {
    position: relative;
    display: block;
    border: none;
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Noto Sans Mono', monospace;
}

input[type="text"]:focus {
    outline: none;
    border: none;
}

input[type="submit"] {
    position:relative;
    display: block;
    margin: 0 auto;
    font-family: 'Noto Sans Mono', monospace;
}