/* kcodes.css */
/* Last update: 04/03/2024 */

body
{
	font-family: aptos, Arial, Tahoma, Verdana, Helvetica, sans-serif;
	background-color: #DDFFFF;
}

@media screen and (min-width: 851px) 
{
	.outer_container
	{
		display: grid;
		grid-gap: 1vw;
		width: auto;
		/* background-color: #0099CC; */
		padding: 1vw;
		grid-template-columns: 2fr 1fr;
		grid-template-areas: 
			'header header'
			'nav nav'
			'main main'
			'box3 box4'
			'box5 box5'
			'box6 box6'
			'box7 box7'
			'footer footer';
	}
	nav ul 
	{
		flex-direction: row;
		align-self: center;
		justify-content: space-evenly;
	}
}
@media screen and (max-width: 850px) 
{
	.outer_container
	{
		display: grid;
		grid-gap: 1vw;
		width: auto;
		/* background-color: #0099CC; */
		margin: 0vw;
		padding: 1vw;
		grid-template-columns: auto;
		grid-template-areas: 
			'header'
			'nav'
			'main'
			'box3'
			'box4'
			'box5'
			'box6'
			'box7'
			'footer';
	}
	nav ul 
	{
		flex-direction: column;
		align-items: center;
	}
}
header
{
    display: grid;
	grid-area: header;
	background-color: #B3D9FF;
	/* background-color: #FFFFFF; */
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	/* height: max-height; */
	/* padding: 0.2vw; */
	/* margin: 0vw; */
	justify-content: center;
}
.pagetitle
{
	/* Available fonts: */
	/* font-family: sketchfont; */
	/* font-family: coretan; */
	/* font-family: marieeve; */
	font-family: pusekatt;
	/* font-family: foretrak; */
	/* font-family: foretrakitalic; */
	/* font-family: pusingkali; */
	/* font-family: schoolholic; */
	font-size: xxx-large;
	color: navy;
}
nav
{
    display: grid; 
	/* inline-grid; */
	grid-area: nav;
	/* background-color: #FFFFB3; */
	/* background-color: #FFFFFF; */
	/* background-color: navy; */
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: max-width;
	margin: 0vw;
	padding: 0vw;
}
.navbutton
{
	background-color: #FFFFFF;
	color: navy;
	align-self: center;
	text-decoration: none;
	cursor: pointer;
	border-style: solid;
	border-width: 0.15vw;
	font-family: coretan;
	/* font-family: pusekatt; */
	font-size: x-large;
	border-bottom-left-radius: 1vw 15vw;
	border-bottom-right-radius: 15vw 1vw;
	border-top-left-radius: 15vw 1vw;
	border-top-right-radius: 1vw 15vw;
	padding: 0.8vw;
}
nav ul 
{
    display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0.5vw 0vw 0.5vw 0vw;
	/* margin: 0; */
}  
nav li
{
	padding: 0.5vw;
}
.box2 li
{
	list-style-type: default;
	color: navy;
}
main
{
    display: grid;
	grid-area: main;
	/* background-color: #ABCDEF; */
    background-color: #FFFFFF;
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 1vw;
	align-content: start;
}
.box3
{
    display: grid;
	/* display: none; */
	grid-area: box3;
	/* background-color: #FFB3B3; */
    /* background-color: #FFFFFF; */
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	/* line-height: 3vw; */
	/* margin-right: 1vw; */
	/* padding: 0.5vw; */
	/* text-align: justify; */
	/* text-align: right; */
	/* font-style: italic; */
	/* font-size: x-large; */
	/* align-content: center; */
	align-content: start;
}
.box4
{
    display: grid;
	/* display: none; */
	grid-area: box4;
	/* background-color: #E0B3FF; */
    /* background-color: #FFFFFF; */
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
	align-content: start;
}
.box5
{
    display: grid;
	display: none;
	grid-area: box5;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 0.5vw;
	align-content: start;
}
.box6
{
    display: grid;
	display: none;
	grid-area: box6;
	/* background-color: #B3FFB3; */
    background-color: #FFFFFF;
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 0.5vw;
	align-content: start;
}
.box6 li
{
	list-style-type: circle;
	color: #008000;
}
.box7
{
    display: grid;
	display: none;
	grid-area: box7;
	background-color: #B3B3E6;
    /* background-color: #FFFFFF; */
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 0.5vw;
	/* margin: 2vw; */
	align-content: start;
}
footer
{
    display: grid;
	grid-area: footer;
	background-color: #B3D9FF;
	/* background-color: #FFFFFF; */
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 0.5vw;
	justify-content: center;
	font-style: italic;
}