/* Variables */
:root {
  /* Colors */
  --black: #4B4A3F;
  --white: #D7D2B8;
  --gray: #B3AE99;
  --blank: #E9E9E9;

  /* Text colors */
  --error: #BE7F74;
  --warn: #C0B496;
  --warn-alt: #E6DDAF;
  --link: #003A6B;
  --link-hover: #477698;

  /* Shadow colors */
  --shadow: rgba(75, 74, 63, .6);
  --shadow-light: rgba(75, 74, 63, .2);

  /* Background */
  --background: #CBC7AF;
  --background-loader: #000;
  --background-code: #1a1b26;
  --background-code-inline: #CBC7AE;

  /* Text size */
  --font-small: .7rem;
  --font-tall: 1.3rem;
  --font-taller: 1.6rem;
  --font-tallest: 2.4rem;
  --font-tag: .9rem;

  /* Icon sizes */
  --icon-size:  16px;
  --icon-tag-size: 12px;
  --icon-button-size: 22px;

  /* Border sizes */
  --border-thin: 1px;
  --border-normal: 2px;
  --border-thick: 3px;
  --border-xxthick: 8px;
  --border-xxxthick: 16px;

  /* Spacing */
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 24px;
  --spacing-8: 28px;
  --spacing-9: 32px;

  /* Animations */
  --button-select-animation: .5s;
  --button-flash-animation: 2s;
  --loading-bar-animation: .1;
  --translation-animation: .4s;
  --frame-wrapper-animation: .4s;
  --card-hover-animation: .6s;
  --fade-animation: .3s;
  --fade-menu-delay: .1s;
  --fade-aside-delay: .05s;
  --fade-article-delay: .2s;
  --fade-link-delay: .05s;
  --social-link-hover-animation: .2s;

  /* Opacity */
  --secondary-opacity: .75;
  --disabled-opacity: .35;
  --placeholder-opacity: .2;

  /* Filters */
  --sepia-ratio: 50%;

  /* Buttons */
  --button-min-width: 140px;
  --button-minimize-border-radius: 8px;

  /* Tags */
  --tag-border-radius: 12px;

  /* Inline code */
  --code-inline-border-radius: 4px;

  /* Loading bar */
  --loading-bar-size: 18rem;

  /* Epsilon */
  --e: 4.9406564584124654e-322;
}

/* Body */
html {
  --webkit-text-size-adjust: 100%;
}

body {
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--background-loader);
  margin: 0;
  padding: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0,0,0,.05) 4px), linear-gradient(transparent, transparent 3px, rgba(0,0,0,.05) 4px);
  background-size: 4px 4px;
}

/* Links */
a,
a:visited {
  color: var(--link);
  text-decoration: none;
  outline: none;
}

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

/* Loader */
#loader {
  color: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

/* Unsupported browser */
#unsupported {
  margin: auto;
  padding: var(--spacing-4);
  font-size: 1rem;
}

#unsupported:not(.visible) {
  display: none;
  pointer-events: none;
}

#unsupported.visible+#loader-bar {
  display: none;
}

#unsupported sub {
  float: right;
  opacity: var(--disabled-opacity);
}

/* Loader bar and text */
#loader-bar {
  width: 70vw;
  max-width: var(--loading-bar-size);
  height: .4rem;
  padding: 1px;
  background-color: var(--gray);
}

#loader-bar>div {
  transition: width var(--loading-bar-animation);
  background-color: var(--black);
  height: 100%;
  width: 0%;
}

#loader-bar.error>div {
  background-color: var(--error);
}

#loader-text {
  width: 70vw;
  max-width: var(--loading-bar-size);
  margin-top: .5rem;
  height: 1rem;
  font-size: .8rem;
}

#loader-text .error {
  color: var(--error);
}

#loader-text>div {
  white-space: pre;
  font-family: monospace;
}

#loader-text>div:nth-child(1) {
  opacity: 1;
}

#loader-text>div:nth-child(2) {
  opacity: .9;
}

#loader-text>div:nth-child(3) {
  opacity: .8;
}

#loader-text>div:nth-child(4) {
  opacity: .6;
}

#loader-text>div:nth-child(5) {
  opacity: .4;
}

#loader-text>div:nth-child(6) {
  opacity: .2;
}

#loader-text>div:nth-child(7) {
  opacity: .1;
}

#loader-text>div {
  opacity: 0;
}