body { 
	  background-image: url("../tecImg/hintergrund/whitebricks2.png");
	  font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
	  z-index: 0;
	  overflow-y: visible;
  }
 
.island {
  padding: 2.3rem;
}

#body svg {  position: absolute; top: 0px; left: 0px; z-index: -10;  }


#ownNetwork {  text-align:center; background-color: #efefef; padding: 1em; z-index: 320; border:0.5px solid lightgray; opacity: 0.8; }
  
#ownNetwork:hover {
  background-color: #fff;
}

#hint {
  position:absolute; right: 70px;
  color: #999;
  text-align:left;
}

	 
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

@media only screen and (min-width: 650px) {	
	.mega {
		font-size: 6em;
		right: 140px;
	}
	.island {
	    padding: 2.3rem;
	}
	#hint {
		top: 170px;
		font-size: 1.4em;
	}
	#ownNetwork { position:absolute; top: 260px; right: 50px; width: 250px; font-size: 0.9em;}
	
	.changer figcaption { font-size: 0.7em; }
}

@media (max-width: 650px) {
	.mega {
		font-size: 3.5em;
		right: 0px;
	}
	 .island {
		padding: 1.3rem 0.1em 1.3rem;
	}
	#hint {
		top: 100px;
		font-size: 0.8em;
	}
	#ownNetwork { position:absolute; top: 160px; right: 50px;width: 150px;font-size: 0.7em;}
	
	.changer figcaption { font-size: 0.5em; }
}

.mega {
  float:right;
  font-weight: 100;
  line-height: 1;
  letter-spacing: .05em; 
  top: 80px;
  right: 140px;
  text-align: right;
  z-index: 320;
  display: block;
  cursor: pointer;
  pointer-events: none;
  color: #f35626;
  border: 0.5px solid lightgray;
  background-color: #efefef;
  opacity: 0.8;
}

.mega:hover {
  background-color: #fff; 
}

header {
	float:right;
	width: 800px;
}


#body a:link, #body a:visited, #body span {
    text-decoration: none;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}

#body a:hover {
  color: #666;
}