/**
 * Created by KiranWells
 * https://github.com/KiranWells
 */

 :root, :root.dark {
  /* Default Colors from the nord theme */
  /* https://nordtheme.com/ */
  --fg: #d8dee9;
  --h1: #d8dee9;
  --h2: #d8dee9;
  --bg: #2e3440;
  --bg-dark: #1f2228;
  --ac: #5e81ac;
  --al: #81a1c1;
  --hl: #8fbcbb;
}

:root.light {
  /* Colors from the nord theme */
  /* https://nordtheme.com/ */
  --fg: #2e3440;
  --h1: #2e3440;
  --h2: #2e3440;
  --bg: #eceff4;
  --bg-dark: #d8dee9;
  --ac: #5e81ac;
  --al: #81a1c1;
  --hl: #b48ead;
}

:root.monotone {
  --fg: black;
  --h1: black;
  --h2: black;
  --bg: white;
  --bg-dark: white;
  --ac: gray;
  --al: gray;
  --hl: gray;
}

:root.tropical {
  /* Colors custom generated */
  --fg: #c4c5c5;
  --h1: #bb3408;
  --h2: #dc710a;
  --bg: #242828;
  --bg-dark: #141818;
  --ac: #117a67;
  --al: #83a378;
  --hl: #d89d17;
}

:root.summer {
  /* Colors custom generated */
  --fg: #c5c4c4;
  --h1: #753516;
  --h2: #82662e;
  --bg: #181616;
  --bg-dark: #121010;
  --ac: #435e6c;
  --al: #3b4754;
  --hl: #425f2e;
  --tp: #6d7166;
}

:root.hyperlight {
  /* Colors custom generated */
  --fg: #d5e0d5;
  --h1: #a54d47;
  --h2: #5b8837;
  --bg: #272423;
  --bg-dark: #171413;
  --ac: #496a7c;
  --al: #955066;
  --hl: #e39743;
  --tp: #47c0b8;
}

:root.gruvbox {
  /* Colors from the gruvbox theme: https://github.com/morhetz/gruvbox */
  --fg: #fbf1c7;
  --h1: #d65d0e;
  --h2: #98971a;
  --bg: #32302f;
  --bg-dark: #282828;
  --ac: #458588;
  --al: #b16286;
  --hl: #d79921;
  --tp: #689d6a;
}

:root.everforest {
  /* Colors from the everforest theme: https://github.com/sainnhe/everforest */
  --fg: #d3c6aa;
  --h1: #e67e80;
  --h2: #dbbc7f;
  --bg: #323d43;
  --bg-dark: #2b3339;
  --ac: #a7c080;
  --al: #7fbbb3;
  --hl: #83c092;
  --tp: #d699b6;
}

:root.ayu {
  /* Colors from the ayu theme: https://github.com/dexpota/kitty-themes/blob/master/themes/ayu_mirage.conf */
  --fg: #d9d7ce;
  --h1: #fad07b;
  --h2: #bae67e;
  --bg: #212733;
  --bg-dark: #191e2a;
  --ac: #ffcc66;
  --al: #ed8274;
  --hl: #6dcbfa;
  --tp: #cfbafa;
}

::selection {
  background-color: var(--ac);
  color: var(--bg);
}

a::selection {
  background-color: var(--ac);
  color: var(--fg);
}

body {
  background: var(--bg-dark, #1f2228);
  color: var(--fg, #d8dee9);
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

body:not(.loaded) {
  color: var(--bg-dark, #1f2228);
}

body:not(.loaded)::before {
  color: var(--fg, #d8dee9);
  content: "Loading...";
  width: 100vw;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 50%;
}

main {
  box-sizing: border-box;
  width: 84vw;
  max-width: 50em;
  background: var(--bg, #3b4252);
  box-shadow: 2px 2px 4px 4px #0005;
  padding: 2em;
}

/* h1:hover::before, */
h2:hover::before,
h3:hover::before,
h4:hover::before,
h5:hover::before,
h6:hover::before 
{
  content: "COPY LINK";
  text-align: center;
  position: absolute;
  transform: rotate(-90deg) translate(-2.5em, -3em);
  font-size: 0.3em;
  width: 1em;
  height: 1em;
}

.notify {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 3em;
  padding: 1em;
  background-color: var(--bg, #3b4252);
  border-left: .3em solid var(--ac, #5e81ac);
  transition: 1s;
  box-shadow: 2px 2px 4px 2px #0004;
}

h1 {
  color: var(--h1, #d8dee9);
  width: 60%;
  font-variant: small-caps;
  margin: auto;
  text-align: center;
  border-bottom: 4px double var(--fg, #e5e9f0);
}

h2 {
  color: var(--h2, #d8dee9);
  border-bottom: 1px solid var(--fg, #e5e9f0);
}

img {
  margin: auto;
  display: flex;
}

footer {
  width: 100%;
  border-top: 1px solid var(--fg, #e5e9f0);
  margin-top: 1em;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

aside {
  font-style: italic;
  font-size: smaller;
}

blockquote {
  background: var(--bg-dark);
  border-left: .5em solid var(--ac) !important;
  padding-right: .5em;
  border: none;
}

.caption {
  font-style: italic;
  font-size: smaller;
  text-align: center;
  width: 100%;
}

h1+aside {
  text-align: center;
}

summary {
  color: var(--hl, #8fbcbb);
  margin-left: -2em;
}

details {
  margin: 1em 0 1em 2em;
}

.disclaimer {
  width: 80%;
  font-size: small;
}

.disclaimer::after {
  clear: both;
}

.links {
  margin: 1em;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.links>a {
  display: block;
  margin: 0 1em;
}

.themetoggle {
  position: fixed;
  margin: 1em;
  right:0;
  top:0;
  background-color: var(--bg, #2e3440);
  color: var(--fg, #eceff4);
  /* border-radius: .3em; */
  /* padding: .3em .4em .2em .4em; */
  box-shadow: 2px 2px 4px 2px #0004;
  padding: .5em;
  border-left: 4px solid var(--ac, #5e81ac);
  width: 5em;
  text-align: center;
  transition: right 0.5s ease;
}

.themelist {
  display: none;
  position: absolute;
  top: 100%;
  /* right: 0; */
  width: 5em;
  margin: 0em;
  /* border-radius: .3em; */
  background-color: var(--bg, #2e3440);
  box-shadow: 2px 2px 4px 2px #0004;
}

.themetoggle:hover .themelist {
  display: block;
}

.themeitem {
  white-space: pre;
  border: none;
  width: 100%;
  text-align: center;
  padding: .4em .75em;
  border-radius: .3em;
  background-color: var(--bg, #2e3440);
  color: var(--fg, #eceff4);
  font-size: small;
  font-family: inherit;
  font-weight: lighter;
}

.themeitem:hover {
  background-color: var(--bg-dark, #1f2228);
}

a:link {
  color: var(--ac, #5e81ac) !important;
}

a:visited {
  color:var(--al, #81a1c1) !important;
}

@media screen and (max-width: 950px) {
  body {
    padding: 0;
    margin: 0;
  }

  main {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }

  .themetoggle {
    right: -5.75em;
  }
  .themetoggle:hover, .themetoggle:active {
    right: 0;
  }
}

@media print {
  body {
    padding: 0;
    margin: 0;
    --fg: black;
    --h1: black;
    --h2: black;
    --bg: white;
    --bg-dark: white;
    --ac: gray;
    --al: gray;
    --hl: gray;
  }

  main {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }

  footer {
    display: none;
  }

  [class^=theme] {
    display: none;
  }
}