@import "colors";
@import "reset";
@import "tools";
@import "formatting";
/// Base font size setting
$em-base: 16px;

body {
	font: {
	    family: 'Open Sans', sans-serif;
	    size: $em-base;
	    weight: 400;
	}
	line-height: 1.5;
	background-color: $primary-color-light;
    background: radial-gradient(farthest-corner at 1% 1%, $primary-color-light 30%, $primary-color 100%);
	#wrapper {
		padding: 1em;
		padding-left: 4.5em;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"header header header header"
			"main main main main"
			"footer footer footer footer";
		#language {
			position: fixed;
			top: 0;
			left: 0;
			width: 7%;
			z-index: 99;
			margin: 0;
			padding: 0;
			color: $primary-color-light;
		}
		#menu {
			position: fixed;
			top: 0;
			left: 0;
			width: 10em;
			height: 100vh;
			background-color: $primary-color-dark;
			@include box-shadow(0, 10, 25, $standard-box-shadow-color);
			transition: width 0.4s ease-in-out;
			&.closed {
				width: 4em;
				#menu-content {
					display: none;
				}
			}
			#menu-content {
				margin-top: 3em;
				text-align: center;
				padding-left: 1em;
				padding-right: 1em;
			}
		}
		#header {
			grid-area: header;
			display: grid;
			grid-template-columns: 3fr 1fr;
			grid-template-rows: 1;
			grid-template-areas:
				"name photo";
			figure {
				grid-area: photo;
				width: 16em;
				img {
					width: 16em;
					@include box-shadow(-5, 5, 25, $standard-box-shadow-color);
				}
			}
			#heading {
				grid-area: name;
				align-self: center;
				text-align: center;
				line-height: 2.5;
				div {
					h1 {
						font-size: 3em;
						line-height: 2;
					}
				}
				div#address {
					text-transform: uppercase;
					i {
						font-size: 1em;
						line-height: 1;
					}
				}
			}
		}
		#main {
			grid-area: main;
			#container {
				#content {
					display: grid;
					grid-template-columns: 1fr 3fr;
					grid-template-rows: repeat(5, fit-content(100%));
					grid-column-gap: 1em;
					grid-template-areas:
						"profile-title profile-content"
						"working-title working-content"
						"studies-title studies-content"
						"knowledge-title knowledge-content"
						"personal-title personal-content";
					div, h2 {
						margin-top: 2em;
					}
					h2.personal-profile {
						grid-area: profile-title;
					}
					div.personal-profile {
						grid-area: profile-content;
						text-align: justify;
					}
					h2.working-experience {
						grid-area: working-title;
					}
					div.working-experience {
						grid-area: working-content;
						div:first-child {
							margin-top: 0;
						}
					}
					h2.studies {
						grid-area: studies-title;
					}
					div.studies {
						grid-area: studies-content;
					}
					h2.knowledge {
						grid-area: knowledge-title;
					}
					div.knowledge {
						grid-area: knowledge-content;
						text-align: justify;
					}
					h2.personal-details {
						grid-area: personal-title;
					}
					div.personal-details {
						grid-area: personal-content;
					}
					h2 {
						text-align: left;
					}
				}
				#privacy {
					margin-top: 2em;
					display: grid;
					grid-template-columns: 1fr 3fr;
					grid-template-rows: auto;
					grid-row-gap: 1px;
					grid-template-areas:
						". refs"
						". privacy";
					div#refs {
						grid-area: refs;
					}
					div#notice {
						grid-area: privacy;
					}
					div#notice,
					div#refs {
						text-align: center;
						font-size: 0.7em;
						font-style: italic;
					}
				}
			}
		}
		#footer {
			margin-top: 2em;
			font-size: 0.8em;
			grid-area: footer;
			p {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-template-rows: auto;
				grid-column-gap: 1em;
				grid-template-areas:
					"mail name phone";
				span i {
					font-size: 0.75em;
				}
				span#mail {
					grid-area: mail;
					text-align: left;
				}
				span#name {
					grid-area: name;
					text-align: center;
				}
				span#phone {
					grid-area: phone;
					text-align: right;
				}
			}
		}
	}
}

@page {
  size: A4;
  margin: 11mm 15mm 15mm 17mm;
}

@media print {
	body {
		background: none;
		#wrapper {
			#language,
			#menu {
				display: none;
			}
			#header {
				figure {
					width: 7em;
					img {
						width: 7em;
						box-shadow: none;
					}
				}
			}
			#main {
				#container {
					#content {
						div.working-experience {
							div {
							    page-break-inside: avoid;
							}
						}
						div.knowledge {
						    page-break-after: always !important;
						}
					}
				}
			}
			#footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				p {
					span {
					}
					span#mail {
					}
					span#name {
					}
					span#phone {
					}
				}
			}
		}
	}
	html, body {
	    width: 210mm;
	    height: 297mm;
	}
}