:root{
	--MaidlyPurple:rgba(110,20,100,100);
}

body {
  background-color: Black;
	font-family:"Century Gothic",Sans-Serif;
	margin: 0;
	margin-top:0;
	padding-top:0;
	color:rgb(225,225,225);
	background:linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 16%, rgba(25, 9, 25, 1) 40%,rgba(25, 9, 25, 1) 60%, rgba(0, 0, 0, 1) 84%, rgba(255, 255, 255, 0) 100%),url(Misc/BW_Tile.jpg);
	background-repeat:repeat;
	
	  animation-timing-function: linear;
  animation-name:backgroundAnim;
  animation-duration:120s;
  animation-iteration-count: infinite;
}
@keyframes backgroundAnim
{
  from {background-position: 0 0, 0 0;}
  to {background-position: 0 0,-1000px -1000px;}
}

body:before{
	
}
@media (orientation: landscape) {
.main{
	width:70%;
}
}


@media (orientation: portrait) {
.main{
	width:95%;
}
}


.main{
		margin-bottom:1em;
	margin-top:0.5em;
		padding-left:1vW;
	padding-right:1vW;
	text-shadow:0 0 2px var(--MaidlyPurple);
		padding:1%;	
		margin-left:auto;
		margin-right:auto;
}
.imageDesc{
	text-align:center;
	font-size:0.8em;
	color:rgb(200,200,200);
}

h1{
	font-family:"Petit Formal Script";
	font-size:2em;
	text-decoration: underline;
	text-decoration-color: var(--MaidlyPurple);
	text-align:center;
}
h2
{
	text-decoration: underline;
	text-decoration-color:var(--MaidlyPurple);
	font-size:1.3em;
		text-align:center;
		font-family:"Petit Formal Script";
}
h3
{
	font-size:1.2em;
}
li{
	font-size:1em;
}

@keyframes textAnim
{
  from {left: -100%;}
  to {right: -100%;}
}

.hidden{
	display:none !important;
}

a
{
	padding-left:0.5vW;
}
.centeredDisplay
{
	width:50%;
	margin: auto;
}
.centeredDisplay img{
	max-width:100%;
}
.centeredDisplay div
{
	padding-left:1vW;
	padding-right:1vW;
	margin-top:1vH;
	margin-bottom:1vH;
}
.musicPlayer{
	position:fixed;
	bottom:0;
	width:100%;
	background-color:rgb(100,100,100);
	z-index:99;
		font-family:"Petit Formal Script";
}
.musicPlayer a 
{
	color:var(--MaidlyPurple);
	position:relative;
  animation-timing-function: linear;
  animation-name:textAnim;
  animation-duration:10s;
  animation-iteration-count: infinite;
}
a {
	color:#d9c027;
}
a:hover{
	color:#ffde11;
	text-shadow:0 0 1px #ffde11, 0 0 5px #ffde11;
}
hr{
	width:99%;
	margin-left:auto;
	margin-right:auto;
	border:solid 3px var(--MaidlyPurple);
	border-radius:25px;
	box-shadow:0 0 15px var(--MaidlyPurple), 0 0 5px var(--MaidlyPurple);
}