nattopages/css/default.css

@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Quantico-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Oxygen.woff2') format('woff2');
}

@font-face {
  font-family: 'Monoid Bold';
  src: url('../fonts/Monoid-Bold.eot');
  src: url('../fonts/Monoid-Bold-iefix.eot') format('embedded-opentype'), 
  url('../fonts/Monoid-Bold.woff2') format('woff2'),
  url('../fonts/Monoid-Bold.woff') format('woff'),
  url('../fonts/Monoid-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


:root {
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
 	--magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;
  --fg0: #93a1a1;
  --fg1: #839496;
  --fg2: #657b83;
  --fg3: #586e75;
  --fg4: #073642;
  --fg5: #002b36;
  --bg0: #fdf6e3 ;
  --bg1: #eee8d5;
  --dark: #002b36;
  --light: #fdf6e3; 
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0: #073642;
    --bg1: #002b36;
    --fg5: #fdf6e3 ;
    --fg4: #eee8d5;
    --fg3: #93a1a1;
    --fg2: #839496;
    --fg1: #657b83;
    --fg0: #586e75;
  } 
}

html {
  font-size: 62.5%;
  background-color: var(--bg0);
  color: var(--fg2);
}

body {
  font-family: "Oxygen", sans-serif;
  font-size: 1.6rem;
  word-wrap: break-word;
}

h1, h2, h3 {
 color: var(--fg3);
}

header {
  border-bottom: 0.2rem solid var(--magenta);
  margin: 4.2rem 0;
}

main a, footer a {
  color: var(--blue);
}

main a:hover, footer a:hover{
  color: var(--light);
  background: var(--blue);
}

.subdomains li a:hover {
  background: none !important;
}

a {
  text-decoration: none;
  font-family: "Quantico", monospace;
}

a:hover {
  transition-duration: 0.1s;
}

nav {
  text-align: center;
  margin: 0 auto 3rem;
}

nav a {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--cyan);
  text-transform: uppercase;
  padding: 0.5rem;
}

nav a:hover {
  background: var(--cyan);
  color: var(--dark);
}

footer {
  margin-top: 3rem;
  padding: 1.2rem 0;
  border-top: 0.2rem solid var(--magenta);
  font-size: 1.2rem;
  color: var(--fg0);
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 2rem;
}

.post-preview-item {
 list-style-type: none;
 padding: 2rem;
 border: 0.5rem ridge var(--violet);
}

.post-preview-item:not(:last-child) {
  margin-bottom: 3rem;
}

.post-title {
  text-align: center;
  color: var(--fg5) !important;
}

article .post-header {
  font-size: 1.4rem;
  font-style: italic;
  color: var(--fg0);
}

.logo {
  text-align: center;
  margin: 1rem auto 3rem;
}

.logo a:hover {
  transform: rotate(180deg);
}

.logo a {
  font-weight: bold;
  font-family: "Monoid Bold", sans-serif;
  font-size: 3rem;
  color: var(--green);
  text-decoration: none;
}

article > section {
  overflow: auto;
}

.post-teaser > .toc {
  display: none;
}

code {
  font-family: 'Cascadia Code', sans-serif;
}

code {
  border-radius: 0.2rem;
  background: var(--bg1);
}

pre {
  padding: 2rem;
  border-radius: 1rem;
  background: var(--bg1);
  overflow: scroll;
}

.toc {
  background: var(--bg1);
  border-radius: 1rem;
  float: right;
  max-width: 40%;
}

@media (max-width: 319px) {
  body {
    width: 90%;
    margin: 0;
    padding: 0 5%;
  }
  footer {
    text-align: center;
  }
  nav a {
    display: block;
    line-height: 1.6;
  }
  .toc {
    padding: 1rem;
  }
}

@media (min-width: 320px) {
  body {
    width: 90%;
    margin: 0;
    padding: 0 5%;
  }
  footer {
    text-align: center;
  }
  nav a {
    display: inline;
    margin: 0 0.6rem;
  }
  .toc {
    padding: 1rem;
  }
}

@media (min-width: 640px) {
  body {
    width: 60%;
    margin: 0 auto;
    padding: 0;
  }
  nav a {
    margin: 0 0 0 1.2rem;
    display: inline;
  }
  footer {
    text-align: right;
  }
  .toc {
    padding: 2rem;
  }
}