:root {
  /* --debug-layout-color: #292c2e; */

  --base-bg-color: #181a1b;
  --base-text-color: rgba(232, 230, 227, 0.87);
  --secondary-text-color: rgba(165, 163, 160, 0.87);
  --highlight-text-color: rgb(255, 255, 255);
  --base-a-text-color: rgb(242, 157, 45);
  --base-a-text-color-hover: #FFF;
  --base-line-gradient-fill: rgb(231, 137, 14, 0.2);
  --base-line-gradient-fade: rgb(231, 137, 14, 0.0);
  --mobile-nav-bg: rgb(33, 35, 37);
  --mobile-nav-bg-lighter: rgb(63, 67, 71);

  --base-logo-pt-1: rgb(242, 157, 45);
  --base-logo-pt-2: rgb(224, 179, 119);
  --base-logo-pt-3: #d8d4cf;
  --base-logo-pt-4: #505457;
  --base-logo-color-copyright: rgb(104, 64, 13);
}

body {
  background: var(--base-bg-color);
  color: var(--base-text-color);
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  font-family: 'GowunBatang';
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: 'Afacad';
  text-align: center;
}

hr {
  width: 100%;
  border-image: linear-gradient(.25turn, var(--base-line-gradient-fade) 0%, var(--base-line-gradient-fill) 40%, var(--base-line-gradient-fill) 60%, var(--base-line-gradient-fade) 100%) 1 / 35px;
  padding: 0px;
  margin: 0px;
}

p {
  color: var(--secondary-text-color);
}

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

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

a:hover {
  color: var(--base-a-text-color-hover);
}

dialog {
  border: none;
  padding: 0px;
  margin: 0px;
}

ul, ol {
  color: var(--secondary-text-color);
  list-style-type: square;
  list-style-position: inside;
}

.emphasis-text-color {
  color: var(--base-a-text-color);
}

.logo-copyright {
  color: var(--base-logo-color-copyright);
  font-size: 12px;
}

/** Webkit scrollbar settings **/
::-webkit-scrollbar {
  width: 10px;
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background: #181a1b; 
}

::-webkit-scrollbar-thumb {
  background: #444; 
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}