@import url("NavBar.css");

body {
  background-color: black;
  margin: 0;
}

h1 {
  width: 60%;
  text-align: center;
  color: gray;
}

h2 {
  width: 60%;
  text-align: center;
  color: lightgray;
}

.flavortext {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*Special div for comics title page*/
.comicsTitle {
  overflow: hidden;
  animation: comicsTitleBackgroundPan 120s infinite linear 1s;
  background-size: auto 100%;
  background-image: url("../Images/ComicImages/ComicBackground.jpg");
  height: 60%;
  width: 100%;
}

/*Special div for comics title's intro animation*/
.comicsBackgroundTitleIntro {
  text-align: center;
  animation: comicsTitleBackgroundIntro 1s 1 ease;
  background-size: auto 100%;
  background-image: none;
  height: 100%;
  width: 100%;
}

.comicCover {
  text-align: center;
}

/*Special id tags*/
#comicsTitleWords {
  transition: filter 0.5s ease;
  animation: comicsTitleWordsIntro 2s 1 ease;
  filter: drop-shadow(0px 0px 30px black);
  width: 40%;
  max-width: 580px;
  min-width: 420px;
  margin-top: 100px;
}

#comicCoverImage {
  margin: 40px 40px 40px 40px;
  width: 400px;
}

#comicCoverImage:hover {
  filter: drop-shadow(0px 0px 20px silver);
}

/*Pan background image constantly to the left, also load it in every frame to */
@keyframes comicsTitleBackgroundPan {
  0% {background-position: 0% 0%;}
  100% {background-position: -1957px 0%;}
}

/*Pan background image super fast to the left*/
@keyframes comicsTitleBackgroundIntro {
  0% {background-position: 7828px 0%; opacity: 100%; background-image: url("../Images/ComicImages/ComicBackground.jpg");}
  100% {background-position: 0% 0%; opacity: 100%; background-image: url("../Images/ComicImages/ComicBackground.jpg");}
}

/*move object downwards from top of page*/
@keyframes comicsTitleWordsIntro {
  0% {margin-top: -100%;}
  100% {margin-top: 100px;}
}