:root {
--bordercol: #e6e6ff;
--borderglow: #9933ff;
--textcol: #e6e6ff;
--textglow: #9933ff;
--linkcol: yellow;
--linkhover: orange;
}

body {
	text-align: center;
	background-color: black;
	background-image: Url("./stars.gif");
	font-family: pixoperator;
            opacity: 0;
            animation: fadeIn .5s forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }


h1 {
text-align: center;
}

p {
text-align: left;
font-size: 20px;
}

.container {
max-width: 1000px;
margin:auto;	
}
.content {
	display: flex;
	justify-content: center;
	margin: auto;
	
}

.main {
	background: linear-gradient(360deg,rgba(0, 0, 0, 0.6) 0%, rgba(31, 41, 51, 0.6) 49%, rgba(53, 55, 56, 0.6) 50%, rgba(108, 117, 117, 0.6) 100%);
	margin: auto;
	border-color: var(--bordercol);
	border-width: 3px;
	border-style: solid;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 0 0.9em 0 var(--borderglow), 0 0 0.9em 0 var(--borderglow);
	text-shadow: var(--textglow) 0px 0px 7px;
	color: var(--textcol);
}

.box {
	background-color: black;
	margin: auto;
	border-color: var(--bordercol);
	border-width: 3px;
	border-style: solid;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 0 0.9em 0 var(--borderglow), 0 0 0.9em 0 var(--borderglow);
	text-shadow: var(--textglow) 0px 0px 7px;
	color: var(--textcol);
}
@font-face {
  font-family: "pixoperator";
  src: url("https://monoki.neocities.org/assts/fonts/PixelOperator.ttf") format("truetype");
}

.pulsate {
	animation-name: pulse;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: forward;
}
@keyframe pulse {
		0% {margin-top:0px;}
		50% {margin-top:50px;}
		100% {margin-top: 0px;}
	}
	
button {
	border-radius: 25px;
	height:40px;
	color: var(--textcol);
	font-family: pixoperator;
	background: linear-gradient(360deg,rgba(0, 0, 0, 1) 0%, rgba(31, 41, 51, 1) 49%, rgba(53, 55, 56, 1) 50%, rgba(108, 117, 117, 1) 100%);
	box-shadow: inset 0 0 0.9em 0 var(--borderglow), 0 0 0.9em 0 var(--borderglow);
	text-shadow: var(--textglow) 0px 0px 7px;
}

a {
color: var(--linkcol);
text-shadow: var(--linkcol) 0px 0px 7px;
}

a:hover {
color: var(--linkhover);
text-shadow: var(--linkhover) 0px 0px 7px;
}
	
/*character list*/