body {
 font-family: inter, sans-serif;
 overflow-x: clip;
 background: #fff;
}

.hilight {
 background: #fce4d6;
}

h1,h2 {
 text-align: center;
 color: #fff;
 background: #000;
}
h1 {
 font-size: 250%;
 margin-left: -50px;
 margin-right: -50px;
 margin-top: -10px;
 margin-bottom: 0px;
 padding-top: 10px;
 padding-bottom: 10px;
 font-family: "Trebuchet MS";
}
h2 {
 font-size: 180%;
}
h2,h2+p {
 margin: 0px;
}
h2+p {
 margin-top: 5px;
 margin-bottom: 20px;
}
.hilight h2 {
 color: #fce4d6;
}
.hilight p {
 padding: 5px;
}

h5 {
 position: sticky;
 bottom: -2px;
 text-align: center;
 background: #000;
 color: #fff;
 border-top: 1px solid #fff;
 margin-left: -50px;
 margin-right: -50px;
 margin-top: 0px;
 margin-bottom: 0px;
 padding-top: 10px;
 padding-bottom: 10px;
}
h5 a,h5 a:visited {
 color: #808080;
}

input {
 margin-left: 15px;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 0px;
 padding-bottom: 0px;
 background: #fff;
 color: #000;
 transition-property: background;
 transition-duration: 500ms;
}
input:hover {
 background: #000;
 color: #fff;
}

p {
 margin-bottom: 20px;
}

a,a:visited {
 color: #404040;
 transition-property: background;
 transition-duration: 500ms;
}
a:hover {
 background: #000;
}

li+li {
 margin-top: 10px;
}

#main {
 width: 60%;
 margin: auto;
 min-height: 80vh;
}

#logo {
 position: absolute;
 top: 3px;
 left: 5px;
 height: 56px;
}

.ingress {
 font-weight: bold;
 text-align: center;
}

#search {
 text-align: center;
 padding-bottom: 15px;
}
#search input {
 width: 50%;
 font-size: 230%;
 padding-left: 50px;
 border: 2px solid #000;
 border-radius: 10px;
 background: #f0f0fa;
 color: #000;
 transition-property: background;
 transition-duration: 500ms;

 background-image: url('/search1.png');
 background-repeat: no-repeat;
 background-position: 4px 4px;
}
#search input:hover {
 background: #000;
 color: #fff;
 background-image: url('/search2.png');
 background-repeat: no-repeat;
 background-position: 4px 4px;
}

#alphabet {
 text-align: center;
}
#alphabet a {
 padding: 7px;
}

#container {
 display: grid;
 max-width: 100%;
 margin: 0 auto;
 margin-top: 20px;
}

#url {
 background: #f4b084;
 justify-self: start;
 padding: 5px;
 border: 2px solid #f4b084;
 border-radius: 5px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
#url, #url a, #url a:visited {
 color: #900000;
 text-decoration: none;
 font-weight: bold;
}
#url span {
 font-weight: normal;
}
#url p {
 margin: 0px;
}

#wlbox {
 max-width: 75%;
 border: 1px solid #383838;
 background: #f0f0f0;
 padding: 20px;
 border: 2px solid #f0f0f0;
 border-radius: 5px;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
 border-top-right-radius: 15px;
}
#wlbox h3 {
 margin: 0px;
 font-size: 200%;
}
#wlbox p {
 margin-bottom: 0px;
}
#wlbox p.jump {
 margin: 0px;
 margin-top: 2px;
 margin-left: 20px;
 font-style: italic;
 font-size: 80%;
 color: #202020;
}

#letterbox {
 max-width: 75%;
 display: grid;
 grid-template-columns: auto auto;
 background: #fff;
 padding: 20px;
 border: 2px solid #d6dce4;
 border-radius: 5px;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
 border-top-right-radius: 15px;
 color: #555;
 font-size: 150%;
 font-weight: bold;
}
#letterbox p {
 margin-left: 30px;
}

#searchbox {
 max-width: 75%;
 display: grid;
 grid-template-columns: auto;
 background: #fff;
 padding: 20px;
 border: 2px solid #d6dce4;
 border-radius: 5px;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 15px;
 border-top-right-radius: 15px;
 color: #555;
 font-size: 100%;
}
#searchbox p {
 margin-left: 30px;
 color: #000;
 max-width: 50%;
}
#searchbox p a, #searchbox p a:visited {
 font-size: 120%;
 font-weight: bold;
}

.center {
 text-align: center;
}

@media only screen and (max-width: 1024px) {
 #main {
  width: 85%;
 }
 #logo {
  display: none;
 }
 #letterbox {
  width: 75%;
  font-size: 100%;
  grid-template-columns: auto;
 }
 #search input {
  width: 75%;
 }
 #url {
  width: 70%;
 }
 h1 {
  font-size: 200%;
  margin-left: unset;
  margin-right: unset;
  padding-top: 10px;
 }
 h5 {
  bottom: 0px;
  margin-left: unset;
  margin-right: unset;
 }
 #alphabet a {
  font-size: 160%;
  padding: 8px;
 }
 #wlbox h3 {
  font-size: 150%;
 }
}