html, body {
background-color: rgb(0,0,0);
font-family: Cambria, Georgia, Garamond, Geneva,Verdana, Arial Black;
font-weight: normal;
font-size: 15px;
Margin:0px,5px,5px,5px;
	}

.bannerlinks {
table-layout: fixed;
text-align: left;
width: 175px;
a:link { color: red; text-decoration: none; }
a:visited { color: silver; text-decoration: none;  }
a:hover { color: aqua; text-decoration: none;  }
a:active { color: yellow; text-decoration: none;  }
	}

.bannerlinks_short {
table-layout: fixed;
text-align: left;
width: 100px;
a:link { color: red; text-decoration: none; }
a:visited { color: silver; text-decoration: none;  }
a:hover { color: aqua; text-decoration: none;  }
a:active { color: yellow; text-decoration: none;  }
	}

video {
  width: 100%;
  min-height: 150vh;
}
  
h1 {
background-color: black;
color: silver;
font-size: 450%;
display: inline-block;
margin: 0;
line-height: 100%;
min-width: 980px;
position: absolute;
vertical-align: left;
    }

h2 {
color: red;
font-size: 1.25em;
    }

h3  {
font-style: bold;
font-size: 1.1em;
   }

p  {
line-height: 1.25em;
   }

.p1  {
color: silver;
line-height: 1.25em;
   }

.game_content {
	overflow-x: auto;
	}

.bg 	{
  background-image: url(../Images/TallScroll.png);
    background-repeat: no-repeat;
    position:absolute;
    width:960px;
    height:1200px;
	}

.map 	{
    background-image: url(Images/AnoriaParchment.png);
    background-size: 100%;
    min-width: 1000px;
    width:100%;
    height: 100%;
    background-repeat:no-repeat;
    opacity: .85
	}

.box	{
        width: 40%;
        height:20%;
        border: 8px solid black;
	}

 .pic	{
        width: 100%;
        height: 100%;
        object-fit: cover;
	}

 .thmbnl	{
	max-width:50%;
	height:auto;
        object-fit: contain;
	}

 .container {
     position: relative;
     width: 100%;
     height: 0;
     frameBorder: 0;
     padding-bottom: 130%;
	 }

.content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
	 }

#frame	{
     overflow: hidden;
     width: 1000px;
     height: 100%;
     position: absolute;
	}


.iframe-container {
display: flex; justify-content: center; align-items: center; height: 100vh;
	}

iframe { min-width: 1000px; min-height: 1350px; width: 1000px; height: 100%;
 	}


th	{
color: red;
	}

.std { 
color: black;
font-size: .8em;
font-weight: bold;
     }
      
.spc {
color: Black;
font-size: 1em;
   }
      
.imp {
color: Black;
font-size: 1.1em;
   }


ul, li	{
font-size: .95em;
font-weight: bold;
	}

.fire {
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 90px;
  background-position: center center;
  background-size: 100% 100%;
  border-radius: 10px;
  font-family: 'Akroni';
  overflow: visible;
    text-align: auto;
  vertical-align: middle;
}


.bannersword  {
  position: absolute;
  top: 65;
  left: 0;
	}

.fire:before {
  content: '';
  display: inline-block;
}

.Blazing {
  display: inline-block;
  margin: 0;
    color: red;
    font-size: 450%;
  line-height: 100%;
  min-width: 980px;
  outline: yellow;
  position: absolute;
  vertical-align: left;
  text-shadow:
        0 3px 20px red,
        0 0 20px red,
    0 0 10px orange,
    4px -5px 6px yellow,
    -4px -10px 10px yellow,
    0 -10px 30px yellow;
  animation: 3s Blazing infinite alternate linear;
}


@keyframes Blazing {
  0%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 0 10px orange,
    0 0 0 yellow,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    4px -10px 10px yellow; }
  25%   { text-shadow: 0 3px 20px red, 0 0 30px red,
    0 0 20px orange,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    3px -10px 10px yellow,
    -4px -15px 20px yellow; }
  50%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 -5px 10px orange,
    -2px -5px 5px yellow,
    3px -10px 10px yellow,
    -4px -15px 20px yellow,
    2px -20px 30px rgba(255,255,0,0.5); }
  75%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 -5px 10px orange,
    3px -5px 5px yellow,
    -4px -10px 10px yellow,
    2px -20px 30px rgba(255,255,0,0.5),
    0px -25px 40px rgba(255,255,0,0)}
  100%   { text-shadow: 0 3px 20px red, 0 0 20px red,
    0 0 10px orange,
    0 0 0 yellow,
    0 0 5px yellow,
    -2px -5px 5px yellow,
    4px -10px 10px yellow; }
}

.RPG {
  background: black;
  overflow: hidden;
  font: 5vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
	}

span {
  display: inline-block;
  text-shadow: 0 0 0 white;
  animation: smoky 5s 3s both;
  animation-iteration-count: infinite;
	}

span:nth-child(even){
  animation-name: smoky-mirror;
	}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(2rem,-4rem,0)
      rotate(30deg)
      skewX(50deg)
      scale(1.25);
    text-shadow: 0 0 40px white;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px white; }
  to {
    transform:
      translate3d(2rem,-4rem,0)
      rotate(-30deg) 
      skewX(-50deg)
      scale(1.5);
     text-shadow: 0 0 40px white;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(1 + ($item/10))}s; 
  }
}