/* 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: 'OMORI_GAME2';
  src: local('OMORI_GAME2'), url('fonts/omori/OMORI_GAME2.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  }
@font-face {
  font-family: 'OMORI_GAME';
  src: local('OMORI_GAME'), url('fonts/omori/OMORI_GAME.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  }
        
html, body{
  height: 100%;
  width: 100%;
  background-color: #6C0EFF;
  background: linear-gradient(0deg, rgba(33,5,77,1) 0%, rgba(42,8,129,1) 30%, rgba(108,14,255,1) 100%);
  font-family: 'OMORI_GAME2';
  margin: 0%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
  padding-top: 10px;
  display: inline-block;
  text-decoration: none;
}

#h1 {
  font-size: 90px;
  color: #FFFFFF;
  font-family: 'OMORI_GAME2';
  text-shadow: 0 0 8px #000000;
  top:-10px;
  position: relative;
  
}
#h2 {
  font-size: 30px;
  color: #FFFFFF;
  font-family: 'OMORI_GAME2';
  text-shadow: 0 0 8px #000000;
  top:10px;
  position: relative;
  
}
#h3 {
  font-size: 40px;
  color: #FFFFFF;
  font-family: 'OMORI_GAME2';
  text-shadow: 0 0 8px #000000;
  top:15px;
  position: relative;
}  


#stamp {
  position: relative;
  bottom: 0;
  margin-bottom: 10px;
  width: 100%;
  text-decoration: none;
  z-index: 2;
}

#stamp2 {
  position: relative;
  bottom: 0;
  margin-bottom: 10px;
  width: 100%;
  text-decoration: none;
  z-index: 3;
}

#stamp3 {
  position: relative;
  z-index: 0;
}

.img { 

  margin-left: 25;
}




.header{
  margin-top: 0px;
  margin: auto;
  width: 50%;
  background-image: url("photos/omori/headspacebackground.png");
  background-size: 4%;
  image-rendering: pixelated;
  background-repeat: repeat;
  background-position: center;
  border: 5px solid white;
  padding: 10px;
  display: inline-block;
  z-index: 0;
}


.something{
  margin-top: 0px;
  margin: auto;
  width: 50%;
  background-image: url("images/something.gif");
  background-repeat: repeat;
  background-position: center;
  display: inline-block;
  visibility: hidden;
  z-index: 0;
}

.headerb{
  margin-top: 0px;
  margin: auto;
  width: 50%;
  background-image: url("images/wallpaper.png");
  background-size: 4%;
  image-rendering: pixelated;
  background-repeat: repeat;
  background-position: center;
  border: 5px solid white;
  padding: 10px;
  display: inline-block;
  z-index: 0;
}

.sliding-con {
  overflow: hidden;

}


.sliding-background {
  position: fixed;
  top: 0%;
  right: 0%;
  width: 100%;
  height: 100%;
  animation: slide 24s linear infinite;
  background-image: url("images/objects.png");
  background-size: 150%;
  background-repeat: repeat;
  image-rendering: pixelated;
  opacity: .6;
  overflow: hidden;
  display: inline-block;
  z-index: 0;
}

.sliding-background-stars {
  position: fixed;
  top: 0%;
  right: 0%;
  width: 100%;
  height: 100%;
  animation: slide 48s linear infinite;
  background-image: url("images/stars.png");
  background-size: 150%;
  background-repeat: repeat;
  image-rendering: pixelated;
  opacity: 0.4;
  overflow: hidden;
  display: inline-block;
  z-index: 0;
}

.sliding-background-door {
  position: fixed;
  top: 0%;
  right: 0%;
  width: 100%;
  height: 100%;
  animation: slide 48s linear infinite;
  background-image: url("images/blackdoor.png");
  background-size: 6%;
  background-repeat: repeat;
  opacity: 0.1;
  overflow: hidden;
  display: inline-block;
  z-index: 0;
}
    
 
@keyframes slide{
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 300%;
  }
}