/* h1 - h6 */

h1 {
  display: block;
  position: relative;
  width: 100%;
  font-size: 2rem;  /* 2em (32px) */
  /* 2rem vs html fontsize, 2em vs Parent element fantasize */
  margin-top: 1.5rem;  /* 0.67em */
  margin-bottom: 0.05rem; /* 0.67em */
  font-weight: bold; /* bold */
}

h1::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: gray;
  left: 0;
  bottom: 0;
}

h1::after {
  content: "";
  display: block;
  position: absolute;
  width: 400px;
  height: 5px;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to right, red, blue);
}


h2, h3, h4, h5, h6 {
  font-family: Didot, serif;
/* serif;  'MyWebFont3';  Impact;  Goudy Old Style;  Georgia; */
}

h2 {
  padding-left: 20px;
  font-family: Impact;
}
h3 {padding-left: 40px;}
h3 {padding-left: 50px;}

/* body */
body {
  font-family: "Hiragino Sans", "Helvetica", sans-serif;
  margin: 0;
  padding: 0;
  background: rgba(250, 250, 250, 1);
}

/* header */
/*
header {
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0;
  text-align: center;
  background-color: rgba(238, 238, 238, 0.5);
  font-size: 1.2rem;
}
*/
.header-container {
  position: fixed;
  z-index: 10;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  background-color: rgba(238, 238, 238, 0.9);
}

/* for PC min width 768px */
@media (min-width: 768px) {
.header-container {
  position: fixed;
  z-index: 10;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 20px;
  background-color: rgba(238, 238, 238, 0.9);
}

}

/* footer */

footer {
  height: 150px;
  background-color: rgba(238, 238, 238, 1);
  text-align: center;
  padding: 30px 0px;
  color: rgba(85, 85, 85, 1);
  bottom: 0px;
}

.footer-container {
  font-size: 0.9rem;
  font-family: serif;
  display: fixed;
  justify-content: center;
  align-items: center;
}

/* a */
a:link {
  color: rgba(85, 85, 85, 1);
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  font-family: serif;
  margin: 0;
  font-weight: bold;
  color: rgba(85, 85, 85, 1);
  transition:color 0.4s ease;
}

a:hover {
  color: rgba(220, 220, 220, 1);
  text-decoration: underline;
}

a:active {}
a:focus {
  font-family: 'MyWebFont2';
}

nav a {
  text-decoration: none;
  font-family: serif;
  margin: 0;
  font-weight: bold;
  color: rgba(85, 85, 85, 1);
  transition:color 0.4s ease;
}