:root {
	--color-dark: #2B2B2F;
	--color-light: #F3F3F3;
	--color-sun: #FFC85A;
	--color-semidark: #3D3D42;
	--color-sunlight: #FFFBCC;
}

@font-face {
	font-family: SunstoneTitleFont;
	src: url(Quicksand-Light.ttf);
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
}

body { overflow: hidden; }

h1, h2, h3 {
	font-family: SunstoneTitleFont;
	font-weight: 300;
	margin: 0;
	text-transform: uppercase;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.4rem; }

a {
	border: none;
	cursor: pointer;
	height: 6vh;
	border-radius: 0.8vh;
	font-family: SunstoneTitleFont;
	font-weight: bold;
	font-size: 1.6rem;
	padding: 0.4rem 1rem;
}
a, a:focus, a:hover, a:active, a:visited { background-color: var(--color-sun); color: inherit; }


.mainpage {
	height: 100%;
	display: flex;
}
.header {
	color: var(--color-light);
	background-color: var(--color-dark);
}
.header .content { 
	display: flex;
	overflow: hidden; 
}
.draw {
	color: var(--color-sun);
	background-color: var(--color-semidark);
	cursor: none;
}
.company-description {
	font-family: SunstoneTitleFont;
	color: var(--color-dark);
	background-color: var(--color-sunlight);
}

@media (orientation: portrait) {
	.mainpage { flex-direction: column; }
	.header { flex-basis: 16%; }
	.content-area { flex-basis: 84%; }
	.header .content { flex-direction: row; height: 100%; }
	.logo { height: 10vh; margin: auto 0 auto 3vh; }
	.company-name { margin: auto 0 auto 2vh; flex-grow: 1; }
	html, body { font-size: 1.4vh; }
}

@media (orientation: landscape) {
	.mainpage { flex-direction: row; }
	.header { flex-basis: 18%; }
	.content-area { flex-basis: 82%; }
	.header .content { flex-direction: column; width: 100%; }
	.logo { width: 10vw; margin: 3vw auto 0 auto; }
	.company-name { margin: 2vw auto 0 auto; flex-grow: 1; }
	html, body { font-size: 1vw; }
}