<style>
#top {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #0f172a;
  color: #e2e8f0;
  box-sizing: border-box;
}

#main {
  flex: 1 1 100%;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
}

#heading {
  flex: 1 1 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 100%;
}

#background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  flex: 1 0 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 64px 112px;
  font-size: 72px;
  text-wrap: balance;
  background-color: rgb(15 23 42 / 0.65);
}

#footer {
  flex: 1 0 96px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 24px;
  background-color: rgb(8 47 73);
  font-size: 28px;
  font-weight: bold;
}

#footer #avatar {
  flex: 0 0 64px;
  display: flex;
  width: 64px;
  height: 64px;
  background-size: 100% 100%;
  border: 4px solid currentColor;
  border-radius: 100%;
}

#footer #meta {
  flex: 1 0 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
</style>

<div id="top">
  <div id="main">
    <div id="heading">
      {% if image and image.src != '' %}
        <img id="background" src="{{ image.src }}" alt="{{ image.alt }}">
      {% endif %}
      <h1>{{ title | safe }}</h1>
    </div>

    <div id="footer">
      <div id="avatar" style="{% if author and author.image != '' %} background-image: url({{ author.image }}){% endif %}"></div>
      <div id="meta">
        <p id="author">by {{ author.name }}</p>
        <p id="blog">blog.sebin-nyshkim.net</p>
      </div>
    </div>
  </div>
</div>
