/* ============================= */
/* Font Declarations             */
/* ============================= */

@font-face {
  font-family: 'BlackWolf';
  src: url(BlackWolf.ttf);
}

@font-face {
  font-family: 'PixelOperator';
  src: url(PixelOperator.ttf);
}

:root {
  /* Core color palette */
  --color-bg: #490e24;
  --color-accent: #e09f3e;
  --color-accent-alt: #335c67;
  --color-muted: #bb9457;
  --color-highlight: #51C2C8;
  --color-contrast: #4BCEFF;

  /* Semantic aliases */
  --background-color: var(--color-bg);
  --text-color: var(--color-muted);
  --link-color: var(--color-accent);
  --link-visited-color: var(--color-accent-alt);
  --link-hover-color: var(--color-contrast);

  --bold-text-color: var(--color-accent-alt);
  --bold-text-background: var(--color-accent);

  --italics-color: var(--color-highlight);
  --underline-color: var(--color-highlight);

  --header-color: var(--color-accent);
  --header-background: var(--color-bg);

  --scrollbar-thumb-color: var(--color-accent);
  --scrollbar-track-color: var(--color-accent-alt);

  --select-text-color: var(--color-accent-alt);
  --select-background-color: var(--color-highlight);

  --button-text-color: var(--color-highlight);
  --button-background-color: var(--color-accent-alt);
  --button-hover-color: var(--color-accent-alt);
  --button-hover-background: var(--color-accent);

  --ha-color: var(--color-highlight);
  --ah-color: var(--color-accent-alt);
  --eh-color: var(--color-accent);

  /* Font Variables */
  --main-font: 'PixelOperator';
  --font-size: 14px;
  --header-font: 'BlackWolf';

  /* Image Variables */
  --background-image: url('aboutmeimg/purpletile.png');
  --image-path: url('css/aboutmeimg/me.PNG'); 
}







body {
  background-image: var(--background-image);
}







.wrap {
  top: 110px;
  width: 1100px;
  height: 500px;
  margin: 0 auto;
  min-height: 500px;
}

#bar {
  top: -10px;
  left: 0px;
  width: auto;
  height: auto;
  padding: 1px;
  background: var(--background-color);
  margin-top: 3px;
  text-align: left;
  font: var(--font-size) var(--main-font);
  line-height: 0.8; /* was 8px, prevents overlap */
  color: var(--text-color);
}

#info {
  z-index: 7 !important;
  position: absolute;
  margin-top: 90px;
  left: 70px;
  width: 345px;
  height: 870px;
  overflow: auto;
  overflow-x: hidden;
  background: var(--background-color);
  text-align: left;
  font: var(--font-size) var(--main-font);
  line-height: 0.8; /* was 8px, prevents overlap */
  padding-top: 5px;
  color: var(--text-color);
}

#nav {
  position: absolute;
  width: 800px;
  left: 70px;
  top: 68px;
  height: 50px;
  z-index: 1 !important;
}
#nav a {
  color: var(--color-accent);
  text-decoration: none;
  text-transform: lowercase;
  font-family: var(--main-font);
}
#nav a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
  cursor: crosshair;
}






#image {
  position: absolute;
  width: 800px;
  left: 50px;
  top: 0px;
  z-index: 9999 !important;
  height: 1000px;
  pointer-events: none;
}

.ha,
.ah,
.eh {
  font: 20px arial;
  text-transform: uppercase;
  letter-spacing: -2px;
  font-weight: bold;
}

.ha {
  color: var(--ha-color);
}

.ah {
  color: var(--ah-color);
}

.eh {
  color: var(--eh-color);
}

a:link,
a:active {
  color: var(--link-color);
  text-decoration: none;
  text-transform: lowercase;
}

a:visited {
  font: var(--font-size) var(--main-font);
  color: var(--link-visited-color);
  text-decoration: none;
  text-transform: lowercase;
}

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

a.one:link,
a.one:visited {
  font-family: var(--main-font);
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
}

a.one:hover {
  color: var(--link-hover-color);
  text-decoration: none !important;
  cursor: crosshair;
}

b {
  font-weight: bold;
  color: var(--bold-text-color);
  background: var(--bold-text-background);
}

i {
  font: var(--font-size) var(--main-font);
  font-style: italic;
  color: var(--italics-color);
}

u {
  font: var(--font-size) var(--main-font);
  text-decoration: underline;
  color: var(--underline-color);
}






header {
  font: 48px var(--header-font);
  color: var(--header-color);
  margin-left: 30px;
}

h1,
h2 {
  font: 24px var(--header-font);
  color: var(--header-color);
  background: var(--header-background);
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1px;
  border-bottom: 5px solid var(--color-highlight);


  line-height: 0.6;
  margin-top: 5px;
  margin-bottom: 5px;
}

h1 {
  text-align: left;
}

h2 {
  text-align: right;
}










/* ============================= */
/* Scrollbar Styles              */
/* ============================= */

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 11px;
  border: 3px none #a8bbff;
}

/* ============================= */
/* Select & Button Styles        */
/* ============================= */

.morelinks {
  color: var(--select-text-color);
  font-family: Arial;
  font-size: 12px;
  font-style: normal;
  background-color: var(--select-background-color);
  border-style: none;
  border-color: #FF77AC;
  border-width: 1px;
  border-radius: 1px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
}

.btnmorelinks {
  color: var(--button-text-color);
  font-family: Arial;
  font-size: 13px;
  font-style: normal;
  background-color: var(--button-background-color);
  border-style: none;
  border-color: #FFFFFF;
  cursor: crosshair;
}

.btnmorelinks:hover {
  color: var(--button-hover-color);
  background-color: var(--button-hover-background);
}

.btnmorelinks:active {
  color: var(--button-text-color);
  background-color: var(--button-background-color);
}