/* kcodes_cv.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'
			'cv_name cv_name'
			/* 'cv_contactdetails cv_contactdetails' */
			/* 'cv_personalstatement cv_personalstatement' */
			'cv_personalstatement cv_contactdetails'
			/* 'cv_skills cv_skills' */
			'cv_skills cv_education'
			'cv_skills cv_volunteerexperience'
			/* 'cv_workeexperience cv_education' */
			/* 'cv_workeexperience cv_volunteerexperience' */
			'cv_workeexperience cv_workeexperience'
			'cv_interests cv_interests'
			'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'
			'cv_name'
			'cv_contactdetails'
			'cv_personalstatement'
			'cv_skills'
			'cv_education'
			'cv_volunteerexperience'
			'cv_workeexperience'
			'cv_interests'
			'footer';
	}
	nav ul 
	{
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
}
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;
}
main
{
    display: grid;
	/* display: none; */
	grid-area: main;
	/* background-color: #ABCDEF; */
    background-color: #FFFFFF;
	border: solid 0.1vw #000000;
	border-radius: 0.5vw;
    width: auto;
	padding: 1vw;
}
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;
}
.cv_name
{
    display: grid;
	/* display: none; */
	grid-area: cv_name;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	font-family: simsun;
	color: #000000;
	font-size: x-large;
	text-align: center;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
p
{
	padding: 0.5vw;
	margin-left: 0.5vw;
}
.cv_heading 
{
	background-color: #E3E3E3;
	color: #000000;
	padding: 0.7vw;
	border: solid 0.3vw #000000;
	border-left: solid 1vw #555555;
	font-family: simsun;
	font-size: large;
}
.cv_contactdetails
{
    display: grid;
	/* display: none; */
	grid-area: cv_contactdetails;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_personalstatement
{
    display: grid;
	/* display: none; */
	grid-area: cv_personalstatement;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_skills
{
    display: grid;
	/* display: none; */
	grid-area: cv_skills;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_education
{
    display: grid;
	/* display: none; */
	grid-area: cv_education;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_volunteerexperience
{
    display: grid;
	/* display: none; */
	grid-area: cv_volunteerexperience;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_workeexperience
{
    display: grid;
	/* display: none; */
	grid-area: cv_workeexperience;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
.cv_interests
{
    display: grid;
	/* display: none; */
	grid-area: cv_interests;
	/* background-color: #E0B3FF; */
    background-color: #FFFFFF;
	/* border: solid 0.1vw #000000; */
	/* border-radius: 0.5vw; */
    width: auto;
	padding: 0.5vw;
}
ul .outerbullet
{
	font-weight: bold;
}
ul li .outerbullet
{
	list-style-type: solid;
}
ul li .innerbullet
{
	font-weight: normal;
	list-style-type: '- ';	
}