html, body {
	min-height: 100%;
	 cursor: none;
}

body {
   background: url(../img/background.png);
   background-size: 100% 100% ;
   background-color: black;

}

img:hover {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

img {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

.zoom a:hover{
  transform: scale(1.1);
  transition: all ease 500ms;
}


.wiggle a:hover{ 
  animation: wiggle 75ms infinite;
  animation-timing-function: linear;   
}

@keyframes wiggle {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(-2px, 0); }
  100% { transform: translate(2px, 0); }
}

h1{

  position: absolute;
  top: 3vh;
  right: 310%;
  font-size: 90%;
  font-weight: bold;
  font-family: Palatino;
  color: #736AFF;
}


.button{


  letter-spacing: 4vh;
  color: white;
  font-weight: bold;
  font-size: 22px;

position: absolute;
  top: 83vh;
  left: 25px;
  
  z-index: 1;
 

}

 a:hover {
  
  text-decoration: line-through;
  text-decoration-color: black;
  font-weight: bold;
 
}


.element {transition: 0.5s;}

.element.is-hidden {
  opacity: 0;
  filter: saturate(0);
  pointer-events: none;
  display: none;
}



.projekte, .projekte{
	cursor: none;
}

.img, .img  {
 cursor: none;

}

#cursor {
  background: yellow;
  position: fixed;
  width: 30px;
  height: 30px;
  
  border-radius: 100%;
  z-index: 99999;
  mix-blend-mode:saturation;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.fenster{
  object-fit: contain;
  width:8%;
  height:auto;
  position: absolute;
  top: 84vh;
  left: 615px;
  
  z-index: 4;
  transform: rotate(0deg) scaleX(-1);
 

}

.artic{
  object-fit: contain;
  width:10%;
  height:auto;
  position: absolute;
  top: 20vh;
  left: 1250px;
  
  z-index: 6;


}

.nelke{
  object-fit: contain;
  width:10%;
  height:auto;
  position: absolute;
  top: 30vh;
  left: -6px;
  
  z-index: 6;


}

.click{
  object-fit: contain;
  width:10%;
  height:auto;
  position: absolute;
  top: 40vh;
  left: 1290px;
  
  z-index: 6;



}

.energy{
  object-fit: contain;
  width:10%;
  height:auto;
  position: absolute;
  top: 37vh;
  left: 985px;
transform: rotate(30deg) scaleX(1);
  

  
  z-index: 6;



}

.laurel{
  object-fit: contain;
  width:18%;
  height:auto;
  position: absolute;
  top: 47vh;
  left: 766px;
  
  z-index: 6;
  


}

.vannevar{
  object-fit: contain;
  width:39%;
  height:auto;
  position: absolute;
  top: 20vh;
  left: 1034px;
  
  z-index: 1;
  


}

.disney{
	object-fit: contain;
	width:14%;
	height:auto;

 position: absolute;
  top: vh;
  left: 22px;
  
  z-index: 1;
	
}

.arch{
  object-fit: contain;
  width:14%;
  height:auto;

 position: absolute;
  top: -8vh;
  left: 682px;
  
  z-index: 1;

  
}



.container{
	
	width:16%;
	height:auto;
	position: absolute;
  top: 30vh;
  left: 75px;
  
  z-index: 1;

}

#surf{

	width: 120%;
	height: auto;
  opacity: 99%;
 filter:saturation;
}


.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    opacity: .09;
}


.screen:after {
  animation: flicker 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  opacity: 0.8;
  z-index: 2;
}

.screen:before {
  animation: skew 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  opacity: 0.8;
  z-index: 3;
}

.screen:after,
.screen:before {
  content: "Animation";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  font-weight: bold;
  font-size: 5vh;
  color: white;
}

.screen,
.screen:after,
.screen:before {
  background-image: linear-gradient(90deg, #073e59 0, #073e59 17%, #ffffff 17%, #ffffff 34%, #3c017d 34%, #3c017d 51%, #131313 51%, #131313 70%, #000000 70%, #000000 75%, #131313 75%, #131313 79%, #262626 79%, #262626 84%, #131313 84%, #131313 100%), linear-gradient(90deg, #0000ff 0, #0000ff 14%, #131313 14%, #131313 28%, #ff00fe 28%, #ff00fe 42%, #131313 42%, #131313 56%, #01ffff 56%, #01ffff 70%, #131313 70%, #131313 84%, #cccccc 84%, #cccccc 100%), linear-gradient(90deg, #cccccc 0, #cccccc 14%, #ffff00 14%, #ffff00 28%, #01ffff 28%, #01ffff 42%, #00ff01 42%, #00ff01 56%, #ff00fe 56%, #ff00fe 70%, #fe0000 70%, #fe0000 84%, #0000ff 84%, #0000ff 100%);
  background-position: 50% 43px, 50% 34px, 50% 0;
  background-repeat: repeat-x;
  background-size: 100px 50px;
}

.screen {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  left: 50%;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  z-index: 1;
}

@keyframes flicker {
  0% {
    filter: hue-rotate(0deg);
    opacity: 0;
    transform: translateX(0);
  }
  89% {
    opacity: 0;
    transform: translateX(0);
  }
  90% {
    opacity: 0.9;
    transform: translateX(2px);
  }
  91% {
    transform: translateX(0);
  }
  92% {
    filter: hue-rotate(0deg);
    transform: translateX(-1px);
  }
  93% {
    filter: hue-rotate(30deg);
    transform: translateX(-2px);
  }
  95% {
    filter: blur(1px);
    transform: translateX(6px);
  }
  97% {
    filter: hue-rotate(5deg);
    transform: translateX(-1px);
  }
  98% {
    filter: blur(0px);
    filter: hue-rotate(0deg);
    transform: translateX(2px);
  }
  99% {
    opacity: 0.9;
    transform: translateX(-3px);
  }
  100% {
    filter: hue-rotate(0deg);
    opacity: 0;
    transform: translateX(0);
  }
}
@keyframes skew {
  0% {
    opacity: 0.7;
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(0deg, 0deg);
  }
  12% {
    filter: hue-rotate(0deg);
    transform: skew(-15deg, 0deg);
  }
  14% {
    filter: hue-rotate(-10deg);
    opacity: 0.5;
    transform: skew(15deg, 0deg);
  }
  16% {
    filter: hue-rotate(25deg);
    opacity: 0.7;
    transform: skew(0deg, 0deg);
  }
  17% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: skew(0deg, 0deg);
  }
}

section {width:100%; margin-top:2%;}
.container1 {width:65%; margin:0 auto;}

p{

  position: absolute;
  top: 35px;
 right: 1138px;
  font-size: 8px;
  color: black;
  font-weight: bold;
}
#menu-icon {
  background-color:white; 
  color:white; 
  padding-left:8vh;
}
#menu-icon .fa {font-size:18px;}


.overlay {
  text-align:center;
  padding:4%;
  position:absolute;
  top:4vh;
  left:9vh;
  bottom:4vh;
  right:11vh;
  z-index:99999;
  background-color:rgba(255,255,255,0.95);
  display:none;
  letter-spacing: 2vh;
  font-weight: bold;
}
.overlay #close {
  position:fixed;
  top:6px;
  right:6px;
  font-size:2em;
  color:rgba(0,0,0,0.4);
}
.overlay ul {
  list-style:none;
}
.overlay ul li {padding:10px;}
.overlay ul li a,
.overlay ul li a:hover {
  text-decoration:none;
}
.overlay ul li a {
  font-size:2em;
  color:rgba(0,0,0,0.8);
  font-family: 'Raleway', sans-serif;
  font-weight:bold;
}