story_stylesheet.css

@import url('https://fonts.googleapis.com/css?family=Mountains+of+Christmas&display=swap');
  
html {
  font-family: 'Mountains of Christmas', cursive;
}

body 
{
  font-size: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
}

.image
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height:200px;
  width: auto;
  height: 30%;
  text-align: center;
}

#logo
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  text-align: center;
}

body[data-tags~="Logo"] { 
  background-color: #FFFFFF;
}

body[data-tags~="COVER"] { 
  background-color: #FFFFFF;
}

body[data-tags~="LRH"] { 
  background-color: #6e0f2d
}

body[data-tags~="PAW"] { 
  background-color: #24305e
}

body[data-tags~="TLP"] { 
  background-color: #1D4D4F
}

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}

a {
  color: #f5af22;
}

a:hover{
  	color: #f5af22;
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

body[data-tags~="QC"] {
	margin: 0;
	width: 100%;
	height: 100vh;
	color: #fff;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 10s ease infinite;
    }

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}