---
import { SITE_TITLE } from '../consts';
import HeaderLink from './HeaderLink.astro';
---

<header>
	<nav>
		<div class="nav-container nav-container-md">
      <div class="nav-container nav-item nav-item-10">
        <h4>
          <HeaderLink
            href="/"
            class="LinkText"
          >
            Home
          </Link>
        </h4>
        {/* <h4 class="divider">/</h4>
        <h4>
          <Link
            to="/about"
            class="LinkText"
          >
            Games
          </Link>
        </h4>
        <h4 class="divider">/</h4>
        <h4>
          <Link
            to="/about"
            class="LinkText"
          >
            Gallery
          </Link>
        </h4> */}
        <h4>
          <HeaderLink
            href="/about"
            class="LinkText"
          >
            About
          </Link>
        </h4>
      </div>
    </div>
	</nav>
</header>
<style>
.HeaderBlock {
  padding-top: 15%;
  margin-bottom: 4%;
}

.LinkText {
  color: #eeeeee;
  text-decoration: none;
  margin-right: 20px;
}

.LinkText:hover {
  text-decoration: underline;
}

.nav-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.nav-container .nav-item-10 {
  flex-grow: 0;
  max-width: 83.333333%;
  flex-basis: 83.333333%;
}

.nav-container .nav-item-10 .divider {
  margin-left: 20px;
  margin-right: 20px;
  color: #eeeeee;
}

.nav-container .nav-item {
  margin: 0;
  box-sizing: border-box;
}

@media only screen and (min-width: 48em) {
  .HeaderBlock {
    padding-top: 4em;
  }
}


@media (min-width: 960px) {
  .nav-container-md {
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 0;
  }
}

@media only screen and (max-width: 500px) {
  .LinkText {
    font-size: 20px;
  }

  .divider {
    font-size: 20px;
  }
}
</style>