style.css

/* Closing brackets are formatted strangely
// IN VS CODE, A RULE LIKE THIS:
ul {
    padding: 0}
// COLLAPSES A RANGE LIKE THIS:
ul {⋯
// This is a line shorter than usual, so I prefer this :] */

@font-face {
   font-family: 'Zyzol';
   font-display: swap;
   src: url('Zyzol.otf')}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important} 
    li a:hover {
        font-size: 19px !important}}

@media (prefers-contrast: more) {
    html, body, a, input{color:#fffEFA!important}
    #youtube{color:#ff9C9C!important}
    #twitch{color:#cca7FF!important}
    #github{color:#a2bAD8!important}
    #patreon{color:#ffa06C!important}
    footer{color:#b8b8b8!important}}

@media (prefers-contrast: less) {
    html, body, a, input{color:#bab8B6!important}
    #youtube{color:#ff1919!important}
    #twitch{color:#9967e0!important}
    #github{color:#708196!important}
    #patreon{color:#e05002!important}
    footer{color:#818181!important}}

@keyframes wiggle {
    0% {transform: rotate(-15deg)} 
    to {transform: rotate(-13deg)}}

@keyframes scroll {
    0% {background-position: 0 0}
    to {background-position: 16px 16px}}

* {
    scrollbar-color:#454a4d #202324}

::-webkit-scrollbar {
    background-color:#202324;
    color:#aba499}
::-webkit-scrollbar-thumb {
    background-color:#454a4d}
::-webkit-scrollbar-thumb:hover {
    background-color:#575e62}
::-webkit-scrollbar-thumb:active {
    background-color:#484e51}

::selection, ::-moz-selection {
    background-color:#004daa;
    color:#e8e6e3}

html, input {
    background-color:#181a1b}

/* Cannot combine this pseudo-element with the previous rule
   because old browsers fail to parse this and skip it :( */
::-webkit-scrollbar-corner {
    background-color:#181a1b}

html {
    background-image: url('bg.gif')}

@supports (animation: a 0) {
    html {
        background-image: url('bg.png');
        animation: scroll 1s linear infinite}}

/* Disable scroll and zoom on iOS WebKit
By testing for -webkit-touch-callout, we can target iOS WebKit.
iOS 10 beta 1 overrides disabling pinch-to-zoom with user-scalable=no,
so we need to disable it with touch-action here.
I think disabling scroll and zoom makes the page feel pretty sleek on
modern iPhones at 100% zoom, but I still need to test old devices...
http://stackoverflow.com/a/47818418
http://stackoverflow.com/a/68278302 */
@supports (-webkit-touch-callout: none) {
    html {
        overflow: hidden;
        touch-action: none}}

html, body, a, input {
    border-color:#736b5e;
    color:#e8e6E3}

body {
    /* Explanation for font choices
    http://smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-b
    */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}

a {
    text-decoration: none}
a:hover {
    text-decoration: underline}

ul {
    padding: 0}

li {
    display: inline}
li a {
    font-family: 'Zyzol', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 19px;
    margin: 10px;
    transition: font-size 0.15s}
li a:hover {
    text-decoration: none;
    text-shadow: 2px 0 0 #FFF, -2px 0 0 #FFF, 0 2px 0 #FFF, 0 -2px 0 #FFF, 1px 1px #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF;
    font-size: 21px;
    transition: font-size 0.15s}

footer {
    font-size: small;
    color:#929292}

/* WARN: Some browsers support position: fixed but not @supports itself
http://github.com/Nightcaat/site/issues/9 */
@supports (position: fixed) {
    footer {
        position: fixed;
        bottom: 5px}}

#logo {
    font-family: 'Zyzol', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transform: rotate(-15deg);
    animation: wiggle 0.2s linear infinite alternate}

#youtube {
    color:#ff5858}
#twitch {
    color:#ae75FF}
#github {
    color:#8295AD}
#patreon {
    color:#ff5B02}

.box {
    background-color: #000;
    border: 1px solid #FFF;
    border-radius: 5px;
    margin: 10px;
    padding: 5px;
    width: 160px}
.box a:hover {
    text-decoration: none}

#mkwii-guide {
    background-color: #FFF;
    border: 1px solid #28aCF3}
#mkwii-guide a {
    color: #000 !important}
#flipnote-studio {
    background-color: #744000;
    border: 1px solid #f4d89F}
#marioroyalelegacy {
    background-color: #842f03;
    border: 1px solid #e2d800}