styles.css

html{
	width: 100%;
}


body{

	  margin: 0;
  padding: 0;
  font-family: Times;
  line-height: 1.3;
  letter-spacing: 0px;
  word-spacing: -1px;
	background-color: white;
  /*background-image: url(images/baustelle_druggySpider.gif);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;*/
  color: black;
}


/*header {
	background: white url(images/SB1.jpg) no-repeat scroll;
	/*height: 100vh;
	width: 100%;*/


.main-text{
	color: black;
	font-family: Times;
	line-height: 1.3;
	letter-spacing: 0px;
	word-spacing: -1px;
	font-weight: 750;
	font-size: 3.5vw;
	margin-left: 3.5%;
	margin-top: 4.5%;
	margin-right: 7%;
	margin-bottom: 0;
	text-align: left;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: relative;
	bottom: 100%;
  left: 10%;
  margin-left: -100%;
	background-color: #f2f2f2;
	color: black;
	text-align: left;
	font-size: 15px;
	padding: 1px 4px;
	border-radius: 1px;
	box-shadow: 2px 2px 5px #ffe9e0;


	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* Tooltip image BACKGROUND container */
.tooltip-imgBG {
	position: relative;
	display: inline-block;
}
.tooltip-imgBG .tooltiptext {
	visibility: hidden;
	width: relative;
	bottom: 14%;
  left: 95%;
  margin-left: -100%;
	background-color: #f2f2f2;
	color: black;
	text-align: left;
	font-size: 15px;
	padding: 1px 4px;
	border-radius: 1px;
	box-shadow: 2px 2px 5px #ffe9e0;


	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.tooltip-imgBG:hover .tooltiptext {
	visibility: visible;
}


/* Tooltip image DOWNload container */
.tooltip-download {
	position: relative;
	display: inline-block;
}
/* Tooltip text */
.tooltip-download .tooltiptext {
	visibility: hidden;
	width: relative;
	top: 15%;
  right: 100%;
  margin-left: -100%;
	background-color: #f2f2f2;
	color: black;
	text-align: center;
	font-size: 15px;
	padding: 1px 4px;
	border-radius: 1px;
	position: absolute;
	z-index: 1;
	box-shadow: 2px 2px 5px #ffe9e0;


}
.tooltip-download:hover .tooltiptext {
	visibility: visible;
}



/* Tooltip image Impressum container */
.tooltip-Impressum {
	position: relative;
	display: inline-block;
}
/* Tooltip text */
.tooltip-Impressum .tooltiptext {
	visibility: hidden;
	width: relative;
	bottom: 100%;
  right: -30%;
  margin-left: -100%;
	background-color: #f2f2f2;
	color: black;
	text-align: left;
	font-size: 15px;
	padding: 1px 8px;
	border-radius: 1px;
	position: absolute;
	z-index: 1;
	box-shadow: 2px 2px 5px #ffe9e0;
}
.tooltip-Impressum:hover .tooltiptext {
	visibility: visible;
}





#copyright{
	position: absolute;
	bottom: 2.4%;
	left: 4%;
}

#img-background{
	position: absolute;
	z-index: -1;
	bottom: 12%;
	left: 55%;
	right: 10%;


}

#img-download{
	position: absolute;
	top: 3%;
	right: 3.5%;

}

#img-write{
	position: absolute;
	bottom: 3.8%;
	right: 3.6%;

}


/*form{
  position: absolute;
	bottom: 3%;
	right: 3.8%;

}*/



input[type=button] {
	border: none;
	border-radius: 0;
	width: 80px;
	height: 80px;
	opacity: 0;
	z-index: 2;
}