@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/e3t4euO8T-267oIAQAu6jDQyK0nS.ttf) format('truetype');
}
body    {
   background:  #2a3343;
}
a {
    color: #fff;
}
body, h1    {
    font-family: 'Press Start 2P', cursive;
}
h1  {
    margin-top: 20px;
    color: #fff;
}
#matrix_container   {
    display: flex;
}
#matrix {
    background: #000000;
    padding: 10px;
    /*width: calc( 8*64px );*/
    /*height: calc( 8*64px);*/
    margin: 0 20px 0 0;
}
#matrix > div {
    display: flex;
    height: 8px;
}
#matrix > div > i.loading   {
    background: #fff!important;
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
#matrix > div > i {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.25);
    display: block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    background: #000;
}
#matrix.emulation > div > i {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid rgb(0, 0, 0);
    display: block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    box-shadow: inset 0px 0px 0px 1px rgb(0, 0, 0);
    border-radius: 50%;
}

#matrix > div > i:hover {
    border: 1px solid rgba(255,255,255,0.75);
}

#brushes   {
    display: flex;
    width: 100px;
    justify-content: space-between;
}

#brushes > div   {
    cursor: pointer;
    width: 33px;
    height: 33px;
    padding: 1px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid rgba(255,255,255,0);
}
#brushes > div > div    {
    display: flex;
}
#brushes > div > div > div    {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.25);
    width: 10px;
    height: 10px;
}

#brushes > div.brush.set   {
    border: 1px solid rgba(255,255,255,1);
}
#brushes > div > div > div.set    {
    background: #fff;
}

#datenschutz    {
    display: none;
}
#datenschutz, #datenschutz * {
    color: #fff;
    font-family: sans-serif;
}
#datenschutz.show    {
    display: block;
}
#emu    {
    color: #fff;
    text-align: center;
    margin-top: 20px;
}
#cheat  {
    ont-size: 0.7em;
    margin-top: 20px;
    display: block;
    color: rgba(255,255,255,0.25);
}