@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600&display=swap');



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



:root {

	--grey:#999;
	--blue:#03a9f4;
	--midnightblue:#003147;
	/* --blue:dodgerblue; */

	--backcolor:#DDD;
	--backcolor:var(--blue);
	--backcolor:lightblue;

	--spacing:2rem;
	--pagewidth:75rem;
	--lettergap:.125rem;

	--boxshadow:0 0 1rem #0002;
	--boxshadow:0 0 .25rem #0003;
	--boxshadowx:rgba(0,0,0,0.25) 0 0.25rem .75rem 0;
}



html {background-color:var(--backcolor);}
body {font-family:Nunito,sans-serif; margin:0;}



/* Main Container */
div#container {display:grid; place-items:center; min-height:100vh; padding:2rem;}
div#container main.main {background-color:white; width:100%; max-width:var(--pagewidth); overflow:hidden; border-radius:.5rem; box-shadow:var(--boxshadowx);}
div#container main.main div.inner {display:grid; grid-template-columns: 1fr 3fr; grid-template-columns:2fr 5fr; /* grid-gap:2rem; */}
/* div#container main.main div.inner {display:flex; flex-direction:row; align-items:stretch;} */
div#container main.main div.inner div.side {padding:2rem; padding:3rem;}
div#container main.main div.inner div.side.left {background-color:var(--midnightblue); color:white; /* padding-right:2rem; */}
div#container main.main div.inner div.side.right {background-color:white; /* padding-left:2rem; */}

/* General Section */
div#container main.main section {margin-top:4rem;}
div#container main.main section h3.header {font-weight:600; letter-spacing:var(--lettergap); padding-left:.75rem; border-left:.125rem solid hotpink; margin-bottom:1rem;}
div#container main.main section p.textcopy {font-weight:100;}
div#container main.main section ul.list {list-style:none;}
div#container main.main section ul.list li.listitem {display:flex; flex-direction:row; margin-top:1rem;}
div#container main.main section ul.list li.listitem svg.icon {color:var(--blue); margin-right:.5rem;}
/* div#container main.main section ul.list li.listitem span.caption {} */


/* Title Section */
div#container main.main section.title {display:flex; flex-direction:column; justify-content:center; align-items:center; margin-top:0;}
div#container main.main section.title h1.name {font-size:2.125rem; font-weight:800; line-height:1; letter-spacing:var(--lettergap); text-align:center; white-space:nowrap; margin:0; margin-top:2rem;}
div#container main.main section.title h2.title {font-weight:100; letter-spacing:var(--lettergap); white-space:nowrap; margin:0;}
div#container main.main section.title div.art {--relsize:75%; position:relative; width:var(--relsize); padding-top:var(--relsize);}
div#container main.main section.title div.art img.avatar {position:absolute; top:0; left:0; height:100%; width:100%;}
div#container main.main section.title div.art img.avatar {border-radius:50%;}
div#container main.main section.title div.art img.avatar {object-fit:cover; /* border-radius:.5rem; */}

/* Contact Info Section */
/* div#container main.main section.contact {} */
/* div#container main.main section.contact ul.list {} */
div#container main.main section.contact ul.list li.listitem {flex-direction:row; align-items:center;}
div#container main.main section.contact ul.list li.listitem a.contactlink {color:inherit; text-decoration:none;}

/* Education Section */
/* div#container main.main section.education {} */
/* div#container main.main section.education ul.list {} */
div#container main.main section.education ul.list li.listitem {flex-direction:column; align-items:flex-start;}
div#container main.main section.education ul.list li.listitem span.time {color:var(--blue); font-size:.875em;}
/* div#container main.main section.education ul.list li.listitem span.degree {} */
div#container main.main section.education ul.list li.listitem span.school {color:var(--grey);}

/* Languages Section */
/* div#container main.main section.language {} */
/* div#container main.main section.language ul.list {} */
div#container main.main section.language ul.list li.listitem {flex-direction:column; align-items:stretch;}

/* Interests Section */
/* div#container main.main section.interest {} */
div#container main.main section.interest ul.list {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:.5rem;}
div#container main.main section.interest ul.list li.listitem {align-items:center;}
div#container main.main section.interest ul.list li.listitem svg.icon {background-color:var(--blue); color:white; font-size:2rem; padding:.5rem; border-radius:.25rem;}
div#container main.main section.interest ul.list li.listitem span.caption {white-space:nowrap;}


/* Profile Section */
/* div#container main.main section.profile {display:none;} */
/* div#container main.main section.profile article.textcopy {} */
div#container main.main section.profile article.textcopy p.textcopy {font-weight:100; margin-top:1rem;}

/* Experience Section */
/* div#container main.main section.experience {} */
/* div#container main.main section.experience ul.list {} */
div#container main.main section.experience ul.list li.listitem {display:grid; grid-template-columns:1fr 2fr; grid-template-columns:8fr 18fr; grid-gap:.5rem;}
div#container main.main section.experience ul.list li.listitem div.xyz {display:flex; flex-direction:column; align-items:flex-start;}
div#container main.main section.experience ul.list li.listitem div.xyz span.time {color:var(--blue); font-size:1rem; /* white-space:nowrap; */}
/* div#container main.main section.experience ul.list li.listitem div.xyz span.companyname {} */
div#container main.main section.experience ul.list li.listitem div.xyz span.positionname {color:var(--blue); font-size:1.125rem;}
/* div#container main.main section.experience ul.list li.listitem div.xyz span.description {} */

/* Skills Section */
/* div#container main.main section.proskills {} */
/* div#container main.main section.proskills ul.list {} */
div#container main.main section.proskills ul.list li.listitem {display:grid; grid-template-columns:1fr 2fr; grid-gap:.5rem;}





/* Tablet Screen */
@media screen and (max-width:64rem) {


	/* Main Container */
	/* div#container {} */
	/* div#container main.main {} */
	div#container main.main div.inner {grid-template-columns:1fr 8fr;}
	div#container main.main div.inner {display:flex; flex-direction:column; align-items:stretch;}

	/* General Section */


	/* Title Section */
	/* div#container main.main section.title {} */
	div#container main.main section.title div.art {display:grid; place-items:center; padding:0;}
	div#container main.main section.title div.art img.avatar {position:static; --imgsize:12rem; height:var(--imgsize); width:var(--imgsize);}

	/* Contact Info Section */

	/* Education Section */

	/* Languages Section */

	/* Interests Section */


	/* Profile Section */

	/* Experience Section */

	/* Skills Section */
}

/* Big Smartphone Screen */
@media screen and (max-width:46rem) {
	

	/* Main Container */
	
	/* General Section */

	
	/* Title Section */
	
	/* Contact Info Section */
	
	/* Education Section */
	
	/* Languages Section */
	/* div#container main.main section.language {} */
	/* div#container main.main section.language ul.list {} */
	div#container main.main section.language ul.list li.listitem {display:grid; grid-template-columns:1fr 2fr;}
	
	/* Interests Section */

	
	/* Profile Section */
	
	/* Experience Section */
	/* div#container main.main section.experience {} */
	/* div#container main.main section.experience ul.list {} */
	div#container main.main section.experience ul.list li.listitem {display:flex; flex-direction:column;}
	
	/* Skills Section */
}

/* Small Smartphone Screen */
@media screen and (max-width:32rem) {

	
	/* Main Container */
	div#container {padding:1rem;}
	
	/* General Section */
	
	
	/* Title Section */
	
	/* Contact Info Section */
	
	/* Education Section */
	
	/* Languages Section */
	
	/* Interests Section */

	
	/* Profile Section */
	
	/* Experience Section */
	
	/* Skills Section */
}