:root {
    font-family:monospace;
    color: black;
    scrollbar-color: rgb(41, 39, 39) transparent;
  }
  html {
  background-color: rgb(230, 232, 241);
    background-size: cover;
  background-repeat: no-repeat;
    background-position: center;

  }

 h1{
font-size: 26px;
 } 
 #mangaka{
font-size: 16px;
font-weight: normal;
 }

#top{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid;
padding: 0;
margin-top: -10px;
margin-bottom: 10px;
}
#top a, h1{
margin: 0;
transform: translateY(6px);
}
#top a{
color: rgb(61, 78, 223);
}

body{
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  #container{
border-style: solid;
border-width: 2px;
border-color: rgb(31, 31, 29);
box-shadow: 5px 5px 0px rgb(61, 78, 223);
display: flex;
flex-direction: column;
height: 800px;
width: 700px;
box-sizing: border-box;
padding: 10px;
flex: 0 1 auto;
box-sizing: border-box;

  }
#article{
overflow: auto;
scrollbar-width: none;
height: 100%;
gap: 5px;
}

#text{
border-bottom: 1px dotted;
}

#chararticle{
display: flex;
flex-direction: column;
gap: 5px;
}
#char{
   display: flex; 
}
#charimg{
    width: 150px;
    border: 2px solid;
    height: 150px;
    display: flex;
    justify-content: flex-start;
}
#chartext{
margin-left: 10px;
}
#name{
font-size: 16px;
color: rgb(61, 78, 223);
}

@media (max-width: 800px) {
#container{
width: 95%;
margin: 10px;
}
}