/*for google font @import url('https://fonts.googleapis.com/css?family="FONTNAME"') and delete headcase and bodycase*/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Prevents the outer window itself from bouncing or scrolling */
  overflow: hidden;
}

body {
  text-align: left;
  padding: 0 1em 0 0.6em;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  position: fixed;
  height: 120px; /* Choose whatever height fits your #elephant asset */
  flex-shrink: 0; /* Rigidly forbids the header from expanding */
  overflow: hidden; /* If 'headcase' font grows massive, it won't push down */
  text-align: left;
}

#elephant {
  line-height: 3em;
  padding: 0em 0em 0em 1em;
  font-size: 0.6em;
  white-space: nowrap;
}

h1 {
  overflow-wrap: normal;
  margin: 0em 0em 0em 0em;
  padding: 10px 0em 0em 1em;
  font-size: 1.6em;
  line-height: 1.3em;
  font-weight: bold;
}

#bodycase {
  margin: 0;
  flex-grow: 1;
  overflow-y: auto; /* Middle text scrolls inside this box if font gets huge */
  overflow-wrap: normal;
  padding: 20px 1em 20px 1.6em; /* Content breathing room padding */
}

p {
  display: block;
  margin: 0;
}

footer {
  position: fixed;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  text-align: left;
}

#clam {
  position: fixed;
  bottom: 0em;
  width: 100%;
  line-height: 3em;
  padding: 0em 0em 0em 1em;
  font-size: 0.6em;
  white-space: nowrap;
}

a:link,
a:visited,
a.email-address:link {
  text-decoration: none;
  font-weight: bolder;
}

a:hover,
a.link,
a.visited,
a.email-address:hover {
  font-weight: bolder;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
}