body, html {
  margin: 0;
  padding: 0;
}

.background {
    width: 100%;
    height: 100%;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: #f1f1e0;/*#102015;*/
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
	transition: background-color 0.2s ease-in-out;
}

.mainArea {
	width: 80%;
	max-width: 1024px;
    height: 100%;
    border-radius: 0;
    background-color: #e1e1d0;/*#2e4239;/*#204030;*/
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
	transition: background-color 0.2s ease-in-out, left 0.2s ease-in-out;
}

.headPadLeft {
	top: 7.19vw;
	left: 3%;
	width: 2%;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: transparent;
    position: absolute;
    display: flex;
	fill: #d4d1b6;/*#384924;*/
	stroke: #d7dabd;/*#2c4b2f;*/
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.headRouteLeft {
	top: 7.81vw;
	left: 4.5%;
	width: 23.5%;
	height: 0.39vw;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: #d7dabd;/*#2c4b2f;*/
    position: absolute;
    display: flex;
	transition: background-color 0.2s ease-in-out;
}

.headRoute {
	top: 0.78vw;
	left: 28%;
	width: 8%;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: transparent;
    position: absolute;
    display: flex;
	fill: #d7dabd;/*#2c4b2f;*/
	stroke: #d7dabd;/*#2c4b2f;*/
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.headRouteRight {
	top: 1.33vw;
	left: 36%;
	width: 54%;
	height: 0.39vw;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: #d7dabd;/*#2c4b2f;*/
    position: absolute;
    display: flex;
	transition: background-color 0.2s ease-in-out;
}

.headPadRight {
	top: 0.78vw;
	left: 90%;
	width: 2%;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: transparent;
    position: absolute;
    display: flex;
	fill: #d4d1b6;/*#384924;*/
	stroke: #d7dabd;/*#2c4b2f;*/
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.headLogo {
	top: 3.13vw;
	left: 40%;
	width: 30%;
    border-radius: 0;
	margin: 0;
	padding: 0;
    background-color: transparent;
    position: absolute;
    display: flex;
	fill: #000000;/*#ffffff;*/
	transition: fill 0.2s ease-in-out;
}

.headLang {
	top: 3vw;
	left: 5%;
	width: 5vw;
	height: 2vw;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #afaf82;/*#335243;*//*#264c36;*/
    position: absolute;
    display: flex;
    justify-content: center;
}

.headLangEng {
	top: 10%;
	left: 5%;
	width: 50%;
	height: 80%;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #cdcdb1;/*#34654b;*/
	z-index: 0;
	position: absolute;
    display: flex;
	transition: left 0.2s ease-in-out;
}

.headLangSwe {
	top: 10%;
	left: 45%;
	width: 50%;
	height: 80%;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #cdcdb1;/*#34654b;*/
	z-index: 0;
	position: absolute;
    display: flex;
	transition: left 0.2s ease-in-out;
}

.headMode {
	top: 3vw;
	left: 15%;
	width: 4vw;
	height: 2vw;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #afaf82;/*#335243;*//*#264c36;*/
    position: absolute;
    display: flex;
    justify-content: center;
}

.headModeLight {
	top: 10%;
	left: 5%;
	width: 50%;
	height: 80%;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #cdcdb1;/*#34654b;*/
	z-index: 0;
	position: absolute;
    display: flex;
	transition: left 0.2s ease-in-out;
}

.headModeDark {
	top: 10%;
	left: 45%;
	width: 50%;
	height: 80%;
    border-radius: 2vw;
	margin: 0;
	padding: 0;
    background-color: #cdcdb1;/*#34654b;*/
	z-index: 0;
	position: absolute;
    display: flex;
	transition: left 0.2s ease-in-out;
}

.mainContent {
	left: 30%;
	width: 70%;
	top: 12vw;
    bottom: 0;
    border-radius: 0;
    background-color: transparent;
    position: absolute;
    display: block;
	overflow: auto;
    justify-content: left;
    align-items: top;
	opacity: 1;
	z-index: 1;
	font-size: 2vw;
	font-family: Courier, sans-serif;
	transition: opacity 0.5s ease-in-out, color 0.2s ease-in-out;
}

.invAdr {
	width: 249.44882px;
	height: 26.456697px;
}

p {
	margin-right: 10%;
	margin-top: 1%;
}

ul {
	margin-top: 1%;
	margin-right: 10%;
}

a {
	color:inherit;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

h3 {
	margin-bottom: 1%;
}

h5 {
	margin-top: 1%;
	margin-bottom: 1%;
	padding-left: 5%;
	font-weight: strong;
}

.contentDark {
	color: white;
}

.contentLight {
	color: black;
}

.hiddenContent {
	z-index: 0;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

@media (max-width: 600px) { /* Mobile mode */
	.mainArea {
		width: 130%;
		left: -30%
	}

	.headPadLeft {
		top: 12vw;
	}

	.headRouteLeft {
		top: 13.05vw;
		height: 0.65vw;
	}

	.headRoute {
		top: 1.67vw;
	}

	.headRouteRight {
		top: 2.55vw;
		height: 0.65vw;
	}

	.headPadRight {
		top: 1.67vw;
	}

	.headLogo {
		top: 6.67vw;
	}
	
	.headLang {
		top: 6.5vw;
		width: 10.67vw;
		height: 4.5vw;
	}

	.headMode {
		top: 6.5vw;
		width: 8.67vw;
		height: 4.5vw;
	}

	.mainContent {
		top: 25.67vw;
		font-size: 12px;
	}
	
	.invAdr {
		width: 145px;
		height: 15.37879px;
	}
}

@media (min-width: 601px) { 
	.mainArea {
		width: 80%;
		left: none;
	}

	.invAdr {
		width: 41.15906%;
		height: 4.36536%;
	}
}

@media (min-width: 800px) {
	.mainContent {
		font-size: 130%;
	}
	
	.invAdr {
		width: 249.44882px;
		height: 26.456697px;
	}

}

@media (min-width: 1280px) {	/* When mainArea reaches max width (1024px) */
	.headPadLeft {
		top: 92px;
	}

	.headRouteLeft {
		top: 100px;
		height: 5px;
	}

	.headRoute {
		top: 10px;
	}

	.headRouteRight {
		top: 17px;
		height: 5px;
	}

	.headPadRight {
		top: 10px;
	}

	.headLogo {
		top: 40px;
	}
	
	.headLang {
		top: 39px;
		width: 64px;
		height: 27px;
	}

	.headMode {
		top: 39px;
		width: 52px;
		height: 27px;
	}

	.mainContent {
		top: 154px;
	}

	.invAdr {
		width: 249.44882px;
		height: 26.456697px;
	}

}