*
	{
	box-sizing: border-box;
	}

body
	{
	font-family: "Special Elite", system-ui;
	color: #ffffff;
	background-color: #333333;
	}

.grid-container
	{
	display: grid;
	grid-template-areas:
		"header"
		"menu"
		"main"
		"detail"
		"footer";
	gap: 10px;  
	}

.header
	{
	grid-area: header;
	text-align: center;
	}

.menu
	{
	grid-area: menu;
	}

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

.menu li
	{
	padding: 8px;
	margin-bottom: 7px;
	background-color: #666666;
	}

.menu li:hover
	{
	background-color: #990000;
	}

.content
	{
	grid-area: main;
	}

.detail
	{
	grid-area: detail;
	background-color: rgba(102, 102, 102, 0.5);
	padding: 10px;
	}

.detail li
	{
	margin-bottom: 5px;
	}

.footer
	{
	grid-area: footer;
	text-align: center;
	}

@media (min-width: 600px)
	{
	.header
	{grid-area: 1 / span 6;}
	.menu
	{grid-area: 2 / span 1;}
	.content
	{grid-area: 2 / span 4;}
	.detail
	{grid-area: 3 / span 6;}
	.footer
	{grid-area: 4 / span 6;}
	}

@media (min-width: 768px)
	{
	.header
	{grid-area: 1 / span 6;}
	.menu
	{grid-area: 2 / span 1;}
	.content
	{grid-area: 2 / span 4;}
	.detail
	{grid-area: 2 / span 1;}
	.footer
	{grid-area: 3 / span 6;}
	}
.bgimg
	{
	background-image: url("background.jpg");
	min-height: 100%;
	background-position: center;
	background-size: cover;
	}

a:link
	{
	text-decoration: underline;
	color: #ffffff;
	}
a:visited
	{
	text-decoration: underline;
	color: #ffffff;
	}
a:hover
	{
	color: #999999;
	}
a:active
	{
	color: red;
	}

.ah, .bh, .bk, .name
	{
	font-family: "Rubik Dirt", system-ui;
	hyphens:none;
	}
.ah
	{
	margin-top:1em;
	margin-bottom:0.7em;
	margin-left: 0.3em;
	text-align:left;
	font-size:200%;
	}
.bh
	{
	margin-top:1.3em;
	margin-left: 0.3em;
	margin-bottom:0.2em;
	text-align:left;
	font-size:130%;
	}
.bk
	{
	font-size:300%;
	text-align:center;
	}
.display, .li, .lif, .lil, .p, .paft, .pcon, .pl, .psec
	{
	font-family: "Special Elite", system-ui;
	line-height: 1.5;
	hyphens:none;
	}
.display
	{
	margin-left:1.5em;
	margin-right:1.5em;
	margin-bottom: 0.7em;
	font-size:130%;
	text-align:center;
	}
.i
	{
	font-style:italic;
	}
.li
	{
	margin:0;
	margin-left:1.5em;
	text-align:left;
	}
.lif
	{
	margin:0;
	margin-left:1.5em;
	margin-top:0.8em;
	text-align:left;
	}
.lil
	{
	margin:0;
	margin-left:1.5em;
	margin-bottom:0.8em;
	text-align:left;
	}
.name
	{
	letter-spacing:0.05em;
	}
.p
	{
	margin:0;
	margin-left: 0.3em;
	text-indent:1.5em;
	text-align:left;
	}
.paft
	{
	margin:0;
	margin-left: 0.3em;
	text-align:left;
	}
.pcon
	{
	margin:0;
	margin-left: 0.3em;
	margin-top:1.4em;
	text-indent:0;
	text-align:left;
	}
.pconc
	{
	margin:0;
	margin-left: 0.3em;
	margin-top:1.4em;
	text-indent:0;
	text-align:center;
	}
.pl
	{
	margin:0;
	margin-left: 0.3em;
	margin-bottom: 0.5em;
	text-indent:1.5em;
	text-align:left;
	}
.psec
	{
	margin:0;
	margin-left: 0.3em;
	margin-top:0.7em;
	text-indent:0;
	text-align:left;
	}