@font-face {
 font-family: fontWeb;
 src: url(sitefiles/saarland.ttf);
}
body {
 background: #000;
 font-family: fontWeb;
 color: #FFFFFF;
 text-shadow: -1px 0 #000, 0 2px #000, 1px 0 #000, 0 -1px #000;
 font-size: 190%;
}
#ouwapper2 {
 text-align: center;
 margin: auto;
 max-width: 930px;
 width: 90%;
}
#ouwapper {
 text-align: center;
 margin: auto;
 max-width: 1289px;
 width: 95%;
}
#staticbg {
	z-index: -4;
position: fixed;
   height: 100%;
   width: 100%;
	left: 0;
    top: 0;
image-rendering: pixelated;
 background-repeat: repeat;
 background-position: center;
 background-attachment: fixed;
 background-image: url("sitefiles/gamebg2.png");
 }
#bgimg1, #bgimg2, #bgimg3, #bgimg7, #bgimg8, #bgimg9, #bgimg10, #bgimg11, #bgimg12, #bgimg13, #bgimg14, #bgimg15, #bgimg16, #bgimg17, #bgimg18, #bgimg19, #bgimg20, #bgimg21, #bgimg22, #bgimg23, #bgimg24 {
   z-index: -1;
   position: fixed;
   height: 100%;
   width: 100%;
   opacity: 0.5;
	left: 0;
    top: 0;
 background-repeat: no-repeat;
 background-position: center;
 background-attachment: fixed;
 background-size: cover;
 }
 #gamebg1, #gamebg2, #gamebg3 {
   z-index: -1;
   position: fixed;
   height: 100%;
   width: 100%;
	left: 0;
    top: 0;
		image-rendering: pixelated;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
  background-attachment: fixed;
 background-image: url("sitefiles/gamebg.png");
 }
 #bgimg1, #bgimg2, #bgimg3, #bgimg7, #bgimg8, #bgimg9, #bgimg10, #bgimg11, #bgimg12, #bgimg13, #bgimg14, #bgimg15, #bgimg16, #bgimg17, #bgimg18, #bgimg19, #bgimg20, #bgimg21, #bgimg22, #bgimg23, #bgimg24 {
 background-image: url("sitefiles/sitebg4.avif");
 }
.albumLogo {
 height: auto;
 width: 100%;
 max-width: 892px;
 max-height: 150px;
 object-fit: contain;
}
.buttonzDoom {
border: 2px solid #09F;
box-shadow: 3px 3px 0px #05A, 2px 2px 0px 3px #000;
background: #0050A2;
color: #00FFFF;
}
.buttonzDoom:hover {
background: #009999;
border: 2px solid #FFFF00;
}
.buttonzDoomSpotify {
border: 2px solid #09F;
box-shadow: 3px 3px 0px #05A, 2px 2px 0px 3px #000;
background: #0050A2;
color: #00FFFF;
opacity: 0.2;
}
.buttonzDoomSpotify:hover {
background: #009999;
border: 2px solid #FFFF00;
}
.buttonzHardcore {
border: 2px solid #95E;
box-shadow: 3px 3px 0px #528, 2px 2px 0px 3px #000;
background: #2614BD;
color: #00FFFF;
}
.buttonzHardcore:hover {
background: #AA00EE;
border: 2px solid #EEFF22;
}
.buttonzHardcoreSpotify {
border: 2px solid #95E;
box-shadow: 3px 3px 0px #528, 2px 2px 0px 3px #000;
background: #2614BD;
color: #00FFFF;
opacity: 0.2;
}
.buttonzHardcoreSpotify:hover {
background: #AA00EE;
border: 2px solid #EEFF22;
}
.buttonzMetal {
border: 2px solid #092;
box-shadow: 3px 3px 0px #052, 2px 2px 0px 3px #000;
background: #004620;
color: #00FF99;
}
.buttonzMetal:hover {
background: #009999;
border: 2px solid #22FFEE;
}
.buttonzMetalSpotify {
border: 2px solid #092;
box-shadow: 3px 3px 0px #052, 2px 2px 0px 3px #000;
background: #004620;
color: #00FF99;
opacity: 0.2;
}
.buttonzMetalSpotify:hover {
background: #009999;
border: 2px solid #22FFEE;
}
.buttonzOver {
border: 2px solid #E00;
box-shadow: 3px 3px 0px #800, 2px 2px 0px 3px #000;
background: #460000;
color: #FF9900;
}
.buttonzOver:hover {
background: #ff0000;
border: 2px solid #EEFF22;
}
.buttonzOverSpotify {
border: 2px solid #E00;
box-shadow: 3px 3px 0px #800, 2px 2px 0px 3px #000;
background: #460000;
color: #FF9900;
opacity: 0.2;
}
.buttonzOverSpotify:hover {
background: #ff0000;
border: 2px solid #EEFF22;
}
.buttonzHatansion {
border: 2px solid #E00;
box-shadow: 3px 3px 0px #800, 2px 2px 0px 3px #000;
background: #460000;
color: #FF9900;
}
.buttonzHatansion:hover {
background: #990099;
border: 2px solid #EEFF22;
}
.buttonzHatansionSpotify {
border: 2px solid #E00;
box-shadow: 3px 3px 0px #800, 2px 2px 0px 3px #000;
background: #460000;
color: #FF9900;
opacity: 0.2;
}
.buttonzHatansionSpotify:hover {
background: #990099;
border: 2px solid #EEFF22;
}
.buttonz {
border: 2px solid #59E;
box-shadow: 3px 3px 0px #258, 2px 2px 0px 3px #000;
background: #34469D;
color: #00FFFF;
}
.buttonz:hover {
background: #1133FF;
border: 2px solid #EEFF22;
}
.buttonzDisabled {
display: none;
}
.buttonzPlaylist {
border: 2px solid #95E;
box-shadow: 3px 3px 0px #528, 2px 2px 0px 3px #000;
background: #46349D;
color: #00FFFF;
}
.buttonzPlaylist:hover {
background: #9900FF;
border: 2px solid #EEFF22;
}
.buttonzPresave {
border: 2px solid #00E;
box-shadow: 3px 3px 0px #008, 2px 2px 0px 3px #000;
background: #00009D;
color: #00FFFF;
animation-name: buttonz;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.buttonzPresave:hover {
background: #0000FF;
border: 2px solid #FFFF00;
}

.buttonzSpotify {
border: 2px solid #59E;
box-shadow: 3px 3px 0px #258, 0px 0px 10px 1px #000;
background: #34469D;
color: #00FFFF;
opacity: 0.2;
}
.buttonzSpotify:hover {
background: #1133FF;
border: 2px solid #EEFF22;
}
.buttonzGrayedOut {
border: 2px solid #999;
box-shadow: 3px 3px 0px #555, 0px 0px 10px 1px #000;
background: #777;
color: #AAAAAA;
}
.buttonzPresave, .buttonzDoom, .buttonzDoomSpotify, .buttonzHardcore, .buttonzHardcoreSpotify, .buttonzGrayedOut, .buttonzMetal, .buttonzMetalSpotify, .buttonzHatansion, .buttonzHatansionSpotify, .buttonzOver, .buttonzOverSpotify, .buttonzPlaylist, .buttonzSpotify, .buttonz {
padding: 2px 6px 2px 6px;
margin: 8px 0px 1px 0px;
border-radius: 2px 8px 2px 8px;
text-shadow: -1px 0 #000, 0 2px #000, 1px 0 #000, 0 -1px #000;
transition: 0.2s;
letter-spacing: -0.5px;
display: inline-block;
}
.buttonzPresave:hover, .buttonzDoom:hover, .buttonzDoomSpotify:hover, .buttonzHardcore:hover, .buttonzHardcoreSpotify:hover, .buttonzMetal:hover, .buttonzMetalSpotify:hover, .buttonzHatansion:hover, .buttonzHatansionSpotify:hover, .buttonzOver:hover, .buttonzOverSpotify:hover, .buttonzPlaylist:hover, .buttonzSpotify:hover, .buttonz:hover {
transform: translate(3px, 3px);
box-shadow: 0px 0px 10px 1px #ff0, 0px 0px 0px #99AA00;
color: #FFFF00;
animation-name: buttonz;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
@keyframes buttonz {
  0%   {transform: rotate(0deg);}
  20%  {transform: rotate(-3deg) translate(1px, 1px);}
  40%  {transform: rotate(2deg);}
  60%  {transform: rotate(-1deg) translate(2px, 2px);}
  80%  {transform: rotate(0.5deg);}
  100% {transform: rotate(0deg) translate(3px, 3px);}
}
@keyframes buttonzPresave {
  0%   {background-color:#F00;}
  33%  {background-color:#0F0;}
  67%  {background-color:#00F;}
}
.albumNames {
color: #AFA;
font-size: larger;
font-weight: bolder;
margin: 0px 0px -15px 0px;
text-shadow: -1px 0 #000, 0 2px #000, 1px 0 #000, 0 -1px #000;
}
.banner {
 height: 100%;
 max-width: 100%;
 display: table;
 z-index: 12;
 transition: 0.1s;
}
.banner:hover {
 height: 100%;
 max-width: 100%;
 display: table;
 z-index: 44;
 transition: 0.1s;
 transform: translate(-3px, -3px);
 opacity: 0.9;
 background-color: #ff0;
 box-shadow: 3px 3px 0px #ff0, 0px 0px 10px 1px #ff0;
}
.release {
 background-image: url("sitefiles/sitebgblur.avif");
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 background-attachment: fixed;
 margin: 10px 0px 10px 0px;
 padding: 5px 10px 15px 10px;
 border: 2px solid #CC99FF;
 border-radius: 22px 22px 22px 22px;
	}
.coverart2 {
 height: auto;
 width: 100%;
 max-width: 892px;
 border-radius: 4px 4px 4px 4px;
 border: 1px solid #CCC;
 box-shadow: 2px 2px 0px #999;
}
.coverart {
 height: auto;
 max-width: 44%;
 border-radius: 4px 4px 4px 4px;
 border: 1px solid #CCC;
 box-shadow: 2px 2px 0px #999;
}
.coverbanner {
 width: 100%;
 max-width: 100%;
 clear: both;
 border-radius: 1px 1px 1px 1px;
 border: 1px solid #849;
 box-shadow: 3px 3px 0px #415;
 background: #627;
}
@media only screen and (max-width: 1080px) {
.coverbanner {
     box-shadow: 2px 2px 0px #415;
  }
}
.coverbanner a {
  display: table-cell;
}
.datez {
color: #0F0;
font-weight: 900;
}
.icon {
fill: #00ffff;
transition: 0.15s;
}
.icon:hover {
fill: #ffff00;
transition: 0.15s;
}
.logoGreen {
fill: #00b75b;
transition: 2s;
}
.logoGreen:hover {
fill: #9900ff;
transition: 1s;
}
.logoBlack {
max-width: 100%;
mix-blend-mode: difference;
filter: invert(0%);
transition: 2s;
}
.logoBlack:hover {
filter: invert(100%);
background-blend-mode: multiply;
transition: 1s;
}
.legendMetal {
padding: 6px 6px 6px 6px;
margin: 1px 1px 1px 1px;
border-radius: 12px 12px 12px 12px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #F00;
color: #FFFFFF;
display: inline-block;
}
.legendRave {
padding: 6px 6px 6px 6px;
margin: 1px 1px 1px 1px;
border-radius: 12px 12px 12px 12px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #0D2;
color: #FFFFFF;
display: inline-block;
}
.legendDance {
padding: 6px 6px 6px 6px;
margin: 1px 1px 1px 1px;
border-radius: 12px 12px 12px 12px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #0AF;
color: #FFFFFF;
display: inline-block;
}
.legendSynth {
padding: 6px 6px 6px 6px;
margin: 1px 1px 1px 1px;
border-radius: 12px 12px 12px 12px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #F0F;
color: #FFFFFF;
display: inline-block;
}
.legendOther {
padding: 6px 6px 6px 6px;
margin: 1px 1px 1px 1px;
border-radius: 12px 12px 12px 12px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #FF0;
color: #FFFFFF;
display: inline-block;
}
.logohistory {
max-width: 100%;
}
.newz {
padding: 3px 0px 3px 0px;
margin: 0px 0px 0px 0px;
border-radius: 18px 18px 18px 18px;
border: 0px;
box-shadow: 0px 2px 0px #000;
background: #FF0000;
color: #FF0;
font-size: 70%;
display: inline-block;
}
.newzText {
  transform: scaleX(0.85);
  display: inline-block;
}
.newz a {
color: #FF0;
}
.storeIcons {
 height: 24px;
 width: 24px;
}
a {
color: #00FFFF;
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: #FFFF00;
text-decoration: none;
transition: 0.15s;
}
div {
 font-family: fontWeb;
}
h1 {
color: #FFF;
font-size: 66%;
font-weight: 100;
margin: 20px 0px 0px 0px;
}
h2 {
 font-size: 80%;
 font-weight: 100;
}
h3 {
color: #AFA;
font-size: larger;
margin: 0px 0px 0px 0px;
text-shadow: -1px 0 #000, 0 2px #000, 1px 0 #000, 0 -1px #000;
}
h3 a {
text-decoration: underline;
}
h3 a:hover {
color: #FFFF00;
}
.h4titlesSpotify {
text-decoration: line-through;
color: #C9F;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: 0px 3px 1px #00f, -2px 0 #00f, 0 2px #00f, 2px 0 #00f, 0 -2px #00f, 0px 0px 10px #0f0, 0px 0px 10px #0f0;
}
.h4titlesHardcore {
color: #C9F;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: -2px 0 #00f, 0 3px #00f, 2px 0 #00f, 0 -2px #00f, 0px 0px 10px #0f0, 0px 0px 10px #0f0;
}
.h4titlesMetal {
color: #9FC;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: -2px 0 #00f, 0 3px #00f, 2px 0 #00f, 0 -2px #00f, 0px 0px 10px #0f0, 0px 0px 10px #0f0;
}
.h4titlesHatansion {
color: #C9F;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: -2px 0 #00f, 0 3px #00f, 2px 0 #00f, 0 -2px #00f, 0px 0px 10px #0f0, 0px 0px 10px #0f0;
}
.h4titlesOver {
color: #FC9;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: -2px 0 #900, 0 3px #900, 2px 0 #900, 0 -2px #900, 0px 0px 10px #ff0, 0px 0px 10px #ff0;
}
.h4titles {
color: #C9F;
font-size: 190%;
font-weight: 900;
transform: scaleX(1.35);
transform-style: preserve-3d;
transform: rotateX(11deg);
margin: 0px 0px 0px 0px;
text-shadow: -2px 0 #00f, 0 3px #00f, 2px 0 #00f, 0 -2px #00f, 0px 0px 10px #0f0, 0px 0px 10px #0f0;
}
.h4titlecontainer {
  perspective: 100px;
}
h5 {
margin: 2px 0px 0px 0px;
font-size: 40%;
font-style: italic;
font-weight: 100;
}
.PlayerIframe {
 border-radius: 15px 15px 15px 15px;
 border: 2px solid #B4F;
 width: 90%;
 max-width: 700px;
 box-shadow: 2px 2px 0px #407;
}
.PreSave {
 border-radius: 15px 15px 15px 15px;
 border: 0px;
 width: 90%;
 max-width: 360px;
 box-shadow: 0px 0px 20px #FF0;
 overflow: hidden;
}
sup {
 font-size: 70%;
 font-weight: 100;
}
.screenshots {
 height: auto;
 max-width: 90%;
}