html{
   background-image: url("/lionspearl/images/Wallpaper background.PNG");
   background-repeat: repeat-y;
    background-color: #cccccc;
  background-size:auto;
  overflow:auto;
  }

body {
 

  font-family: "morris-roman", Verdana;
  font-weight: 400;
  font-style: normal;
  text-align:center;
  margin:0; 

}


#header-img{
  max-width:490px;
  height:auto;
  margin-top:10px;
  }
  
#cover-img{
  display:block;
  max-width:400px;
  height:auto;
  margin:20px auto;
  }

#comic-img{
  display:block;
  max-width:700px;
  height:auto;
  margin:20px auto;
  }

.buttons img{

  width:60%;
  min-width:200px;
  height:auto;
  }
  

  #archive{
    padding:0px 10px;
    }
  
  
.buttons{
  display:flex;
  gap:5px;
  align-items:center;
  align-content:space-between;
  justify-content:space-between;
  max-width:900px;
  
  transform:translateX(-74px);
  margin:auto;
  padding: 10px 0px;
  }
  
  #mobile-butt{
    display:none;
    }

#about-img{
  width:285px;
  height:auto;
  margin-bottom:50px;
  }

@font-face {
  font-family: morris-roman;
  src: url("/lionspearl/MorrisRoman-Black.ttf") format("truetype");
}

.btn:hover + img{
  transform:scale(1.1); 
  }

.btn:active + img{
  transform:scale(0.9);
  }

@media (max-width: 650px) {
 #header-img{
  max-width:380px;
  height:auto;
  margin-top:10px;
  }
  
  #comic-img{
  display:block;
  max-width:370px;
  height:auto;
  margin:20px auto;
  }
 
 #cover-img{
  display:block;
  max-width:370px;
  height:auto;
  margin:20px auto;
  }
  
  #desktop-butt{
    display:none;
    
    }
  
  #mobile-butt{
    display:flex;
    }
    
 .buttons{
  display:flex;
  gap:5px;
  align-items:center;
  align-content:space-between;
  justify-content:space-between;
  max-width:900px;
  transform:translateX(-2px);
  margin:auto;
  padding: 10px 0px;
  }
  
   
 .buttons img{
  width:60%;
  min-width:68px;
  height:auto;
  }
  
  #about-img{
  width:185px;
  height:auto;
  margin-bottom:50px;
  }
  
   footer p{
    font-size:0.5em;
    }
  }

footer{
  position:fixed;
  text-align:center;
  width:100vw;
  bottom:-15px;
  padding: 0px;
  background-color:#19291b;
    font-style:italic;
  }
  
  footer p{
    color:#000;
 
    }
  
footer a{
  color: #545454;
  text-decoration:none;
  }