.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; }

.alwaysfont { font-family: serif; }

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;
}

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

#statuscafe {
    padding: .5em;
    border: 1px solid var(--accent-color);
    display: block;
    margin: 5px auto;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.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 {
    width: calc(81px * 1.1);
}
.buttonBig2 {
    width: calc(81px * 1.3);
}
@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); }
}

/**/

/* Two Column */
section.two {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: 1fr;

    grid-column-gap: 5px;

    margin-top: 5px;
    margin-bottom: 5px;
}
section.two div.split {
    background-color: var(--accent-color2);
}
@media all and (max-width: 775px) {
    section.two {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1px auto;
        grid-row-gap: 5px;
    }
}

/* Quotes */

figure {
	/*background: var(--accent-color2);*/
	color: #F8FFFF;
	text-align: center;
	border-radius: 50px;
	padding-top: 0px;
	margin: 10px auto;
    width: 80%;

    border: solid var(--accent-color2);
}
@media all and (max-width: 625px) {
    figure { width: 100%; }
}

figcaption {
	position: relative;
	top: -15px;
	font-size: .8em;
}
figcaption::before {
    content: '— ';
}

blockquote:before {
    content: "\201C";
	font-size: 1.8em;
	padding: 2px;
}

blockquote {
    position: relative;
    top: -10px;
	padding: 5px;
	font-size: 1.1em;
	line-height: normal;
}