.Pedrita {
    font-family: Pedrita;
}

* {
    margin: 0;
    padding: 0;
}

:root {
    --xor-black: #000000;
    --xor-gray33: #555555;
    --xor-gray67: #AAAAAA;
    --xor-white: #FFFFFF;
    --xor-red: #FF0000;
    --xor-orange: #E47200;
    --xor-yellow: #E4E400;
    --xor-green: #00FF00;
    --xor-cyan: #00B4B4;
    --xor-azure: #0072E4;
    --xor-blue: #0000FF;
    --xor-violet: #7200E4;
    --xor-rose: #E40072;
    --xor-brown: #7F3F00;
    --xor-gold: #D4AB38;
    --xor-forestgreen: #3F7F3F;
}

body {
    background: var(--xor-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Pedrita;
    color: var(--xor-gray33);
    font-size: 1em;
    line-height: 100%;
}

h5 {
    font-size: 1.5em;
    line-height: 150%;
}

h1 {
    font-size: 2em;
    padding: 0em;
}

hr {
    border: 0;
    height: 1px;
    background: black;
}

.game {
    max-width: 640px;
    border-radius: 4px;
    margin: auto;
    background: #f7f7f7;
}

.log {
    font-family: PragmataPro, monospace;
    font-size: 0.5em;
    text-align: left;
}

.red {
    color: #f00;
}

.xor-black {
    color: #000000
}

.xor-gray33 {
    color: #555555
}

.xor-gray67 {
    color: #AAAAAA
}

.xor-white {
    color: #FFFFFF
}

.xor-red {
    color: #FF0000
}

.xor-orange {
    color: #E47200
}

.xor-yellow {
    color: #E4E400
}

.xor-green {
    color: #00FF00
}

.xor-cyan {
    color: #00B4B4
}

.xor-azure {
    color: #0072E4
}

.xor-blue {
    color: #0000FF
}

.xor-violet {
    color: #7200E4
}

.xor-rose {
    color: #E40072
}

.xor-brown {
    color: #7F3F00
}

.xor-gold {
    color: #D4AB38
}

.xor-forestgreen {
    color: #3F7F3F
}

.centered {
    text-align: center;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

.centered-block {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dropcapimage {
    width: 1in;
    border-radius: 5px;
    image-rendering: pixelated;
}

.column {
    float: left;
    padding: 0em;
}

.left {
    width: 20%;
}

.right {
    width: 60%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

* {
    box-sizing: border-box;
}

.cell-block-clear {
    vertical-align: top;
    display: inline-block;
    border-radius: 5px;
    height: 100%;
}

.cell-block-dark {
    vertical-align: top;
    display: inline-block;
    background: #dddddd;
    border-radius: 5px;
    height: 100%;
}

.cell-block-light {
    vertical-align: top;
    display: inline-block;
    background: #eeeeee;
    border-radius: 5px;
    height: 100%;
}