@font-face {
  font-family: 'NEXON Lv1 Gothic OTF';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
h1,h2,h3,h4,h5,h6 {
  margin-block-start: 0;
  margin-block-end: 0.2em;
}

body {
  margin: 0;
}

body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #ddd;
}

body::-webkit-scrollbar-thumb {
  background-color: #888;
}

a, a:visited {
  text-decoration: none;
}

.top-bar a, .top-bar a:visited {
  color: #DDD;
  font-family: NEXON Lv1 Gothic OTF;
  transition: 0.25s;
  margin-left: 0.25cm;
  font-size: 24pt;
}
.top-bar a:hover {
  color: #FFF;
}

.top-bar {  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.5em;
  padding: 0.2em 0;
  background-color: lightslategray;
  color: #FFF;
  display: flex;
  z-index: 50;
}

.search-box {
  vertical-align: middle;
  display: flex;
  margin-right: 0.1cm;
  margin-block-end: 0;
}

#id {
  font-size: 16pt;
  padding: 4pt 0.25cm;
  width: 180px;
  border-radius: 0.2cm 0 0 0.2cm;
  border: 0;
  outline: none;
  font-weight: 600;
  background-color: #DDD;
}

#id:focus {
  border: 0;
}

#id,
.search-box > button[type=submit] {
  box-sizing: border-box;
  height: 40px;
  font-size: 16pt;
  padding: 4pt 0.25cm;
  vertical-align: middle;
}


.search-wrapper {
  position: relative;
  display: inline-block;
}

.search-box > button[type=submit] {
  font-size: 16pt;
  padding: 4pt 0.25cm;
  border-radius: 0 0.2cm 0.2cm 0;
  border: 0;
  background-color: lightsteelblue;
  font-weight: 600;
  color: #444;
  transition: 0.25s;
  cursor: pointer;
}

.search-box > button[type=submit]:hover {
  background-color: #FFF8;
}

datalist > option:hover {
  background-color: #0002;
}

.title {
  display: block;
}

.narrow-title {
  display: none;
}

main {
  margin-top: 1.5cm;
}

footer {
  padding: 0.5em 20px;
  border-top: 2px solid #000;
  text-align: center;
  margin: 0.25cm 20px;
}
datalist {
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid;
  border-top: none;
  border-radius: 0 0 0.2cm 0.2cm;
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
  max-height: 30rem;
  overflow-y: auto;
}
datalist::-webkit-scrollbar {
  display: none;
}
option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  font-size: 20pt;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}
input[type='radio']:checked {
  background-color: #111;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #111;
}

@media (prefers-color-scheme: dark) {
  datalist{
    border: 1px solid lightsteelblue;
    background-color: #222;
    color: #DDD;
  }
}

@media (prefers-color-scheme: light) {
  datalist {
    border: 1px solid lightsteelblue;
    background-color: #DDD;
    color: #222;
  }
}

@media screen and (min-width: 720px) {
  #id {
      width: 500px;
  }
}

@media screen and (max-width: 560px) {
  .title {
      display: none;
  }

  .narrow-title {
      display: block;
  }

  #id {
      font-size: 14pt;
      width: 200px;
  }
  option {
    font-size: 14pt;
  }
  datalist {
    max-height: 20rem;
  }
}

@media screen and (max-width: 340px) {
  .title {
      display: none;
  }

  .narrow-title {
      display: none;
  }
}

@media (prefers-color-scheme: dark) {
  body {
      background-color: #222;
      color: #DDD;
  }

  footer {
      border-top-color: #DDD;
  }
}