/* nord theme */
:root {
  --color0: #2e3440;
  --color1: #3b4252;
  --color2: #434c5e;
  --color3: #4c566a;
  --color4: #d8dee9;
  --color5: #e5e9f0;
  --color6: #eceff4;
  --color7: #8fbcbb;
  --color8: #88c0d0;
  --color9: #81a1c1;
  --color10: #5e81ac;
  --color11: #bf616a;
  --color12: #d08770;
  --color13: #ebcb8b;
  --color14: #a3be8c;
  --color15: #b48ead;
}

.theme-light {
  --bg: var(--color5);
  --body-bg: var(--color4);
  --navitem-bg: var(--color10);
  --navitem-bg-hl: var(--color9);

  --fg: var(--color0);
  --fg-hl: var(--color3);

  --link: var(--color15);
  --link-hl: var(--color7);
  --navitem-link: var(--color7);
  --navitem-link-hl: var(--color6);

  --fg-acc1: var(--color11);
  --fg-acc2: var(--color12);
  --fg-acc3: var(--color13);
  --fg-acc4: var(--color14);
  --fg-acc5: var(--color15);

  --switch-bg: var(--color9);
  --switch-bg-hl: var(--color10);
  --switch-moon: var(--color10);
  --switch-sun: var(--color13);

  --code-border: var(--color3);
  --art-border: var(--color3);

  --pagenav-bg: var(--color1);
  --pagenav-bg-hl: var(--color2);
  --pagenav-link: var(--color8);
  --pagenav-link-hl: var(--color7);
}

.theme-dark {
  --bg: var(--color3);
  --body-bg: var(--color0);
  --navitem-bg: var(--color1);
  --navitem-bg-hl: var(--color2);

  --fg: var(--color4);
  --fg-hl: var(--color5);

  --link: var(--color15);
  --link-hl: var(--color10);
  --navitem-link: var(--color8);
  --navitem-link-hl: var(--color7);

  --fg-acc1: var(--color11);
  --fg-acc2: var(--color12);
  --fg-acc3: var(--color13);
  --fg-acc4: var(--color14);
  --fg-acc5: var(--color15);

  --switch-bg: var(--color1);
  --switch-bg-hl: var(--color2);
  --switch-moon: var(--color10);
  --switch-sun: var(--color13);

  --code-border: var(--color4);
  --art-border: var(--color4);

  --pagenav-bg: var(--color10);
  --pagenav-bg-hl: var(--color9);
  --pagenav-link: var(--color7);
  --pagenav-link-hl: var(--color6);
}

/* animations */
@keyframes mark-rainbow {
  0%{
    color: var(--color11);
  }
  20%{
    color: var(--color12);
  }
  40%{
    color: var(--color13);
  }
  60%{
    color: var(--color14);
  }
  80%{
    color: var(--color15);
  }
  100%{
    color: var(--color11);
  }
}

/* general */
a {
  color: var(--link);
}

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

h1 {
  color: var(--fg-acc1);
}

h2 {
  color: var(--fg-acc2);
}

h3 {
  color: var(--fg-acc3);
}

h4 {
  color: var(--fg-acc4);
}

h5 {
  color: var(--fg-acc5);
}

body {
  background: var(--bg);
  color: var(--fg);
}

main {
  background: var(--body-bg);
}

pre, code {
  border-radius: 5px;
  border: 1px solid var(--code-border);
}

/* nav bar */
body > header {
  background: var(--bg);
}

nav li {
  background: var(--navitem-bg);
}

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

nav li:hover {
  background: var(--navitem-bg-hl);
  color: var(--fg-hl);
}

nav li:hover > a {
  color: var(--navitem-link-hl);
}


/* footer */
body > footer {
  background: var(--bg);
}


/* image gallery (not really being used rn) */
div.gallery {
  border: 1px solid var(--fg-hl);
}

div.gallery:hover {
  border: var(--fg-acc5);
}


/* switch */
button.theme-switcher {
  background-color: var(--switch-bg);
}

button.theme-switcher:hover {
  background-color: var(--switch-bg-hl);
}

button.theme-switcher > .fa-moon,
button.theme-switcher > .fa-sun {
  color: transparent;
}

.theme-dark button.theme-switcher > .fa-moon {
  color: var(--switch-moon);
}

.theme-light button.theme-switcher > .fa-sun {
  color: var(--switch-sun);
}

/* art grid / art gallery */
div.art-grid img {
  border: 1px solid var(--art-border);
}

div.art-grid img:hover {
  border: 5px solid var(--art-border);
}

/* art nav / for now also page nav */
div.art-nav > span,
div.page-nav > span {
  background: var(--pagenav-bg);
}

div.art-nav > span > a,
div.page-nav > span > a {
  color: var(--pagenav-link);
}

div.art-nav > span:hover,
div.page-nav > span:hover {
  background: var(--pagenav-bg-hl);
}

div.art-nav > span:hover > a,
div.page-nav > span:hover > a {
  color: var(--pagenav-link-hl);
}