@charset "utf-8";
@property --main-text-color{
	syntax: "<color>";
	initial-value: #ff0000;
	inherits: true;
	}
@property --main-bg-color{
	syntax: "<color>";
	initial-value: #ff0000;
	inherits: true;
	}
@property --transition-speed{
	syntax: "<time>";
	initial-value: 0.5s;
	inherits: true;
	}

/* CSS Document */
:root{
	--main-text-color: #ff0000;
	--main-bg-color: #ff0000;
	--main-div-color: rgba(255,255,255,0.9);
	--transition-speed: 0.5s;
	transition: --main-bg-color var(--transition-speed), --main-text-color var(--transition-speed);
}
body{
	background: url("../images/finalTessel2.png") var(--main-bg-color);
	/*background-color:rgba(0,0,0,1);*/
	font-size:0.85em;
}
.normal{
	font-family:georgia,serif;
	color:var(--main-text-color);
	background-color:rgba(255,255,255,0.9);
	padding:5px;
}
#red{
	color:#ff0000;
}
#red:hover{
	color:#ffffff;
	background-color:rgba(255, 0, 0, 0.75);
}
#orange{
	color:#f77f34;
}
#orange:hover{
	color:#ffffff;
	background-color:rgba(247, 127, 52, 0.75);
}
#yellow{
	color:#ffb700;
}
#yellow:hover{
	color:#ffffff;
	background-color:rgba(255, 183, 0, 0.75);
}
#green{
	color:#11ad00;
}
#green:hover{
	color:#ffffff;
	background-color:rgba(17, 173, 0, 0.75);
}
#blue{
	color: #0356fc;
}
#blue:hover{
	color:#ffffff;
	background-color:rgba(3, 86, 252, 0.75);
}
#purple{
	color:#9136c2;
}
#purple:hover{
	color:#ffffff;
	background-color:rgba(145, 54, 194, 0.75);
}
.themeIcon{
	max-width:25%;
}