@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Pirata+One|Bilbo+Swash+Caps&display=swap');
:root {
  --text: #fefefe;
}

body {
  background: url("/images/greyskull.jpg"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y:bottom;
  font-family:"Pirata One","Style Script", cursive;
}
header, footer {
  background: none;
  border:none;
}
svg {
 height:0;
}
main {
  
  position:relative;
}
h1,h2,h3,h4,h5 {
  margin:0.5em 0;
}
.scroll {
  position:absolute;
  box-shadow: 2px 3px 20px black, 0 0 125px #8f5922 inset;
  box-sizing:border-box;
  width:100%;
  min-height:30em;
  background:#fffef0;
 /* background:url("/images/scroll.png");
  background-size:contain;
  background-repeat:no-repeat;*/
  filter: url("#wavy2");
  position: absolute;
  display: flex;
  padding:4px;
  margin:auto;
}
.scroll-content {
  width:100%;

  position: relative;
  padding:1em 2em;
  box-sizing:border-box;
 	display: flex;
  flex-direction: column;
  color:#5d1100;
  font-size:1em;
}
.scroll-content p:not(:first-child)::first-letter {
  float: left;
  font: 1.7em/1em Morris;
  text-shadow: 1px 1px 1px #000;
  margin: 0 ;
}
.scroll-content h3, .scroll-content h4 {
  text-align:center;
}
.skeletor {
  animation-name: slideInLeft;
  animation-duration: 3s;
  right:0;
  position:relative;
  bottom:0;
  background: url("/images/skeletor.png");
  min-width:30rem;
  min-height:30rem;
  background-size:contain;
  background-repeat:no-repeat;
  transform:rotateY(180deg);
}
@keyframes slideInLeft {
  from {
    right:-30rem;
    opacity:0;
  }
  to {
    right:0;
    opacity:1;
  }
}
@media only screen and (max-width: 1024px) {
  .skeletor {
    min-width:20em;
    min-height:20em;
  }
}
@media only screen and (max-width: 720px) {
  .skeletor {
    min-width:15em;
    min-height:15em;
  }
}
@media only screen and (max-width: 540px) {
  .scroll {
    min-height:40em;
  }
}