---
const {homeUrl, blogUrl} = Astro.props;
---

<header>
  <img src="/mainpicture.png" />
  <div>
    <div id="brand-container">
      <p>SmolBeaver.it</p>
      <nav>
	<a href={homeUrl}>home</a>
	<a href={blogUrl}>blog</a>
      </nav>
    </div>
  </div>
</header>

<style>
header {
  display: flex;
  height: 200px;
}

header > img {
  width: 128px;
  height: 128px;

  margin-top: auto;
  margin-bottom: auto;
  margin-left: 30px;

  border-radius: 50%;
}
header > div {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

header > div > #brand-container {
  max-width: 300px;
  margin: auto;
}

header > div > #brand-container > p {
  padding: 0;
  
  color: #8e5f35 ;
  font-size: 42px;
}

header > div > #brand-container > nav > a:visited {
  color: #A0724A;
  text-decoration: none;
}
</style>