/* Body */
body {
  background-image: url("/shrine/img/arena.png");
  background-attachment: fixed;
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font-family: monospace;
  padding-left: 5%;
  padding-right: 5%;
}
.body {
  background-color: rgba(0,0,0,0.75);
  padding: 16px;
  border: 1px solid white;
}

/* Text */
::selection {
  background-color: white;
  color:black;
}
::-moz-selection {
  background-color: white;
  color:black;  
}
h1 {
  text-align: center;
  text-shadow: 2px 2px 5px black;
  font-size: 64px;
}
hr {
  border: 0;
  height: 1px;
  background: #ff0000;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff0000), color-stop(25%,#ffff00), color-stop(50%,#00ff00), color-stop(75%,#00ffff), color-stop(100%,#0000ff));
  background: -webkit-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
  background: -moz-linear-gradient(-45deg, #ff0000 0%, #ffff00 25%, #00ff00 50%, #00ffff 75%, #0000ff 100%);
  background: -o-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
  background: -ms-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
  background: linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
}
a:link {
  color: #c0c2c4;
}
a:visited {
  color: #c0c2c4;
}
.rainbow:hover {
  -webkit-animation:rainbow 2s infinite;
  -ms-animation:rainbow 2s infinite;
  -o-animation:rainbow 2s infinite;
  animation:rainbow 2s infinite;
}
@-webkit-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}
@-o-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}
@keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}

/* Images */
img {
  filter:grayscale(100%);
  transition: .5s ease;
}
img:hover {
  filter:grayscale(0%);
  transition: .5s ease;
}
.right {
  float: right;
}
.left {
  float: left;
}
.margin {
  margin: 16px
}
.mobileFriendly {
  max-width: 10%;
}
.mobileFriendlyLarge {
  max-width: 25%
}
.comicFriendly {
  max-width: 100%
}