h1 {
	font-size: 2.1rem;
	page-break-after: avoid;
}
h2 {
	font-size: 1.7rem;
	page-break-after: avoid;
}
h3 {
	font-size: 1.5rem;
	padding-top: 2vh;
	page-break-after: avoid;
}
h4 {
	font-size: 1.3rem;
	page-break-after: avoid;
}

p {
	font-size: 1.2rem;
	page-break-inside: avoid;
}

@media print {
	@page { 
		margin: 0;
	}
	
}

.resume {
	display: grid;
	grid-template-areas: 'header experience'
		'skills experience'
		'imprint imprint'; 
	grid-template-rows: 35vh 60vh 5vh; 
	grid-template-columns: 40vw 60vw;
}

@media (max-width: 970px) {
	.resume {
		grid-template-areas: 'header'
			'skills'
			'experience'
			'imprint'; 
		grid-template-rows: auto auto auto; 
		grid-template-columns: auto;
	}
}

@media print {
	.resume {
		grid-template-areas: 'header'
			'skills'
			'experience'
			'imprint'; 
		grid-template-rows: auto auto auto; 
		grid-template-columns: auto;
	}
}

.resume-header { 
	text-align: center; 
	width: 100%; 
	background-color: #FFA500; 
	color: #FFF; 
	padding: 0.4rem;
	grid-area: header;
	display: grid; 
	grid-gap: 10px 10px; 
	grid-template-areas: 'photo who'
		'photo cta'; 
	grid-template-columns: minmax(10vh, 35vh) auto;
}


@media print {
	.resume-header { 
		color: #000;
	}
}

@media (max-width: 970px) {
	.resume-header {
		grid-template-areas: '. photo .'
			'who who who'
			'cta cta cta';
		grid-template-columns: 30% 40% 30%;
	}		
}

@media print  {
	.resume-header {
		grid-template-areas: '. photo .'
			'who who who'
			'cta cta cta';
		grid-template-columns: 30% 40% 30%;
	}		
}

.resume-header__photo {
	grid-area: photo;
}

.resume-header__photo-image {
	width: 100%;
}
	
.resume-header__who {
	grid-area: who;
}

.resume-header__cta {
	grid-area: cta;
}

.resume-header__icon {
	color: #FFF;
}

.resume-header__icon:hover {
	text-decoration: none;
	color: #808080;
}


@media print {	
	.resume-header__cta {
		visibility: hidden;
	}
}

.resume-skills {
	grid-area: skills; 
	max-height: 100%;
	text-align: center;
	padding: 20px;
	color: #808080;
	background-color: #FFC04C;
	overflow: hidden;
}

.resume-skills__circle {	
	fill: #FFA500;
}

.resume-skills__text {	
	fill: white;
	font-size: 1.2rem;
	font-family: Arial;
}

.resume-experience {
	grid-area: experience;	
	overflow: scroll;
	padding: 20px;
	color: #808080;
}

@media print {
	.resume-experience {
		overflow: hidden;
	}
}

.resume-experience__link { 
	color: #454A4D;
}	

.resume-experience__link:visited { 
	color: #454A4D;
}

.resume-experience__link:hover { 
	color: #B8C5CC;
}

.resume-imprint {
	grid-area: imprint;
	background-color: #FFA500;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
}