.centered { display: block; margin: auto; }
.bordered { border: double #888; }
.imged { height: auto; max-width: 100%; min-width: 80%; }

html { scrollbar-color: #666 #000; }
::selection { background: #000000; color: #666; }
::-moz-selection { background: #000000; color: #666; }
::-webkit-scrollbar-track { background-color: #000; }
::-webkit-scrollbar-thumb { background-color: #666; }


ol { list-style-type: upper-roman; }
ul { list-style-type: "—"; } /* ◉ */

code {
    font-size: var(--font-size);
    font-family: var(--font-mono);
    background: #000000;
    padding: 3px 5px;
}

summary:hover { cursor: pointer; }
details {
    padding: 10px 5px;
}

table {
  border: 1px solid var(--accent-color);
  /* border-bottom: none; */
  margin: auto;
}
th, td {
  border: 1px solid var(--accent-color);
  border-top: none;
  border-left: none;
  border-bottom: none;
  margin: auto;
}
th { background: var(--accent-color); color: var(--back-color); font-weight: bold; }
td li { list-style-type: "◉ "; }

.outlined { border: double var(--back-color); }
.outlined:hover { border: double var(--accent-color); }

.buttons {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto auto auto auto auto;

    align-items: center;
    justify-content: center;

    grid-gap: 5px;
}
.button {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}
.button img, .buttons img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.buttonBig img {
    width: calc(81px * 1.5);
}
@media only screen and (max-width: 800px) {
  .buttons { grid-template-columns: auto auto auto; }
}


/**/
.scared {
    animation: an_shake .2s linear infinite;
}
.scaredhover:hover {
    animation: an_shake .2s linear infinite;
}

@keyframes an_shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/**/