* 
{
	margin: 0;
	box-sizing: border-box;
}

@font-face
{
	font-family: AlbertBlack;
	src: url('font/AlbertSans-Black.ttf') format('truetype');
}

@font-face
{
	font-family: AlbertLight;
	src: url('font/AlbertSans-Light.ttf') format('truetype');
}

@font-face
{
	font-family: AlbertSemi;
	src: url('font/AlbertSans-SemiBold.ttf') format('truetype');
}

body
{
	background-color: #222222;
	color: #cccccc;
}

.container
{  
	display: grid;
	grid-template-columns: 0.5fr 1.5fr;
	grid-template-rows: 0.85fr 2fr 0.15fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
		"logo main"
		"menu main"
		"footer main";
	width: 80%;
	height: 90%;
	margin: 0 auto;
}

.main 
{
	grid-area: main; 
	font-family: AlbertSemi;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0.1fr 0.1fr 0.1fr 1.7fr;
	gap: 0px 0px;
	grid-template-areas:
	"main_buttons"
	"main_buttons_round"
	"round_title"
	"main_term";
	overflow-y: scroll;
	margin-top: 6rem;
}

.main_term
{
	grid-area: main_term;
	justify-content: center;
	display: flex;
	align-items: baseline;
	margin-top: 25px;
}

.main_buttons
{
	grid-area: main_buttons;
	justify-content: space-evenly;
	display: flex;
	align-items: end;
}

.main_buttons_round
{
	grid-area: main_buttons_round;
	justify-content: space-evenly;
	display: flex;
	align-items: end;
}

.round_title
{
	grid-area: round_title;
	justify-content: space-evenly;
	display: flex;
	align-items: end;
	font-family: AlbertBlack;
	font-size: 2.5em;
	margin-top: 25px;
}

.main_buttons a, .main_buttons_round a
{
	text-decoration: none;
	border-radius: 28px;
	padding: 10px 20px;
	width: 10rem;
	text-align: center;
	background-color: #ddffcc;
	color: #222222;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

.main_buttons a:hover, .main_buttons_round a:hover
{
	background-color: #222222;
	color: #ddffcc;
}

.table-table, .table-term
{
	text-align: center;
	border-collapse: collapse;
}

#table-head-first, #table-head-last64, #table-head-last32, #table-head-last16, #table-head-qf, #table-head-sf, #table-head-f
{
	font-family: AlbertBlack;
	background-color: #ddffcc;
	color: #222222;
}

a
{
	text-decoration: none;
	color: #555555;
	transition: color 100ms linear;
}

a:hover
{
	color: #ff0000
}

th, td
{
	padding: 5px 15px 5px 15px;
}

#table-body-first a, #table-body-last64 a, #table-body-last32 a, #table-body-last16 a, #table-body-qf a, #table-body-sf a, #table-body-f a
{
	text-decoration: none;
	color: #777777;
	transition: color 200ms ease-in-out;
}

#table-body-first a:hover, #table-body-last64 a:hover, #table-body-last32 a:hover, #table-body-last16 a:hover, #table-body-qf a:hover, #table-body-sf a:hover, #table-body-f a:hover
{
	color: #ddffcc;
}

.logo 
{ 
	grid-area: logo; 
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu 
{ 
	grid-area: menu; 
	font-family: AlbertSemi;
	display: flex;
	font-size: 32px;
	justify-content: center;
	text-align: center;
}

ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li
{
	padding-top: 2.5px;
	padding-bottom: 2.5px;
	letter-spacing: -1px;
	color: #ddffcc;
}

h4
{
	color: rgba(221, 255, 204, 0.5);
	font-size: 20px;
}

#liga_menu
{
	color: #ddffcc;
	font-size: 24px;
}

.footer 
{ 
	grid-area: footer; 
	font-family: AlbertLight;
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu a
{
	text-decoration: underline;
	color: #777777;
	overflow: hidden;
  	background: linear-gradient(to right, #ddffcc, #ddffcc 50%, #777777 50%);
  	background-clip: text;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	background-size: 200% 100%;
  	background-position: 100%;
  	transition: background-position 600ms ease;
}

.menu a:hover
{
    background-position: 0 100%;
}

.footer a
{
	fill: #777777;
	transition: fill 200ms ease, filter 200ms ease;
}
.footer a:hover
{
	fill: #ddffcc;
	filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.5));
}

::-webkit-Scrollbar
{
	width: 5px;
	height: 5px;
}
::-webkit-Scrollbar-track
{
	border-radius: 10px;
	background: rgba(221, 255, 204, 0.1);
}
::-webkit-Scrollbar-thumb
{
	border-radius: 10px;
	background: rgba(221, 255, 204, 0.4);
}
::-webkit-Scrollbar-thumb:hover
{
	border-radius: 10px;
	background: rgba(221, 255, 204, 0.7);
}
::-webkit-Scrollbar-thumb:active
{
	border-radius: 10px;
	background: rgba(221, 255, 204, 0.9);
}