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

body {
 

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

}


#header-img{
  display:block;
  max-width:490px;
  height:auto;
  margin-top:10px;
  margin:auto;
  }
  
#archive-title{
  display:block;
  margin:auto;
  max-width:250px;
  height:auto;
}

ul{
  display:grid;
  grid-template-columns: auto auto auto;
  list-style-type:none;
  margin:auto;
  max-width: 700px;
  transform:translateX(-15px);
  }
  
a{text-decoration:none;}
a:link{color: #996600;}
a:visited{color:#996600;}
a:hover{color:#e69900;}
  
  
@font-face {
  font-family: morris-roman;
  src: url("/lionspearl/MorrisRoman-Black.ttf") format("truetype");
}

@media (max-width: 650px) {
 #header-img{
  max-width:380px;
  height:auto;
  margin-top:10px;
  }
  
  ul{
     transform:translateX(-20px);
     gap:12px;
    }
    
    li{font-size:0.9em;}
  
   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{
    font-size:0.7em;
    color:#000;
 
    }
  
footer a:link, footer a:visited{
  color: #545454;
  text-decoration:none;
  }