@font-face {
  font-family: pixelarial; 
  src: url(/pixel-arial-14.woff); 
}

@font-face {
   font-family: daydream;
  src: url(/Daydream.woff)
}

body {
  background-image: radial-gradient(circle, #BEC2BE 35%, #91A0AB);
  font-family: pixelarial;
  font-size: 7px;
  color: #636363;
  letter-spacing: 2px;
  line-height: 20px;
  
}

.main {
  height:300px;
  width:500px;
  background-color:#b3c4b3;
  align-items: center;
  justify-content: center;
  margin:auto;
  margin-top:215px;
  border-style:groove;
  border-radius: 20px;
}

.section {
  height:260px;
  width:460px;
  background-color:#f2efed;
  margin:auto;
  margin-top:-280px;
  border-style:none;
  border-radius:20px;
  overflow:scroll;
}

.section::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.section::-webkit-scrollbar-track {
  background: invisible;
}
 
/* Handle */
.section::-webkit-scrollbar-thumb {
  background: #BEC2BE; 
}

/* Handle on hover */
.section::-webkit-scrollbar-thumb:hover {
  background: #b3c4b3; 
}

.list {
  margin-top:35px;
}

a {
  color: #91A0AB;
}

a:hover {
  color: #749AB8;
}

#hachi img{
  position: absolute;
  width:200px;
  margin-top: -150px;
  margin-left: 375px;
}

.home {
  margin-top:-30px;
  margin-left:-20px;
  padding: 15px;
  padding-right:20px;
  background-color: #91A0AB;
  letter-spacing: 4px;
  width:50px;
  border-style: outset;
  border-radius: 20px;
  border-width:5px;
  position:absolute;
  font-size:10px;
}

.home:hover {
  background-color: #749AB8;
}