:root {
  /* Color Palette */
  --color-1: #fefefe;
  --color-2: #f3f3f3;
  --color-3: #cccccc;
  --color-4: #c0c0c0;
  --color-5: #dedede;

  --bg-color-1: #111;
  --bg-color-2: #2e2e2e;
  --bg-color-3: #363636;
  --bg-color-4: #4a4a4a;
  --bg-color-5: #6e6e6e;

  --gradient-bg: linear-gradient(to right, #060606, #2c2c2c, #060606);

  --main-foreground-color: #dedede;
  --main-background-color: #060606;

  --accent-color-1: #aea329;
  --accent-color-2: #eee1a1;
  --accent-color-3: #3366cc;
  --accent-color-4: #33cc66;
  --accent-color-5: rgb(60, 117, 89);

  --main-link-color-1: #fff;
  --main-link-color-2: #aaa;

  --pg-width-max: 1100px;
  --pg-width-min: 420px;
  --page-padding: 10%;
}

/* Main Link Styling */
main a,
main a:link,
main a:visited {
  color: #co9;
  text-decoration: none;
}
main a:active,
main a:hover {
  color: #f0c;
  text-decoration: underline;
}

/* Footer */
footer {
  color: var(--accent-color-2);
}
footer a,
footer a:link,
footer a:visited {
  color: var(--accent-color-2);
  text-decoration: none;
}
footer a:active,
footer a:hover {
  color: var(--accent-color-3);
  text-decoration: underline;
}

/* Structure */
html, body {
  position: relative;
  width: 100%;
  margin: auto 0;
  color: var(--color-3);
  background-color: var(--bg-color-1);
}

header {
  position: relative;
  min-height: 80px;
  color: var(--color-3);
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}

header,
footer,
.almost-black-gradient {
  background-image: linear-gradient(to right, black 100%, #292929 0%, black 100%);
}

main {
  background-color: var(--color-2);
}

.blur-bg-1 {
  backdrop-filter: blur(4px);
}

.pic {
  box-shadow: 1rem 1rem 4rem #000;
}

img.header_logo {
  position: absolute;
  left: 2rem;
  max-height: 60px;
}