@charset "UTF-8";


html {
 width: 100vw;
 height: 100%;
}


body {
	height: 100%;
	background-color: #000;     /*    #f5f5f1; */
	background-image: url("./images/bg_black_dust.jpg");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	 background-attachment: fixed;
	font-family: "Archivo", sans-serif;
	font-weight: 200;
	font-stretch: 95%;
	font-style: normal;
	font-size: 12pt;
	margin:0px;
	color: black;
}

a {
	color: #000;
}

a:hover {
	color: #FFD700;
}

.content {
	background-color: #FFFFFF;
	margin: 0px auto;
	padding: 20px 20px;
	width: 345px;
	scrollbar-gutter: stable both-edges;
	
}

.langswitch {
	text-align: right;
	font-size: 9pt;
  	font-stretch: normal;
  	font-optical-sizing: auto;
  	text-transform: uppercase;
  	font-style: normal;
  	letter-spacing: -1px;
}

.logo {
	font-family: "Rubik", sans-serif;
  	font-size: 24pt;
  	font-stretch: normal;
  	font-optical-sizing: auto;
  	text-transform: uppercase;
  	font-weight: 600;
  	font-style: normal;
  	letter-spacing: -1px;
}

.logo a {
	text-decoration: none;
}

.logo a:hover { 
	color: #000;
}

.logoClaim {
	margin: 0px ;
	text-transform: uppercase;
	font-size: 14pt;

}

.navigation {
	margin: 30px 0px 20px 0px;
	background-color: white;
}

.navitem {
	padding: 5px;
	font-size: 10pt;
	font-stretch: 75%;
	font-weight: 400;
	background-color: black;
	color: #f5f5f1;
	margin-right: 5px;
	font-family: "Rubik", sans-serif;
	text-transform: uppercase;
  	font-weight: 600;
  	letter-spacing: -1px;
}

.navitem a {
	color: white;
	text-decoration: none;

}

.navitem a:hover {
	color: #FFD700;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #333;
    margin: 1em 0;
    padding: 0;
}

.content#references {
	width: 500px;
}

.blackBG {
	padding: 5px;
	background-color: black;
	color: white;

}

h1 {
	font-stretch: condensed;
  	font-optical-sizing: auto;
  	text-transform: uppercase;
  	font-weight: 600;
  	font-family: "Rubik", sans-serif;
  	font-style: normal;
	font-size: 18pt;
	margin-top: 20px;
	 	letter-spacing: -1px;
}

h2 {
	margin: 40px 0px 10px 0px;
	font-size: 15pt;
	font-weight: 600;
}


p {
	margin-bottom: 15px;
	line-height: 16pt;
}





.projectitem {
	margin: 10px 0px 35px 0px;
}

.projectitem p {
	margin: 5px 0px 5px 0px;
}

.footer {
	margin: 40px 0 10px 0;
	text-align: center;
	font-weight: 300;
	font-size: 9pt;
}

.footer p {
	margin: 20px 0 0 0;
}

.spotifyplayer {


}


@media only screen and (min-width: 540px) {
	
	.content {
		margin: 0px auto ;
		width: 500px;
	}

	.navitem {
	padding: 5px 10px 5px 5px;
	font-size: 14pt;
	
}

}