.grid-container {
	display: grid;
	grid-template-columns: 60px auto auto 255px;
	grid-template-rows: 70px 100px auto;
}
.grid-container > div {
	font-family: Trebuchet MS;
	color: black;
	border-style: none;
}
.text {
	font-size: 16px;
	background-color: white;
	text-align: center;
	grid-column-start: 2;
	grid-column-end: 4;
 }
.maintext {
	text-shadow: 3px 3px 4px #99999999;
	font-size: 24px;
	background-color: white;
	text-align: cleft;
	grid-column-start: 1;
	grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 100;
    text-align: center;
 }
.headbartext {
	text-align: center;
	grid-column-start: 1;
	grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-right: 10px;
  	background-color: indianred;
 }

.text-aboutme {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 16px;
	background-color: white;
	text-align: center;
	grid-row-start: 1;
	grid-row-end: 10;
	grid-column-start: 1;
	grid-column-end: 4;
 }
span {
	font-size:45px;
	cursor:pointer;
	position: fixed;
}
#mainpage {
    top: 15px;
	font-size:40px;
	cursor:pointer;
	position: absolute;
    font-family: Trebuchet MS;
	color: white;
	margin-left: 5px;
}
.fotos {
	width: 80%;
}
video {
	width: 80%;
}
.vertikal {
	width:50%;
}
.minipic {
	width: 100px;
}
.sketch {
	width: 60%;
}
.design {
	width: 20%;
}
.eagle {
	width: 10%
}
.gitlab {
	width: 12%;
}
.gitlab2 {
	width: 35%;
}
#home {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 20px;
}
#home2 {
	width: 7;
    top: 10px;
	position:absolute;
	right: 20px;
}
#avatar {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 90px;
}
#avatar2 {
	width: 7;
    top: 10px;
	position: absolute;
	right: 90px;
}
#project {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 160px;
}
#project2 {
	width: 7;
	position: absolute;
    top: 10px;
	right: 160px;
}
#smallhome {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 15px;
}
#smallavatar {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 75px;
}
#smallproject {
	width: 25%;
	position: absolute;
	top: 20px;
	right: 135px;
}
#imgAboutMe {
    height: 400px;
    width: 330px;
}
.headbar {
	margin: 0;
	padding: 0;
	width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 5;
    right: 0;
    top: 0;
    position: absolute; 
	background-color: indianred;
}
.topnav-centered a{
	float: none;
	position: absolute;
	left: 50%;
	top: 33px;
	transform: translate(-50%, -50%);
}
.topnav-right {
  float: right;
}
.assignment {
	grid-row-start: 2;
	grid-row-end: 10;
	grid-column-start: 1;
	grid-column-end: 5;
}
.sidebar {
	top: 0;
	grid-column-start: 4;
	grid-column-end: 5;
	background-color: indianred;
	max-width: 250px;
	right: 0;
	right: 0;
	position: fixed;
	padding-top: 100px;
	margin: 0;
    z-index: 1; /* Stay on top */
	overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: scroll;
	height: 100%; /* Full-height: remove this if you want "auto" height */
}

/*styles the unordered list. The most importent style element here is the list-style-type, because it removes the bullets of the list intems.*/
/*styles the links in the sidemenu*/
.sidebar li{
	list-style-type: none;
}
.sidebar li a {
	display: block;
	padding: 8px 8px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    text-align: center;

}
/*creates a special effect when you hover over the link*/
.sidebar li a:hover {
    background-color: lightcoral;
    color: white;
}
.sidemenu {
  	width: 0;
	height: 100%;
    overflow-y: scroll;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0;
	left: 0;
	background-color: slategrey;
	overflow-x: hidden;  /* Disable horizontal scroll */
	transition: 0.5s;
	padding-top: 40px;

}
/*styles the links in the sidemenu*/
.sidemenu a {
	display: block;
	padding: 6px 6px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    text-align: center;
	transition: 0.3s;
}
.sidemenu .closebtn {
	position: absolute;
	top: 0;
	right: 5px;
	font-size: 36px;
	margin-left: 50px;
}
/*creates a special effect when you hover over the link*/
.sidemenu a:hover {
    color: lightcoral;
	font-weight: bold;
}
#file {
    font-weight: bold;
    color: coral;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}
.links {
    font-weight: bold;
    color: indianred;
    text-decoration: none;
}
.links:hover {
    background-color: lightcoral;
	color: white;
}
.program {
	font-weight: bold;
	white-space: pre-wrap;
	word-wrap: break-word;
    color: white;
    font-family: monospace;
    padding: 10px;
    background-color: black;
	border-radius: 15px;
}
.code { 
	grid-row-start: 1;
	grid-row-end: 10;
	grid-column-start: 3;
	grid-column-end: 4;
	white-space: pre-wrap;
	word-wrap: break-word;
	text-align: left;
    color: white;
    font-family: monospace;
    padding: 10px;
    background-color: slategray;
	width: 90%;
	border-radius: 15px;
}
.container {
	grid-row-start: 2;
	grid-row-end: 10;
	grid-column-start: 1;
	grid-column-end: 5;
	position: relative;
	width: 25%;
	top: 100px;
	float:left;
	margin-right: 20px;
}
.container2 {
	grid-row-start: 2;
	grid-row-end: 10;
	grid-column-start: 4;
	grid-column-end: 5;
	position: relative;
	top: 50px;
	width: 25%;
	float:left;
	margin-right: 20px;
}
.image {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
}
.overlay {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-55%, -55%);
	transform: translate(-55%, -55%);
	text-align: center;
}
.container:hover .image {
  	opacity: 0.3;
}
.container:hover .overlay {
	opacity: 1;
}
.thema a {
	color: white;
	font-size: 18px;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	background-color: purple;
}
@media screen and (max-width: 600px) {
	.sidemenu a { font-size: 14px; padding: 3px 3px;}
	.sidemenu .closebtn {font-size: 20px; margin-left: 15px;}
	.sidemenu {padding-top: 15px; padding-bottom: 15px; width: 200px;}
	.text {font-size: 14px; grid-column-start: 1; grid-column-end: 5; margin-left: 30px; margin-right: 155px;}
	.text-aboutme {font-size: 14px; margin-right: 155px;}
	.text h1 {font-size: 20px;}
	.text-aboutme h1 {font-size: 20px;}
	.text h2 {font-size: 18px;}
	.sidebar {max-width: 150px; padding-top: 70px; padding-bottom: 40px;}
	.sidebar li a {font-size: 14px; padding: 3px 3px;}
	.code {font-size: 12px; padding: 3px; width: 95%}
	.program {padding: 3px; font-size: 11px; width: 95%;}
	#avatar {right: 55px;}
	#project {right: 100px;}
	#home{right:10px;}
    #avatar2 {right: 55px;  width:10%;}
	#project2 {right: 100px;  width:10%;}
	#home2{right:10px;  width:10%;}
	#smallavatar {right: 50px;}
	#smallproject {right: 95px;}
	#smallhome{right:5px;}
	#imgAboutMe {height: 270px; width: 220px;}
	span {font-size:25px;}
	.headbar li a, .topnav-right {text-align: center;
		float: none; display: block; }
	.topnav-centered a {
	text-align: center;
	position: relative;
    top: 0;
    left: 0;
    transform: none;}
	.headbar {grid-row-start: 1;
	grid-row-end: 3;}
}