@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap");
@import url('https://fonts.googleapis.com/css?family=Sedan+SC&display=swap');


body {
  font-family: "Sedan SC", serif;
  font-size: 18px;
  width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: url(/oc-notebook/images/meaculabg.jpeg);
}

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

a:hover{
  color: red;
  font-weight: 900;
  font-family: "UnifrakturMaguntia", cursive;
  text-shadow: 0px 0px 15px #fac1e1, 0px 0px 5px #fac1e1;}

footer{text-align:center;
margin-top: 40px;
 text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

    .wipbox{
     margin: 50px auto;
  padding: 40px;
  text-align:center;
  letter-spacing: 2px;
  line-height: 25px;
  background: #ffffff90;   
    }    
    
    
.header {
  margin: auto;
  height: 500px;
  width: 800px;
  border-image-slice: 250 250 250 250;
  border-image-width: 120px 120px 120px 120px;
  border-image-outset: 100px 100px 100px 100px;
  border-image-repeat: stretch stretch;
  border-image-source: url(/oc-notebook/images/meaculpaborder.png);
  border-style: solid;
  background: url(/oc-notebook/images/sparkle.gif), url(/oc-notebook/images/meaculpabg2.png) center repeat;
  box-shadow: 5px 5px 10px gray;
  outline: 4px double black;
}

.side {
  margin: 50px auto;
  text-align: center;
  width: 300px;
  height: 400px;
  border: 1px solid;
  border-image-source: url(/oc-notebook/images/meaculpaborderangl.png);
  border-image-slice: 140;
  border-image-width: 70;
  border-image-outset: 9;
  border-image-repeat: round;
  background: #ffffff90;
  border-radius: 70%;
 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.side p {
  margin: 50px auto;
  padding: 100px;
  font-family: "UnifrakturMaguntia", cursive;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  text-shadow: 0px 0px 15px #fac1e1, 0px 0px 5px #fac1e1;
  color: darkred;
  letter-spacing: 3px;
}

@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap");

svg {
	font-family: "UnifrakturMaguntia", sans-serif;
	width: 100%; height: 50%;
		margin-bottom: -100px;
}
svg text {
	animation: stroke 5s infinite alternate;
	stroke-width: 2;
	stroke: #7B0000;
	font-size: 100px;

}
@keyframes stroke {
	0%   {
		fill: rgba(123,0,0,0); stroke: rgba(123,0,0,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(123,0,0,0); stroke: rgba(123,0,0,1); }
	80%  {fill: rgba(123,0,0,0); stroke: rgba(123,0,0,1); stroke-width: 3; }
	100% {
		fill: rgba(123,0,0,1); stroke: rgba(123,0,0,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

.wrapper {background: transparent;}

h2 {
  margin-bottom:-100px;
  text-align:right;
  color:darkred;
  font-family: "UnifrakturMaguntia", cursive;
  font-size: 70px;
  font-weight: 900;
  font-style: normal;
  text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
  text-decoration: underline;
}

h3{ 
  letter-spacing: 4px;
 font-family: "UnifrakturMaguntia", cursive; 
 transform:rotate(270deg);
 margin-left:-820px; 
  text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
  color: gray;
}

h4{
   letter-spacing: 15px;
   font-family: "UnifrakturMaguntia", cursive; 
  font-size: 24px;
  text-align: #000;
  text-shadow: 10px 5px 5px rgba(136, 136, 136, 1);
}
.summary{
  margin: 50px auto;
  padding: 40px;
  text-align:center;
  letter-spacing: 2px;
  line-height: 25px;
  background: #ffffff90;
}

.summary em{color: darkred;}
.summary p{text-align:justify;}

.roster{
  margin: 20px auto;
  padding: 40px;
  text-align:center;
  background: #ffffff90;
}

.character{
display:inline-block;
margin-bottom: 10px;
padding: 15px;  
height: 320px;
width: 200px;
text-align:center;
}

.character-avi{box-shadow: 5px 5px gray;
height: 200px;
width: 150px;
object-fit: cover;
border-radius: 50% 50% 0px 0px;}



.name{color: darkred;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 14px;
}
.title{
  font-size: 12px;
  letter-spacing: 2px;
  text-transform:uppercase;
}
.tarot{
  font-size: 10px;
  letter-spacing: 2px;
  text-transform:uppercase;
  color: #5c5c5c;
}


.bottom{
  height: 100px;
  width: 800px;
  background: url(/oc-notebook/images/mcbottom.png);
  background-size: 50%;
  margin: -50px auto;
}

hr {
    display:block;
    border:0px;
    height:32px;
    background-image:url(/oc-notebook/images/mchr.png);
}

::selection {
  color: #fff;
  background: #000;
  
   /* Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: #000 #ffffff;
    }

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
      width: 5px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    *::-webkit-scrollbar-thumb {
      background-color: #000;
      border-radius: 10px;
      border: 3px double #ffffff;
    }