:root{
	--pal_black: #0b162c;
	--black: #000008;
	--blue_black: #0b1c4e;
	--pal_white: #f9feff;
	--pal_blue: #21b9fa;
	--pal_red: #750e0e;
	--pal_yellow: #fcf648;
	--pal_grey: #66656f;
}

@font-face{
	font-family: font;
	src:url("aleo-regular-webfont.ttf");
	font-family: fonts;
	src:url("sage.otf");
}

body{
	font-family: 'fonts', serif; font-weight:900; font-size: medium;
}
.index{
	position:fixed; color: var(--pal_white); background-color: var(--black);
	width: 100%; height: 10%; padding: 0px;	
}

.index ul{
	list-style: none; padding: 0; margin: 0px; height:100%
}
.index li{
	float: left; width:20%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.index ul li:hover {
	background-color: var(--blue_black);
	transition-duration: 0.32360679775s;
}
.title{
	padding-top: 20%; padding-bottom: 20%; padding-right: 10%; padding-left: 10%; color: var(--pal_red);  font-size: 60px;
	text-shadow:  7px 7px 5px #0000005e;font-family: Arial, sans-serif; line-height: 100%; text-align: center;

}
.b_page{
	background-color: var(--pal_black); color: var(--pal_white); padding: 10%; font-family: Arial, sans-serif;
	font-weight: normal;
}

.w_page{
	background-color: var(--pal_white); color: var(--pal_black); padding: 10%; font-family: Arial, sans-serif;
	font-weight: normal; 
}
.w_page td{
	font-size: medium;
}
.w_page table{
	text-align: center;
}
.w_page col{
	width: 1%;
}
.img_link:hover{
	background-color: var(--blue_black);
	transition-duration: 0.32360679775s;
}