/* ========================= */
/*     GLOBAL COLOR THEME   */
/* ========================= */
:root {
  /* ========================= */
  /*   CATPPUCCIN MACCHIATO    */
  /*   Full Color Palette      */
  /* ========================= */

  /* Base Colors */
  --ctp-base:        #24273a;
  --ctp-mantle:      #1e2030;
  --ctp-crust:       #181926;

  /* Text and UI */
  --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;

  /* Accent Colors */
  --ctp-blue:        #8aadf4;
  --ctp-lavender:    #b7bdf8;
  --ctp-sapphire:    #7dc4e4;
  --ctp-sky:         #91d7e3;
  --ctp-teal:        #8bd5ca;
  --ctp-green:       #a6da95;
  --ctp-yellow:      #eed49f;
  --ctp-peach:       #f5a97f;
  --ctp-maroon:      #ee99a0;
  --ctp-red:         #ed8796;
  --ctp-mauve:       #c6a0f6;
  --ctp-pink:        #f5bde6;
  --ctp-flamingo:    #f0c6c6;
  --ctp-rosewater:   #f4dbd6;

  /* Aliases used throughout the file */
  --ctp-bg:          var(--ctp-base);
  --ctp-accent:      var(--ctp-rosewater);
  --ctp-header:      var(--ctp-lavender);
  --ctp-box:         var(--ctp-mantle);
  --ctp-nav:         var(--ctp-crust);
}

/* ========================= */
/*        TYPOGRAPHY        */
/* ========================= */
body {
  font-family: "Vollkorn", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei Light", Roboto, Inter, sans-serif;
  margin: 0;
  background-color: var(--ctp-bg);
  color: var(--ctp-text);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ========================= */
/*         HEADER AREA       */
/* ========================= */
#header {
  width: 100%;
  height: 200px;
  background-color: var(--ctp-header);
  background-size: cover;
  background-image: none;
}

/* ========================= */
/*         NAVBAR            */
/* ========================= */
#navbar {
  height: 40px;
  background-color: var(--ctp-nav);
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei Light", Roboto, Inter, sans-serif;
  color: var(--ctp-accent);
  font-weight: 600;
}

/* ========================= */
/*         LAYOUT            */
/* ========================= */
#container {
  max-width: 960px;
  margin: 0 auto;
}

aside, #rightSidebar {
  background-color: var(--ctp-box);
  width: 200px;
  padding: 20px;
  font-size: 0.9em;
}

#rightSidebar {
  margin-left: 10px;
  order: 3;
}

/* ========================= */
/*       MAIN CONTENT        */
/* ========================= */
main {
  background-color: var(--ctp-box);
  flex: 1;
  padding: 20px;
  order: 2;
}

/* ========================= */
/*         LINKS             */
/* ========================= */
a {
  color: var(--ctp-accent);
  font-weight: bold;
  text-decoration: none;
}

/* ========================= */
/*       HEADINGS & TEXT     */
/* ========================= */
h1, h2, h3 {
  font-family: "Nunito Sans", sans-serif;
  color: var(--ctp-header);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* ========================= */
/*         BOXES             */
/* ========================= */
.box {
  background-color: #1e1e2e;
  border: 1px solid var(--ctp-accent);
  padding: 10px;
}

/* ========================= */
/*         FOOTER            */
/* ========================= */
footer {
  background-color: var(--ctp-nav);
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}

/* ========================= */
/*      CODE & BLOCKQUOTES   */
/* ========================= */
pre, code {
  font-family: "JetBrains Mono", monospace;
  background-color: #1e1e2e;
  color: #f4dbd6;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

blockquote {
  border-left: 4px solid var(--ctp-accent);
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #1e2030;
  font-style: italic;
}

/* ========================= */
/*      RESPONSIVE LAYOUT    */
/* ========================= */
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside, #rightSidebar {
    width: 100%;
  }

  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}