@font-face {
    font-family: "Floridian";
    src: url("/assets/Floridian_Script.woff") format('truetype');
}

@font-face {
    font-family: "LaBeouf";
    src: url("/assets/LaBeouf.woff") format('truetype');
}

@font-face {
    font-family: "Comic_Hearts";
    src: url("/assets/Comic_Hearts.woff") format('truetype');
}

::selection {
	background: #FDECB0;
  color: #392A66;
  text-shadow: none;
}

html {
  scrollbar-color: #F748E4 black;
}

body{
background: #1C1148 url(/assets/srtexture.png);
font: 14pt 'Comic_Hearts', serif;
line-height: 1.6em;
color : #F7E6D6;
cursor: default;}

a:not(:has(img)) {
	background: #FAAB5E;
	padding: 3px;
	border-bottom: 2px solid #F7E6D6;
	color: #9C2419;
	text-decoration: none;
  transition: 0.3s;
}

a:not(:has(img)):hover, a:not(:has(img)):focus{
	background: #271C64;
	border-bottom: 2px solid #5F1DD2;
	color: #95FAD6;
	text-decoration: none;
}

b, strong {
color: #FDE77A; }

i, em {
color: #95FAD6; }

h1 {
font: 2.3em 'Floridian';
text-align: center;
color:#E5A4F3;}

h2 {
font: 2em;
text-align: center;
color:#C976F4;
padding-top:0.5em;}

header{
position: relative;
margin: -8px 0px 0px 15px;
width: 750px;
height: 600px;
background: url(/assets/srsidebar.png);}

article{
position: absolute;
margin-left: 400px;
margin-top: -830px;
width: 850px;
clear:both;}

footer{
text-align: center;
padding: 4px;
margin-top: 50px;
margin-bottom: 50px;
color:#31A0CB}

footer img {
image-rendering: pixelated;
}

footer a:has(img) {
  opacity: 0.6;
  transition: 0.3s;
}

footer a:has(img):hover {
  opacity: 1;
}

footer a:not(:has(img)) {
	background: #271C64;
	padding: 3px;
	border-bottom: 2px solid #5F1DD2;
	color: #95FAD6;
	text-decoration: none;
  transition: 0.3s;
}

footer a:not(:has(img)):hover,
footer a:not(:has(img)):focus {
	background: #FAAB5E;
	border-bottom: 2px solid #F7E6D6;
	color: #9C2419;
	text-decoration: none;
}

nav{
position: relative;
width: 400px;
padding: 610px 0px 200px 0px;
height:8px;
clear:both;
}

.stats {
  margin: 1em auto;
  background-image:url(/assets/srstats.png);
  background-color: #182B59;
  background-repeat: no-repeat;
  color:#F7E6D6;
  text-shadow: 2px 2px 1px black;
  box-shadow: 3px 3px 3px black;
  text-align:center;
  width: 355px;
  height: 130px;
}

.menu {
display: inline;
list-style: none;}

.menu li {
float:left;
display: block;
  overflow: hidden;
  position: relative;}

.menu a:link,.menu a:active,.menu a:visited{
display: block;
color: #ffffff !important;
padding: 5px 5px;
margin: 4px;
background: #F04AE2 !important;
font: 0.9em LaBeouf !important;
clear:both;
border-radius: 2px;
border-bottom: none ;}

.menu a {
text-shadow: 2px 2px #3F2C6980;
    &:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
  }
}

.menu a:hover {
display: block;
color: #3D2A66 !important;
background: #E5A4F3 !important;
clear:both;
text-shadow: 2px 2px #3F2C6940;

  &:after {
    left: 120%;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }}

ul{
list-style-position:inside;
list-style-type: circle;}