/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'DotGothic16';
  src: url("/fonts/DotGothic16-Regular.ttf");
}

@keyframes scroll-bg {
  from {background-position: 0 0;}
  to {background-position: 640px 480px;}
}

@keyframes shine {
  0% {
    background-position:0px
  }
  100% {
    background-position:256px
  }
}

@keyframes jumpscare {
  0% {
    transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)
  }
  100% {
    transform:rotateX(360deg) rotateY(0deg) rotateZ(360deg)
  }
}

body {
  background-color: teal;
  font-size: 1rem;
  color: yellow;
  background-image: url("/img/carbuncle_tile.png");
  background-repeat: repeat;
  font-family: "FreeSans", "Helvetica", sans-serif;
  margin: 0;
  padding: 0;
  animation-name: scroll-bg;
  animation-duration: 32s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  image-rendering: pixelated;
}
* {
  margin: 0;
}

.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "DotGothic16", sans-serif;
  font-weight: normal;
}
  
.box {
  
  background-color: darkslategrey;
  margin: 1rem;
  color: white;

  overflow: hidden;
  padding: 2rem;
  border-image-slice: 16 18 16 18;
  border-image-width: 16px 18px 16px 18px;
  /*border-image-width: 32px 36px 32px 36px;*/
  border-image-outset: 0px;
  border-image-repeat: round round;
  border-image-source: url("/img/carbuncle_border.gif");
  border-style: solid; 
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 2px 2px 16px rgba(0,0,0,0.5);
  /*text-shadow: 1px 1px 1px black;*/
  

}

.rainbow-text {
  background:linear-gradient(90deg, red 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, red 100%);
  background-position:0 0;
  background-size:256px 64px;
  background-clip:text;
  color:transparent;
  animation-name:shine;
  animation-duration:2000ms;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.jumpscare {
  perspective:70deg;
  display:inline-block;
  animation-name:jumpscare;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-name:jumpscare;
  animation-duration:5000ms
}