/* fonts */
@font-face {
  font-family: knewave;
  src: url(font/knewave.ttf);
}
@font-face {
  font-family: norwester;
  src: url(font/norwester.otf);
}
@font-face {
  font-family: berkshire-swash;
  src: url(font/berkshire-swash.ttf);
}
@font-face {
  font-family: ubuntu;
  src: url(font/ubuntu.woff2);
}

body {
	font-family: ubuntu !important;
	font-size: 14px !important;
	min-width: 100vw;
	min-height: 100vh;
}
.hidden {
	display: none;
}

/* grid */
.info { grid-area: info; }
.skill { grid-area: skill; }
.parcour { grid-area: parcour; }
.other-skill { grid-area: other-skill; }
.grid-container {
	display: grid;
	grid-template-areas: 
		'info'
		'skill'
		'parcour'
		'other-skill';
}

/* backgrounds */
.bg-lightgrey { background-color: #D5D6D7; }
.bg-sand { background-color: #FFD185; }
.bg-blue {
	background-color: #008B8B;
	color: white;
}

/* text colors */
.color-blue { color: #008B8B; }
.w3-2017-flame-color { color: #f2552c; }


/* parcour titles */
div.parcour-titles {
	display: inline-grid;
}
div.parcour-titles h3 {
	margin-bottom: 0px;
	display: initial;
	align-self: flex-start;
}
div.parcour-titles small {
	margin-left: auto;
	margin-right: auto;
}

/* titles */
.at-title {
	color: #f2552c;
	font-weight: bold;
	font-size: 18px;
}
.at-title-location {
	color: #f2552c;
}
.blue-title {
	background-color: #008B8B;
	color: white;
	min-height: 50px;
	height: 50px;
	max-height: 50px;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.blue-title h2 { 
	margin: 0;
	font-family: berkshire-swash;
	font-size: 22px;
}
.blue-subtitle {
	font-weight: bold;
	font-size: 13px;
}

/* separator */
.dotted-separator {
	display: block;
	border-bottom: 2px dotted #008B8B;
	width: 100%;
}
.dotted-separator-light-spacing {
	margin: 20px 0 15px 0;
}
.dotted-separator-wide-spacing {
	margin: 30px 0 25px 0;
}

@media only screen and (min-width: 380px) {
	/* titles */
	.at-title { font-size: 19px; }
	.blue-subtitle {
		font-size: 14px;
	}
}

@media only screen and (min-width: 400px) {
	/* titles */
	.at-title { font-size: 20px; }
}

@media only screen and (min-width: 410px) {
	/* titles */
	.at-title { font-size: 21px; }
}

@media only screen and (min-width: 430px) {
	/* titles */
	.at-title { font-size: 22px; }
}

@media only screen and (min-width: 450px) {
	.blue-subtitle {
		font-size: 16px;
	}
}

@media only screen and (min-width: 804px) {
	/* titles */
	.at-title { font-size: 20px; }
	.blue-subtitle {
		font-size: 15px;
	}
}

@media only screen and (min-width: 830px) {
	/* titles */
	.at-title { font-size: 21px; }
}

@media only screen and (min-width: 850px) {
	/* titles */
	.blue-subtitle {
		font-size: 16px;
	}
}

@media only screen and (min-width: 865px) {
	/* titles */
	.at-title { font-size: 22px; }
}

@media only screen and (min-width: 1024px) {
	/* titles */
	.at-title { font-size: 16px; }
	.blue-subtitle {
		font-size: 12px;
	}
}

@media only screen and (min-width: 1030px) {
	/* titles */
	.at-title { font-size: 17px; }
}

@media only screen and (min-width: 1060px) {
	/* titles */
	.blue-subtitle {
		font-size: 13px;
	}
}

@media only screen and (min-width: 1075px) {
	/* titles */
	.at-title { font-size: 18px; }
}

@media only screen and (min-width: 1130px) {
	/* titles */
	.blue-subtitle {
		font-size: 14px;
	}
}

@media only screen and (min-width: 1140px) {
	/* titles */
	.at-title { font-size: 19px; }
}

@media only screen and (min-width: 1210px) {
	/* titles */
	.at-title { font-size: 20px; }
	.blue-subtitle {
		font-size: 15px;
	}
}

@media only screen and (min-width: 1240px) {
	/* titles */
	.at-title { font-size: 21px; }
}

@media only screen and (min-width: 1280px) {
	/* titles */
	.blue-subtitle {
		font-size: 16px;
	}
}

@media only screen and (min-width: 1295px) {
	/* titles */
	.at-title { font-size: 22px; }
}