*{
	margin: 0;
}

html{
	height:100%;
	background-color:black;
}

@font-face {
	font-family:"Consolas";
	src:url("./Fonts/consola.ttf") format("truetype");
}

body{
	padding:40px;
	background-color:black;
	font:inherit;
	font-family: Consolas, monospace;
	color:white;
}

p{
	color:#ffffff;
}

a:link{
	color:#00ddff;
}

a:visited{
	color:#00ffaa;
}

a:hover{
	color:#ffcc00;
}

a:active{
	color:#ff0000;
}

.outline{
	padding: 20px;
	border: 5px solid white;
}
.cyan{
	color:#00ffff
}

.red{
	color:red;
}

.animated-rainbow {
    background: linear-gradient(to left, #f00,
	#ff2b00,
	#f50,
	#ff8000,
	#fa0,
	#ffd500,
	#ff0,
	#d4ff00,
	#af0,
	#80ff00,
	#5f0,
	#2bff00,
	#0f0,
	#00ff2a,
	#0f5,
	#00ff80,
	#0fa,
	#00ffd5,
	#0ff,
	#00d5ff,
	#0af,
	#0080ff,
	#05f,
	#002aff,
	#00f,
	#2b00ff,
	#50f,
	#8000ff,
	#a0f,
	#d400ff,
	#f0f,
	#ff00d4,
	#f0a,
	#ff0080,
	#f05,
	#ff002b,
	#f00);
    animation: rainbow-move-left-right 5s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
   -webkit-text-fill-color: transparent;
}
@keyframes rainbow-move-left-right {
    0% {background-position: 0 0    }
    100% {background-position: -500px 0}
}

.animated-rainbow-2 {
    animation: rainbow-color-change 3s linear infinite alternate;
}
@keyframes rainbow-color-change {
    0%, 100% { color: #ff0000; } /* Red */
    14% { color: #ff8b00; } /* Orange */
    28% { color: #e8ff00; } /* Yellow */
    42% { color: #5dff00; } /* Green */
    56% { color: #00b9ff; } /* Blue */
    70% { color: #5d00ff; } /* Indigo */
    84% { color: #e800ff; } /* Violet */
}

.warning{
	animation: warning-color-change 1s linear infinite alternate;
}
@keyframes warning-color-change {
	0%, 100% { color: #ff0000; }
	50% {color: #ffff00; }
}

.spoiler-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.spoiler-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: gray;
	color: gray;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.spoiler-container.revealed .spoiler-overlay {
	opacity: 0;
	pointer-events: none;
}

.spoiler-text {
	color: white;
 	background-color: #222;
 	padding: 5px 10px;
 	border-radius: 4px;

}

.john {
	background:linear-gradient(to left,#7676FF, #00FFFF, #7676FF);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}