@font-face { font-family: 'Open Sans'; font-weight: 400; src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2"); }

@font-face { font-family: 'Open Sans'; font-style: italic; src: url("/assets/fonts/OpenSans-Italic.woff2") format("woff2"); }

@font-face { font-family: 'Open Sans'; font-weight: 600; src: url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2"); }

@font-face { font-family: 'Open Sans'; font-weight: 700; src: url("/assets/fonts/OpenSans-Bold.woff2") format("woff2"); }

@font-face { font-family: 'Cascadia Mono'; font-weight: 350 400; src: url("/assets/fonts/CascadiaMono.woff2") format("woff2"); }

:root { --fg: #4f4e4c; --fg: #582926; --bg: #fbf9f8; --bg: #f6e7d2; --bg: #f7efe7; --link: #0658ac; --link: #005fbb; --visited: #6248a0; }

*, *::before, *::after { box-sizing: border-box; }

html { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif; font-size: 16px; scroll-behavior: smooth; }

@media screen and (min-width: 1064px) { html { margin-left: calc(100vw - 100%); } }

body { margin: 0; color: var(--fg); display: flex; justify-content: center; background-color: var(--bg); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkAgMAAACnT7t7AAAACVBMVEX+nKfg0neXgtfdswHDAAAAIUlEQVR4Xu3HMREAAAgEIEta0pTem8AAsFGnY+Jzd3f3BUpq8hwkSDSSAAAAAElFTkSuQmCC"); background-position: calc(50% + 75px + 512px) top; background-repeat: repeat-y; }

@media screen and (max-width: 1294px) { body { background-image: none; } #base { position: relative; } #base::before, #base::after { content: ''; display: block; position: absolute; top: 0; right: 20px; width: 60px; height: 150px; } #base::before { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABkAgMAAACnT7t7AAAACVBMVEX+nKfg0neXgtfdswHDAAAAIUlEQVR4Xu3HMREAAAgEIEta0pTem8AAsFGnY+Jzd3f3BUpq8hwkSDSSAAAAAElFTkSuQmCC"); background-repeat: repeat-y; } #base::after { background-image: linear-gradient(to bottom, transparent, transparent 30%, var(--bg) 90%, var(--bg)); } #base > div > header { padding-right: 80px; } #header-border { margin-right: 80px; } }

#base { display: flex; flex-direction: column; justify-content: space-between; width: 1024px; max-width: 100%; min-height: 100vh; padding: 0 20px; }

#base > div > header { margin-top: 20px; }

#base > div > header .site-title { display: block; font-size: 1.75rem; font-weight: 400; letter-spacing: -2px; }

#base > div > header .site-title::first-letter { margin-left: -2px; }

#base > div > header p { font-size: 0.9rem; margin: 0.5em 0 1em; }

#base > footer { margin-top: 50px; padding: 10px 0; font-size: 0.8rem; text-align: center; border-top: 1px solid #bab8b6; }

#base > footer a:visited { color: var(--link); }

#header-border { border-bottom: 1px solid #92908e; }

h1, #posts a, h2, h3 { font-weight: 600; letter-spacing: -0.5px; margin: 0; }

* + h1, #posts * + a, * + h2, * + h3 { margin-top: 1.5em; }

h1, #posts a { font-size: 1.75rem; }

h2 { font-size: 1.55rem; }

h3 { font-size: 1.2rem; }

a { text-decoration: none; }

a:link { color: var(--link); }

a:visited { color: var(--visited); }

a.home { display: inline-block; margin: 30px 0 15px; }

a.home:visited { color: var(--link); }

article p { line-height: 1.5; }

article a { text-decoration: underline; }

code { font-family: "Cascadia Mono", ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; font-weight: 350; }

p > code { padding: 0 5px; background-color: #e3d9e8; border-radius: 3px; }

select { padding: 1px 5px; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif; font-size: 1rem; color: var(--fg); border: 1px solid var(--fg); border-radius: 5px; background-color: white; }

#posts { margin-top: 30px; }

#posts > section, main > article { margin: 0 0 30px; }

article > header, section > header { display: flex; justify-content: space-between; align-items: baseline; }

.image-comparison { display: flex; margin: 2.5rem 0; flex-direction: column; align-items: center; }

.image-comparison > .container { position: relative; overflow: hidden; }

.image-comparison img { display: block; max-width: calc(100vw - 40px); }

.image-comparison .overlay { position: absolute; top: 0; left: 0; overflow: hidden; width: 50%; }

.image-comparison .handle { width: 6px; height: 100%; position: absolute; top: 0; left: 50%; background: white; transform: translateX(-3px); cursor: col-resize; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }

.image-comparison .handle > button { width: 20px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border: none; background: white; cursor: col-resize; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }

.image-comparison .handle > button::before { content: ''; display: inline-block; border: 2px solid #404040; border-top: none; border-bottom: none; width: 8px; height: 20px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

.image-comparison > small { margin-top: 10px; }

.emulating-crt-visuals .screenshot-selector { margin-top: 1.5rem; }

.emulating-crt-visuals .screenshot-selector:focus { outline: 1px dotted black; outline-offset: -3px; }

.emulating-crt-visuals .screenshot-selector ~ .image-comparison { display: none; margin-top: 20px; }

.emulating-crt-visuals .screenshot-selector[data-value='chrono-trigger-1'] ~ .image-comparison.chrono-trigger-1, .emulating-crt-visuals .screenshot-selector[data-value='chrono-trigger-2'] ~ .image-comparison.chrono-trigger-2, .emulating-crt-visuals .screenshot-selector[data-value='donkey-kong-country'] ~ .image-comparison.donkey-kong-country, .emulating-crt-visuals .screenshot-selector[data-value='super-mario-world'] ~ .image-comparison.super-mario-world, .emulating-crt-visuals .screenshot-selector[data-value='super-metroid-1'] ~ .image-comparison.super-metroid-1, .emulating-crt-visuals .screenshot-selector[data-value='super-metroid-2'] ~ .image-comparison.super-metroid-2, .emulating-crt-visuals .screenshot-selector[data-value='secret-of-mana'] ~ .image-comparison.secret-of-mana, .emulating-crt-visuals .screenshot-selector[data-value='terranigma'] ~ .image-comparison.terranigma, .emulating-crt-visuals .screenshot-selector[data-value='alttp'] ~ .image-comparison.alttp { display: flex; }

/*# sourceMappingURL=style.css.map */