/* CSS Code by repth.neocities.org*/

<style>

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-image: url(Images/books.png);
font-family:  "Comic Sans", Comic Sans MS;
font-size: 15px;
color: #ffffff;
margin: 5%;
}

.leftbutton {
  background-image: url(Images/pattern%20147.gif);
  border: 3px ridge #673f2a;
  width: 117px;
  margin-left: -60px;
  padding:6px;
  margin-top:-46px;
  min-height:4%;
  position:fixed;
  overflow:auto;
  text-align:center;
  }
  
.buttons {
  list-style-type:none;
  padding:3px;
  }
  
.button { 
  background-image: url(Images/b2.gif);
  text-align:center;
  border-radius: 5px;
  border: 1px solid #ffffff;
  padding: 10px;
  margin:5px;
  margin-top:10px;
  margin-bottom:10px;
  }

.container{
display: flex;
flex-direction: row;
gap: 1rem;
max-width: 781px;
margin: auto;
margin-left: 20%
}

.imgwrapper{
flex-grow: 1;
flex-basis: 0;
margin-right: -1%
}

.img{
align-self: center;
width: 100%;
min-width: 200px;
}

.main{
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
justify-content: space-between;
gap: 1rem;
}

.box{
display: flex;
gap: 1rem;
}

.boximg{
align-self: center;
width: 200px;
}

.content{
flex-grow: 6;
flex-basis: 0;
min-width: 409px;
height: 239px;
border: 2px solid #ffffff;
padding: 16px;
overflow: scroll;
overflow-x: hidden;
text-align: justify;
line-height: 1.4;
display: flex;
flex-direction: column;
background-image: url(Images/space2.gif);
}

.headers{
font-size: 21px;
text-align: right;
font-weight: normal;
border-bottom: 2px dotted #ffffff;
color: #ffcd44
}

a{
text-decoration: none;
color: #ffffff;
}

a:visited{
color: #ffffff;
}

a:hover{
font-style: italic;
}

a:active{
font-style: italic;
font-weight: bold;
}


@media(max-width:730px){
.box img{
display: none;
}
}

@media(max-width:515px){
.container{
flex-direction: column;
}
.img{
width: 40%;
min-width: 40%;
margin: 0 auto;
}
}

</style>