/* ===============================
Fonts
=============================== */
@font-face {
  font-family: "Rose Tinted";
  src: url("/assets/fonts/Rose-Tinted_Regular_v1.0.woff2");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Rose Tinted";
  src: url("/assets/fonts/Rose-Tinted_Italic_v1.0.woff2");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: "Rose Tinted";
  src: url("/assets/fonts/Rose-Tinted_Bold_v1.0.woff2");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: "Rose Tinted";
  src: url("/assets/fonts/Rose-Tinted_BoldItalic_v1.0.woff2");
  font-weight: bold;
  font-style: italic; }
/* ===============================
Base
=============================== */
html, body {
  height: 100%;
  margin: 0; }

html {
  background: #0c042a;
  scrollbar-color: #aa7cff #0c042a;
  overflow-y: scroll; }

body {
  color: #ffffff;
  font-family: "Rose Tinted";
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: break-word; }

body[a="light"] {
  filter: invert(1); }

body[a="light"] img {
  filter: invert(1); }

body[a="light"] img.ioda {
  filter: invert(0); }

.home-body {
  text-align: center; }

@media (prefers-color-scheme: light) {
  body[a="light"] {
    filter: invert(1); }

  body[a="light"] img {
    filter: invert(1); }

  body[a="light"] img.ioda {
    filter: invert(0); } }
/* ===============================
Layout (Flex for sticky footer)
=============================== */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.page-content {
  flex: 1;
  /* main content expands to fill available space */ }

/* ===============================
Header & Navigation
=============================== */
header {
  text-align: center; }

a.site-title-link {
  color: #ffffff;
  text-align: center; }

a.site-title-link:visited {
  color: #ffffff; }

a.site-title-link {
  text-decoration: none;
  display: inline-block; }

a.site-title-link:hover {
  color: #aa7cff;
  text-decoration: none;
  background: transparent; }

nav {
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-decoration: none; }

nav a {
  background-color: #000000;
  border: 5px solid #ffffff;
  color: #ffffff;
  padding: 10px 15px;
  text-decoration: none; }

nav a:visited {
  color: #ffffff; }

nav a:not(:first-child) {
  margin-left: -5px; }

nav a:hover, nav a:focus, nav a.active {
  background-color: #0c042a;
  border-color: #aa7cff;
  color: #aa7cff;
  text-decoration: none;
  z-index: 3; }

/* ===============================
Footer
=============================== */
.sticky-footer {
  text-align: center;
  margin-top: auto;
  /* push footer to bottom */
  padding: 1rem 0; }

a.foot-link {
  color: #ffffff !important;
  text-decoration: none !important; }

a.foot-link:hover {
  color: #aa7cff !important;
  background: transparent !important; }

a.foot-link:visited {
  color: #ffffff !important; }

.button-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  image-rendering: pixelated; }

.button-grid img {
  border: none;
  width: 88px;
  height: 31px; }

.button-grid.oomf-buttons {
  padding-bottom: 43px; }

/* ===============================
Utilities
=============================== */
.w {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem; }

.back {
  color: #aa7cff;
  text-decoration: none; }

.back:hover {
  cursor: pointer; }

hr {
  text-align: center;
  border: 0; }

hr:before {
  content: "/////"; }

hr:after {
  content: attr(data-content) "/////"; }

/* ===============================
Typography
=============================== */
h2, h3, h4, h5, h6 {
  margin-top: 3rem; }

p {
  margin: 1rem 0; }

li {
  margin: 0.4rem 0; }

/* ===============================
Links
=============================== */
a:link {
  color: #aa7cff;
  text-decoration: none; }

a:visited {
  color: #aa7cff; }

a:hover {
  background: #aa7cff;
  color: #0c042a;
  text-decoration: none; }

/* ===============================
Tables
=============================== */
table {
  width: 100%;
  border-collapse: collapse; }

table th, table td {
  background: #000000;
  border: 5px solid #ffffff;
  padding: 10px 15px; }

/* ===============================
Blockquotes
=============================== */
blockquote {
  background: #000000;
  font-style: italic;
  border: 5px solid #ffffff;
  padding: 1rem; }

blockquote p {
  margin: 0; }

/* ===============================
Images
=============================== */
img {
  max-width: 100%;
  display: block;
  margin: 0 auto; }

/* ===============================
Selection
=============================== */
::selection {
  background-color: #663EFA;
  color: #ffffff; }

/* ===============================
Code
=============================== */
code {
  background: #000;
  color: silver;
  padding: 5px 5px;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.95em; }

code::selection {
  background: #383838;
  color: silver; }