@import "reset.css";

/* Cattpuccin macchiatto colors */
@media (prefers-color-scheme: light) {
  :root {
    --ctp-rosewater: #dc8a78;
    --ctp-flamingo: #dd7878;
    --ctp-pink: #ea76cb;
    --ctp-mauve: #8839ef;
    --ctp-red: #d20f39;
    --ctp-maroon: #e64553;
    --ctp-peach: #fe640b;
    --ctp-yellow: #df8e1d;
    --ctp-green: #40a02b;
    --ctp-teal: #179299;
    --ctp-sky: #04a5e5;
    --ctp-sapphire: #209fb5;
    --ctp-blue: #1e66f5;
    --ctp-lavender: #7287fd;
    --ctp-text: #4c4f69;
    --ctp-subtext1: #5c5f77;
    --ctp-subtext0: #6c6f85;
    --ctp-overlay2: #7c7f93;
    --ctp-overlay1: #8c8fa1;
    --ctp-overlay0: #9ca0b0;
    --ctp-surface2: #acb0be;
    --ctp-surface1: #bcc0cc;
    --ctp-surface0: #ccd0da;
    --ctp-crust: #dce0e8;
    --ctp-mantle: #e6e9ef;
    --ctp-base: #eff1f5;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ctp-rosewater: #f4dbd6;
    --ctp-flamingo: #f0c6c6;
    --ctp-pink: #f5bde6;
    --ctp-mauve: #c6a0f6;
    --ctp-red: #ed8796;
    --ctp-maroon: #ee99a0;
    --ctp-peach: #f5a97f;
    --ctp-yellow: #eed49f;
    --ctp-green: #a6da95;
    --ctp-teal: #8bd5ca;
    --ctp-sky: #91d7e3;
    --ctp-sapphire: #7dc4e4;
    --ctp-blue: #8aadf4;
    --ctp-lavender: #b7bdf8;
    --ctp-text: #cad3f5;
    --ctp-subtext1: #b8c0e0;
    --ctp-subtext0: #a5adcb;
    --ctp-overlay2: #939ab7;
    --ctp-overlay1: #8087a2;
    --ctp-overlay0: #6e738d;
    --ctp-surface2: #5b6078;
    --ctp-surface1: #494d64;
    --ctp-surface0: #363a4f;
    --ctp-base: #24273a;
    --ctp-mantle: #1e2030;
    --ctp-crust: #181926;
  }
}

/* various tweaks to have a better and smoother experience */
html {
  scroll-behavior: smooth;
}

@view-transition {
  navigation: auto;
}

.rosewater {
  color: var(--ctp-rosewater);
}

.flamingo {
  color: var(--ctp-flamingo);
}

.pink {
  color: var(--ctp-pink);
}

.mauve {
  color: var(--ctp-mauve);
}

.red {
  color: var(--ctp-red);
}

.maroon {
  color: var(--ctp-maroon);
}

.peach {
  color: var(--ctp-peach);
}

.yellow {
  color: var(--ctp-yellow);
}

.green {
  color: var(--ctp-green);
}

.teal {
  color: var(--ctp-teal);
}

.sky {
  color: var(--ctp-sky);
}

.sapphire {
  color: var(--ctp-sapphire);
}

.blue {
  color: var(--ctp-blue);
}

.lavender {
  color: var(--ctp-lavender);
}

.text {
  color: var(--ctp-text);
}

.subtext1 {
  color: var(--ctp-subtext1);
}

.subtext0 {
  color: var(--ctp-subtext0);
}

.overlay2 {
  color: var(--ctp-overlay2);
}

.overlay1 {
  color: var(--ctp-overlay1);
}

.overlay0 {
  color: var(--ctp-overlay0);
}

.surface2 {
  color: var(--ctp-surface2);
}

.surface1 {
  color: var(--ctp-surface1);
}

.surface0 {
  color: var(--ctp-surface0);
}

.base {
  color: var(--ctp-base);
}

.mantle {
  color: var(--ctp-mantle);
}

.crust {
  color: var(--ctp-crust);
}

/* Main CSS. */

body {
  background-color: var(--ctp-mantle);
  color: var(--ctp-text);
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: serif;
  line-height: 1.5em;
}

body > div {
  background-color: var(--ctp-base);
}

nav {
  display: table;
  height: 3.5em;
  width: 100%;
  background-color: var(--ctp-mantle);
}

nav a {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 1.1em;
}

a {
  color: var(--ctp-red);
  text-decoration: none;
}

a:hover {
  color: var(--ctp-peach);
  text-decoration: underline;
  cursor: pointer;
}

hr {
  background-color: var(--ctp-surface0);
  height: 1px;
  border: none;
  margin-top: 2em;
  margin-bottom: 0;
  width: 75%;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;
  margin-bottom: 0;
  font-weight: 300;
  line-height: 1em;
}

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

h1 {
  font-size: 2.2em;
  color: var(--ctp-mauve);
}

h2 {
  font-size: 1.8em;
  color: var(--ctp-blue);
}

h3 {
  font-size: 1.6em;
  color: var(--ctp-teal);
}

h4 {
  font-size: 1.2em;
  color: var(--ctp-lavender);
}

h5 {
  font-size: 0.8em;
  color: var(--ctp-rosewater);
}

.article-bottom {
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  text-align: center;
}

.article-bottom * {
  flex-grow: 1;
}

footer {
  width: 100%;
  height: 12em;
  background-color: var(--ctp-mantle);
  text-align: center;
  display: table;
}

footer #footer-content {
  display: table-cell;
  vertical-align: middle;
}

footer #footer-content div {
  margin: 1em;
}

footer a {
  margin: 1.2em;
}

.content {
  position: relative;
  width: 30%;
  left: 35%;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: large;
}

@media (orientation: portrait) {
  .content {
    width: 90%;
    left: 5%;
  }
}

.content pre {
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: var(--ctp-surface0);
  border-left: solid var(--ctp-green) 4px;
  padding: 0.5em 1.5em 0.5em 1.5em;
  margin-left: 1em;
  margin-right: 1em;
}

code {
  color: var(--ctp-green);
  background-color: var(--ctp-surface0);
  font-family: "JetBrains Mono", sans-serif;
  font-weight: 300;
}

img {
  display: block;
  margin: auto;
}

.article-preview:first-child {
  margin-top: 2em;
}

.article-preview:nth-child(2n) {
  background-color: var(--ctp-surface0);
}

.article-preview:nth-child(2n+1) {
  background-color: var(--ctp-mantle);
}

.article-preview {
  display: flex;
  flex-direction: row;
  padding: 0.25em;
  border-left: solid 2px var(--ctp-mauve);
}

.article-preview a {
  flex-grow: 1;
}

.article-preview:hover {
  background-color: var(--ctp-mauve);
}

.article-preview:hover a {
  color: var(--ctp-base);
  text-decoration: underline;
}

.article-preview:hover em {
  color: var(--ctp-base);
  text-decoration: underline;
}

.article-preview em {
  flex-shrink: 1;
  text-align: right;
}

.browse-content ul {
  margin: 0 0 40px 0;
  padding: 0;
  list-style-type: none;
}

.browse-content ul li {
  margin: 0 0 0 0;
  padding: 5px 0 5px 20px;
}

#browse-images h3 {
  color: #DB6123;
}

#browse-images .browse-content-item-even {
  background-color: #E97355;
}

#browse-images .browse-content-item-odd {
  background-color: #E9937C;
}

#browse-images ul li:hover {
  background-color: #D24520;
}

#browse-executables h3 {
  color: #DB2323;
}

#browse-executables .browse-content-item-even {
  background-color: #E6545E;
}

#browse-executables .browse-content-item-odd {
  background-color: #E67B82;
}

#browse-executables ul li:hover {
  background-color: #CD1F2C;
}

#browse-videos h3 {
  color: #B1186B;
}

#browse-videos .browse-content-item-even {
  background-color: #D24CA0;
}

#browse-videos .browse-content-item-odd {
  background-color: #D270AD;
}

#browse-videos ul li:hover {
  background-color: #A41970;
}

#browse-archives h3 {
  color: #80168F;
}

#browse-archives .browse-content-item-even {
  background-color: #9350C6;
}

#browse-archives .browse-content-item-odd {
  background-color: #A170C6;
}

#browse-archives ul li:hover {
  background-color: #5D1D8D;
}

#browse-audios h3 {
  color: #1D518F;
}

#browse-audios .browse-content-item-even {
  background-color: #4E85C3;
}

#browse-audios .browse-content-item-odd {
  background-color: #6DA1C3;
}

#browse-audios ul li:hover {
  background-color: #1B5C87;
}

#browse-texts h3 {
  color: #8CCB1B;
}

#browse-texts .browse-content-item-even {
  background-color: #AEE152;
}

#browse-texts .browse-content-item-odd {
  background-color: #BCE178;
}

#browse-texts ul li:hover {
  background-color: #88C31D;
}

#browse-papers h3 {
  color: #DBDB1D;
}

#browse-papers .browse-content-item-even {
  background-color: #DEE754;
}

#browse-papers .browse-content-item-odd {
  background-color: #E1E77B;
}

#browse-papers ul li:hover {
  background-color: #C5D01F;
}

#browse-unknown h3 {
  color: #AAAAAA;
}

#browse-unknown .browse-content-item-even {
  background-color: #DDDDDD;
}

#browse-unknown .browse-content-item-odd {
  background-color: #EEEEEE;
}

#browse-unknown ul li:hover {
  background-color: #888888;
}

.browse-content ul li a {
  color: #333333;
}

.browse-content ul li:hover {
  padding-left: 25px;
}

.browse-content ul li:hover a {
  color: #EEEEEE;
}