@font-face {
    font-family: "VT323";
    src: url("fonts/vt323.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

#retro-mode-toggle {
    display: block;
    width: max-content;
    margin: 0 auto 1.25em;
    padding: 0.3em 0.55em;
    color: #555;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 2px;
    font: 12px sans-serif;
    cursor: pointer;
}

.header h2 {
    margin-bottom: 0.2em;
}

.header {
    padding-top: 1.25em;
}

.header h1 {
    margin-top: 0;
}

#retro-mode-toggle:hover,
#retro-mode-toggle:focus {
    color: #111;
    background: #eee;
}

.retro-header-sprite {
    display: none;
}

#main > .content:last-child .pure-menu {
    text-align: center;
}

body.retro-mode {
    background: #080705;
    color: #e59a18;
    font-family: "VT323", monospace;
    font-size: 21px;
}

body.retro-mode .header {
    color: #ffb52e;
    border-bottom-color: #4a2c05;
}

body.retro-mode .header h1 {
    color: #ffb52e;
    font-size: 3.4em;
    font-weight: 400;
    text-shadow: 0 0 8px rgba(255, 152, 0, 0.28);
}

body.retro-mode .header h2,
body.retro-mode .content-subhead {
    color: #b86f0b;
    font-weight: 400;
}

body.retro-mode .header h2 {
    display: inline-block;
    vertical-align: middle;
}

body.retro-mode .content > h2 {
    color: #ffb52e;
    font-weight: 400;
}

body.retro-mode p {
    color: #ffc45c;
    font-family: "VT323", monospace;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.retro-mode a {
    color: #ffd36a;
}

body.retro-mode a:hover,
body.retro-mode a:focus {
    color: #080705;
    background: #ffb52e;
}

body.retro-mode .content img {
    max-width: 100%;
    height: auto;
    border: 1px solid #7d4b08;
}

body.retro-mode .pure-menu a {
    color: #ffb52e;
}

body.retro-mode #main > .content:last-child,
body.retro-mode #main > .content:last-child .pure-menu,
body.retro-mode #main > .content:last-child .pure-menu ul {
    background: #080705;
}

body.retro-mode #main > .content:last-child .pure-menu a:hover,
body.retro-mode #main > .content:last-child .pure-menu a:focus {
    color: #080705;
    background: #d98912;
    background-image: none;
}

body.retro-mode .pure-menu.pure-menu-horizontal,
body.retro-mode .pure-menu.pure-menu-horizontal .pure-menu-heading {
    border-color: #4a2c05;
}

body.retro-mode #retro-mode-toggle {
    color: #ffb52e;
    background: #080705;
    border-color: #d98912;
    border-radius: 0;
    font-family: "VT323", monospace;
    font-size: 15px;
}

body.retro-mode .content img.retro-header-sprite {
    display: inline-block;
    width: auto;
    height: 48px;
    margin: 0 0.35em 0.2em 0;
    border: 0;
    vertical-align: middle;
    image-rendering: pixelated;
}

body.retro-mode #retro-mode-toggle:hover,
body.retro-mode #retro-mode-toggle:focus {
    color: #080705;
    background: #d98912;
}

body.retro-mode ::selection {
    color: #080705;
    background: #ffb52e;
}