<style>
  :root {
    --header-background: var(--white);
    --header-color: rgb(var(--black));
    --link-hover-accent: var(--awesome);
  	--social-link-hover: rgb(var(--gray-dark));
  }
  .internal-links {
    width: 33%;
  }
  .header-logo {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    align-items: center;
  }
  header {
  	margin: auto;
  	padding: 1em 1em;
    background: var(--header-background);
    color: rgb(var(--header-color));
    font-family: "Atkinson", sans-serif;
    box-shadow: 0 2px 8px rgba(var(--black), 5%);
    width: 720px;
    max-width: calc(100% - 2em);
  }
  h2 {
  	margin: 0;
  	font-size: 1em;
  }
  h2 a,
  h2 a.active {
  	text-decoration: none;
  }
  .social-links,
  .social-links a {
    display: flex;
  }
  .social-links a {
  	text-decoration: none;
  }
  .social-links a:hover {
  	color: rgb(var(--social-link-hover));
  }
  @media (max-width: 720px) {
  	.social-links {
  		display: none;
  	}
    .internal-links {
      width: 45%;
    }
  }
  #themeToggle {
    background: var(--header-background);
    display: flex;
    align-items: center;
    border-radius: 25px;
    cursor: pointer;
  }

  /* Dark Mode toggles */
  :is(html.dark, @media (prefers-color-scheme: dark) { html }) img {
    -webkit-filter:  grayscale(1);
    filter:  grayscale(1);
  }
  :is(html.light-mode, @media (prefers-color-scheme: dark) { html }) img {
    -webkit-filter: brightness(2.9) grayscale(1);
    filter:  brightness(2.9) grayscale(1);
  }
</style>
<header>
  <h2 class="header-logo">
    <div id="themeToggle">
      <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
    </div>
    <a href="/">MrJuneJune</a>
  </h2>
</header>
<script src="index.js"></script>