{% extends "site.html" %}

{% block headertron %}
    <header id="headertron">
        <em class="color-header">Hey, I'm Satch</em>
        <div class="delimiter"></div>
	<em>I live at the <a href="https://bensonplace.org">Benson Place</a></em>
    <em>I am a student and an actor</em>
    <style>
abbr {
    text-decoration: none;
    border-bottom: none;
}
abbr[data-title] {
  position: relative;
  
  /* ensure consistent styling across browsers */
  text-decoration: underline dotted; 
}

abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
  content: attr(data-title);
  
  /* position tooltip like the native one */
  position: absolute;
  left: -100px;
  bottom: -30px;
  width: 2000%;
  white-space: normal;
  
  /* style tooltip */
  background-color: #1e1e1e;
  color: #a6a28c;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  padding: 3px 5px;
}
    </style>
	<span style="font-size: large;"><em>"Critical and radical thought will only bear fruit when it is blended with<br>the most precious quality man is endowed with - the love of life."<br><abbr data-title = "Erich Fromm, The Anatomy of Human Destructiveness"><sup>⭑</sup></abbr></em></span>
        <div class="nav">
            <div class="delimiter"></div>
            <div class="links">
                <a href="{{ get_url(path="@/about.md") | safe }}">About</a>
                <a href="{{ get_url(path="@/now.md") | safe }}">Now</a>
                <a href="{{ get_url(path="@/about.md#me-on-the-web") | safe }}">Me on the web</a>
                <a href="{{ get_url(path="@/contact.md") | safe }}">Contact</a>
            </div>
        </div>
    </header>
{% endblock headertron %}