@font-face {
    font-family: '04b03';
    src: url('/static/04b_03.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: #0a0a0a;
    color: #c0c0c0;
    font-family: '04b03', monospace;
    font-size: 16px;
    image-rendering: pixelated;
}
h1 {
    color: #ffdd00;
    text-shadow: 2px 2px 0 #333;
}
.subtitle {
    color: #888;
    font-size: 12px;
}
@keyframes rainbow {
    0%   { color: rgb(80,80,255); }
    8.3% { color: rgb(252,1,4); }
    16.7%{ color: rgb(255,0,255); }
    25%  { color: rgb(0,255,0); }
    33.3%{ color: rgb(0,255,255); }
    41.7%{ color: rgb(255,255,0); }
    50%  { color: rgb(255,255,255); }
    58.3%{ color: rgb(255,255,0); }
    66.7%{ color: rgb(0,255,255); }
    75%  { color: rgb(0,255,0); }
    83.3%{ color: rgb(255,0,255); }
    91.7%{ color: rgb(252,1,4); }
    100% { color: rgb(80,80,255); }
}
.rainbow {
    animation: rainbow 2.4s linear infinite;
}
.btn {
    display: inline-block;
    font-family: '04b03', monospace;
    font-size: 16px;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #555;
    background: #1a1a1a;
    color: #c0c0c0;
    cursor: pointer;
    transition: border-color 0.2s;
}
.btn span {
    animation: rainbow 2.4s linear infinite;
}
.btn:hover {
    border-color: #ffdd00;
}
.btn:hover span {
    animation: rainbow 1.2s linear infinite reverse;
}
.btn:disabled {
    border-color: #333;
    cursor: default;
}
.btn:disabled span {
    animation: none;
    color: #555;
}