html {
  scrollbar-width: none;
  background-image: url(repeat-flower017.jpg);
  background-repeat: repeat-x;
  background-position: center bottom;
}
body {
  overflow: hidden;
  font-family: ms gothic;
  font-size: 14px;
  margin: 0;
  display: flex;
  justify-content: center;
  color: white;
}
a {
  text-decoration: none;
  transition: 0.5s;
  color:white;
}
a:hover {
  text-decoration: underline;
}
p {
  margin-left: 5px;
}
li {
  list-style-type: "┊";
  padding-left: 5px;
  margin-bottom: 5px;
}
a:hover {
  letter-spacing: 5px;
}
h1 {
  color: #b6bed3;
  font-size: 16px;
  font-weight: normal;
  border: white dashed 1px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 2px;
  padding-left: 10px;
  letter-spacing: 5px;
  background-color: rgba(182, 190, 211, 0.14);
}
dt {
  border-top: dashed 1px #ffffff;
  border-bottom: dashed 1px #ffffff;
  padding: 5px;
  background-color: rgba(182, 190, 211, 0.14);
  color: #b6bed3;
}
dd {
  border-left: dashed 1px #b8b5a8;
  padding: 5px;
}
/*------------------------------Decoration------------------------------*/
.lace {
  background-image: url(q12-bg-lace.png);
  width: 45px;
  height: 100%;
  z-index: -1;
}
.lace2 {
  background-image: url(repeat-lace004.gif);
  height: 29px;
  width: 100%;
  z-index: -1;
  position: absolute;
}
.lantern {
  background-image: url(scenery252.png);
  height: 371px;
  width: 447px;
  flex-shrink: 0;
  position: relative;
}
/*------------------------------cont------------------------------*/
.container {
  width: 590px;
  height: 100vh;
  display: flex;
  flex-shrink: 0;
}
.container section {
  background-color: #010204;
  width: 100%;
  border-left: white dashed 1px;
  border-right: white dashed 1px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
header {
  background-image: url(scenery077.jpg);
  height: 256px;
  position: relative;
  text-align: right;
}
header a {
  color: #b6bed3;
  margin: 0;
  position: absolute;
  bottom: 0;
  right: 10px;
  letter-spacing: 4px;
}
/*------------------------------bio------------------------------*/
#bio {
  display: flex;
}
#bio div {
  margin: 0 5px;
  border-left: white dashed 1px;
  scrollbar-width: none;
  overflow: auto;
  height: 180px;
  width: 50%;
}
/*------------------------------qna------------------------------*/
#qna {
  display: flex;
}
#qna div {
  width: 100%;
  border: white dashed 1px;
  border-left: none;
  height: 300px;
  overflow: auto;
  scrollbar-width: none;
}
/*------------------------------offsite------------------------------*/

/*------------------------------Shrines------------------------------*/
#shrines {
  width: 100%;
  height: 100px;
  border-top: white dashed 1px;
  border-bottom: white dashed 1px;
  padding: 10px 10px 0 10px;
  overflow: hidden;
  background-image: url(bg.jpg);
}
#shrines figure {
  position: relative;
  top: 50px;
  transition: 0.5s;
  margin: 0;
  display: inline-block;
  margin-right: 10px;
}
#shrines figure:hover {
  transform: translateY(-50px);
}
#shrines img {
  height: 100px;
}
.cd {
  animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#kirei {
  height: 100px;
  width: 90px;
  background-image: url(/kirei/kireibug.png);
  background-size: cover;
}
#kirei:hover {
  background-image: url(/kirei/happykireibug.png);
}