:root
{
	--body-background: #8acef1;
	--header-background: #1f7eaf;
	--menu-background: #ffffff;
	--menu-color: #000000;
	--main-background: #e6e6e6;
	--content-max-width: 1300px;
	--content-min-width: 900px;
	--content-link-size: 130px;
	--content-link-size-wide: 220px;
	--content-link-border-width: 2px;
	--content-link-border-color: #000000;
	--content-link-background: #ffffff;
}

@font-face
{
	font-family: UIRoboto;
	src: url(font/Roboto/Roboto/Roboto-Regular.ttf);
}

body
{
    position: absolute;

    width: 100%;
    
	margin: 0px;
	padding: 0px;
	padding-bottom: 100px;

	background-color: var(--body-background);

	font-family: Arial;
}

header
{
	position: relative;

	width: 100%;
	height: 85px;

	margin: 0px;
	padding: 0px;

	background-color: var(--header-background);
}

menu
{
	position: absolute;
	left: 0px;
	bottom: 0px;

	width: 100%;
	height: 50px;

	margin: 0px;
	padding: 0px;

	background-color: var(--menu-background);
}

.menuOption,
.date
{
	position: relative;
	display: block;
	float: left;

	height: inherit;

	margin: 0px;
	padding: 0px;
	padding-right: 7px;
	padding-left: 7px;

	font-size: 45px;
	text-decoration: none;
	color: var(--menu-color);
	font-weight: bold;
}

.menuOption:hover,
.menuOption.select
{
	background-color: #989898;
}

.date
{
	float: right;

	margin-top: 2px;

	font-size: 29px;
	color: #ffffff;
}

main
{
	position: relative;

	width: 100%;

	margin: auto;
	margin-top: 10px;

	padding: 0px;
	padding-top: 15px;
	padding-bottom: 30px;

	text-align: center;

	background-color: var(--main-background);
}

.sizer
{
	width: 100%;
	max-width: var(--content-max-width);
	min-width: var(--content-min-width);
	height: inherit;

	margin: auto;
	padding: 0px;
}

.linkIMG
{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	overflow: hidden;

	height: calc(var(--content-link-size) + var(--content-link-border-width));
	width: calc(var(--content-link-size) + var(--content-link-border-width));

	margin: 0px;
	margin-top: 2px;
	border: var(--content-link-border-width) solid var(--content-link-border-color);
	padding: 0px;

	background-color: var(--content-link-background);
}

.linkIMG.wide
{
	width: calc(var(--content-link-size-wide) + var(--content-link-border-width));
}

.linkIMG.black
{
	background-color: #000000;
}

.linkIMG img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.linkIMG.pad img
{
	width: calc(100% - 10px);
	height: calc(100% - 10px);

	margin: 5px;
}

.linkIMG.cover img
{
	object-fit: cover;
}

.linkIMG div
{
	position: absolute;
	bottom: 0px;
	left: 0px;

	width: 100%;

	color: #000000;
	text-decoration: none;
	font-weight: bold;
	font-family: UIRoboto;
}