/* font import from my github */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://raw.githubusercontent.com/lokakrp/fonts/main/helvetica%20neue/HelveticaNeueRoman.otf")
    format("opentype");
}

a {
  text-decoration: none;
}

p {
  font-family: "Helvetica Neue", "UD デジタル 教科書体 N-R", serif;
  margin: calc(100% / 99);
  width: 50;
  word-wrap: break-word;
}

.hymn-verse:hover {
  background-color: #f8f5f5;
  margin-left: 6px;
  transition-duration: 0.05s;
}

p.p {
  font-family: "Helvetica Neue", "UD デジタル 教科書体 N-R", serif;
  word-wrap: break-word;
}

h1 {
  font-family: "Helvetica Neue", "UD デジタル 教科書体 N-R", serif;
  font-size: 50;
}
hr {
    border: none;
    border-bottom: 1px solid  #dfe2e2;
    margin: calc(100% / 170);
    margin-top: 10px;
  }

.hymn {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #dfe2e2;
  margin: calc(100% / 170);
  padding-bottom: 1em;
}

div {
  font-family: "Helvetica Neue";
}

html {
  /* height: 100%; */
  background-color: hwb(224 75% 16%);
}
.blind {
  margin-right: calc(100% / 99);
}

body {
  height: 100%;
  font-size: 100;
  line-height: 1.5;
  letter-spacing: 1;
  max-width: 700px;

  margin: auto;
  margin-top: calc(100% / 99);
  margin-bottom: calc(100% / 99);
  padding: 60px;
  color: #333;
  background-color: #fafaff;
  /* optional color: #eeeaea*/
}

/* links */

#body {
  height: 90%;
  min-height: 90%;
}

body > #body {
  height: auto;
}

a:link {
color: #df514c;
}

a:visited {
color: #df514c;
}

a:hover {
  color: peru;
}

a:active {
  color: peru;
}

a:focus {
  color: peru;
}

a.select:link {
  color: #333;
}

a.select:visited {
  color: #333;
}

a.select:hover {
  color: peru;
}

a.select:active {
  color: peru;
}

a.select:focus {
  color: peru;
}

.heading {
  margin-bottom: 5px;
}

.subtitle {
  color: #777777;
}