@font-face {
    font-family: FixedSYS;
    src: url("/assets/fonts/fixedsys.ttf");
}
@font-face {
    font-family: "minecraft enchantment";
    src: url("/assets/fonts/minecraft-enchantment.ttf");
    unicode-range: U+0041-005A;
}

p {
    margin: 0px;
}

a {color: #0F0;}

html, body {
    cursor: url("./assets/img/cursor.png"), auto;
    height:stretch;
    margin: 0px 8px;
}

body {
    font-family: "FixedSYS", monospace;
    color: #0F0;
    background: #000;
    height: 100%;
    width: stretch;
}

div#title_div {
    white-space: pre;
}

div#title_div[glow] {
    text-shadow: 0px 0px 8px #0f0, 0px 0px 18px #0f0;
}

noglow {
    text-shadow: 0px 0px 0px #0000 !important;
    a {color: #0F0;}
}

@keyframes flash {
  0% { opacity: 0; }
  49.99% { opacity: 0;}
  50% { opacity: 1;}
  99.99% { opacity: 1; }
  100% { opacity: 0; }
}

div#main, div#button_position, div#choose, div#operation  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-content: center;
    max-width: 2070px;
}

div#choose[on], div#operation[on] {
    border-bottom: 3px #0f0 solid;
    margin-bottom: 10px;
}

div#button_position {
    flex-direction: row;
}

cur {
    animation: flash .5s infinite;
}

blue {
    color: #00F;
}

grn {
    color: #19cc6d;
}
white {
    color: #FFF;
}
yellow {
    color: #FF0;
}
yellow#alert {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
gold {
    color: rgb(255, 191, 0);
}
orange {
    color: rgb(255, 127, 0);
}
red {
    color: rgb(255, 0, 0);
}
::selection {
    background: #00ff00;
    color: black;
}

::-moz-selection {
    background: #00ff00;
    color: black;
}

textarea, .output-box {
    cursor: url("./assets/img/cur_text.png") 9 13, text;
    font-size: 1em;
    width: 640px !important;
    height: 240px !important;
    margin: 20px;
    border: #00ff00 5px solid;
    background: black;
    color: #00ff00;
    font-family: 'FixedSYS', monospace;
    outline: none;
    resize: none;
    overflow-wrap: break-word;
    word-break: break-all;
    overflow: auto;
    white-space: pre-line;
}

button {
    /*
    margin: 20px;
    padding: 15px;*/
    border: #00ff0000 5px solid;
    background: #030;
    color: #00ff00;
    font-family: 'FixedSYS', monospace;
    margin: 5px;
}
button:hover {/*
    border: #000000 5px solid;
    outline: #0F0 solid;*/
    background: #0f0;
    color: #000;
    cursor: url("./assets/img/cur_pointer.png") 7 1, pointer;
}
button:active {
    background: #000;
    color: #0f0;
}

textarea::placeholder {
    color: #007f00;
}

#key {
    height: 1.5em !important;
}

#current_selection, p.center {
    text-align: center;
}

p#info {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
}

.navigation {
    position: absolute;
    right: 10px;
    top: 20px;

    a {
        border: #00ff0000 5px solid;
        background: #030;
        color: #00ff00;
        font-family: 'FixedSYS', monospace;
        margin: 5px;
        padding: 8px;
        top: 5px;
    }
    a:hover {
        background: #0f0;
        color: #000;
        cursor: url("./assets/img/cur_pointer.png") 7 1, pointer;
    }
    a:active {
        background: #000;
        color: #0f0;
    }
}

.sga-text {
    color: transparent;
    font-family: "minecraft enchantment", FixedSYS;
    font-size: 0;
}
.sga-text::after {
    content: attr(data-display-text);
    color: #0f0;
    font-size: 16px;
}
.unicode-tag-invisible::before {
  content: attr(data-display-text);
  opacity: 0.556;
  font-size: small;
}

code {
    border-radius: 4px;
    padding: 2px 4px;
}
pre, code, .mw-code {
    background-color: var(--background-color-neutral-subtle, #007a00);
    color: var(--color-emphasized, #0f0);
    border: 1px solid var(--border-color-muted, #0f0);
}

#desc {
    text-align: center;
    padding-top: 30px;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: auto;
    white-space: pre-line;
}

@media (max-aspect-ratio: 1080/720) {
    canvas {
        height: 100vh;
        width: unset;
    }
}
@media (min-aspect-ratio: 1080/720) {
    canvas {
        height: unset;
        width: 100vw;
    }
}

div.canvas-wrapper {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -50;
    filter: brightness(0.4);
}

#music {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

@media (max-width: 540px) {
    noglow {
        position: absolute;
        right: 25px;
    }
    
    #title_div {
        margin: 30px 0px;
    }

    #info {
        position: fixed !important;
        top: 50vh !important;
        -webkit-text-stroke: #000;
    }
}