body {
  margin: 0;
  height: 100vh;
  font-weight: 100;
  background: radial-gradient(#23d5ab,#23a6d5);
  /* -webkit-overflow-Y: hidden;
  -moz-overflow-Y: hidden;
  -o-overflow-Y: hidden; */
  -webkit-animation: fadeIn 1 1s ease-out;
  -moz-animation: fadeIn 1 1s ease-out;
  -o-animation: fadeIn 1 1s ease-out;
  animation: fadeIn 1 1s ease-out;
}



.light {
  position: absolute;
  width: 0px;
  opacity: .75;
  background-color: white;
  box-shadow: #e9f1f1 0px 0px 20px 2px;
  opacity: 0;
  top: 100vh;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.x1{
-webkit-animation: floatUp 4s infinite linear;
-moz-animation: floatUp 4s infinite linear;
-o-animation: floatUp 4s infinite linear;
animation: floatUp 4s infinite linear;
 -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 -o-transform: scale(1.0);
transform: scale(1.0);
}

.x2{
-webkit-animation: floatUp 7s infinite linear;
-moz-animation: floatUp 7s infinite linear;
-o-animation: floatUp 7s infinite linear;
animation: floatUp 7s infinite linear;
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
left: 15%;
}

.x3{
-webkit-animation: floatUp 2.5s infinite linear;
-moz-animation: floatUp 2.5s infinite linear;
-o-animation: floatUp 2.5s infinite linear;
animation: floatUp 2.5s infinite linear;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
left: -15%;
}

.x4{
-webkit-animation: floatUp 4.5s infinite linear;
-moz-animation: floatUp 4.5s infinite linear;
-o-animation: floatUp 4.5s infinite linear;
animation: floatUp 4.5s infinite linear;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
left: -34%;
}

.x5{
-webkit-animation: floatUp 8s infinite linear;
-moz-animation: floatUp 8s infinite linear;
-o-animation: floatUp 8s infinite linear;
animation: floatUp 8s infinite linear;
-webkit-transform: scale(2.2);
-moz-transform: scale(2.2);
-o-transform: scale(2.2);
transform: scale(2.2);
left: -57%;
}

.x6{
-webkit-animation: floatUp 3s infinite linear;
-moz-animation: floatUp 3s infinite linear;
-o-animation: floatUp 3s infinite linear;
animation: floatUp 3s infinite linear;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-o-transform: scale(.8);
transform: scale(.8);
left: -81%;
}

.x7{
-webkit-animation: floatUp 5.3s infinite linear;
-moz-animation: floatUp 5.3s infinite linear;
-o-animation: floatUp 5.3s infinite linear;
animation: floatUp 5.3s infinite linear;
-webkit-transform: scale(3.2);
-moz-transform: scale(3.2);
-o-transform: scale(3.2);
transform: scale(3.2);
left: 37%;
}

.x8{
-webkit-animation: floatUp 4.7s infinite linear;
-moz-animation: floatUp 4.7s infinite linear;
-o-animation: floatUp 4.7s infinite linear;
animation: floatUp 4.7s infinite linear;
-webkit-transform: scale(1.7);
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
transform: scale(1.7);
left: 62%;
}

.x9{
-webkit-animation: floatUp 4.1s infinite linear;
-moz-animation: floatUp 4.1s infinite linear;
-o-animation: floatUp 4.1s infinite linear;
animation: floatUp 4.1s infinite linear;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
left: 85%;
}


@-webkit-keyframes floatUp{
0%{top: -100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: 100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
0%{top: -100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: 100vh; opacity: 0;}
}
@-o-keyframes floatUp{
0%{top: -100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: 100vh; opacity: 0;}
}
@keyframes floatUp{
0%{top: -100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: +100vh; opacity: 0;}
}




svg{

fill-opacity: 0.8;
}


.header{
font-family: 'Roboto', sans-serif;

}
.containerheading{
display: flex;
justify-content: center;
}
.containerraute{
position: relative;
  width:100%;
height: 105vh;
  display: flex;
  justify-content: center;
  margin-top: -50px;
  
  }
.raute{
  width: 1500px;
  height: 1000px;
}
.containertext{
position: absolute;
opacity: 0.8;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 50px;
width: 360px !important;
}
.rauteweg{
  position: absolute;

}

.textmitte{
margin-left: 280px;
margin-top: -10px;

}
.textrechts{
   
margin-left: -120px;

}
.textlinks{
margin-left: 70px;

} 


.portfolio{
width: 100%;
height: 100vh;




} 


.one, .two, .three, .four{
width: 400px;
height: 300px;
background-size: cover;
border-radius: 10px;
border: solid rgba(255, 255, 255, 0.575) 1px;
box-shadow: 10px 10px 10px rgba(20, 20, 20, 0.203);


}
.one{
background-image: linear-gradient(to bottom, #fafa87c6, #fafa87c6), url("https://cdn.glitch.global/674d648d-959c-40eb-a56d-31f60bf8236f/web.jpg?v=1667657301661");
}
.two{
background-image: linear-gradient(to bottom, #61cef5bf, #75d4f6c9), url("https://cdn.glitch.global/674d648d-959c-40eb-a56d-31f60bf8236f/anwendungen.jpg?v=1667657028338");
}
.three{
background-image: linear-gradient(to bottom, #57fad4ad, #6cffdd9c), url("https://cdn.glitch.global/674d648d-959c-40eb-a56d-31f60bf8236f/design.jpg?v=1667657049262"); 
}
.four{
background-image: linear-gradient(to bottom, #f8959597, #f8959597), url("https://cdn.glitch.global/674d648d-959c-40eb-a56d-31f60bf8236f/ilustration.jpg?v=1667657077727");
}
.textportfolio{
display: flex;
justify-content: center;
align-self: center;
font-family: 'Roboto', sans-serif;
color: white;
font-weight: 400;
font-size: 28pt;
background-color: #879ea7bd;
}
.ubermich{
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.fotome{
display: none;

}
form{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16pt;
}
.kontakt{
background-image: url("back2-01-01.png");
background-size: cover;
background-position: center;

}


.taste:hover{
background-color: #879ea7bd!important;
color: white!important;
}
.menuuber{
display: none;
}
.menu{
display: flex;
justify-content: flex-end;
margin-top: 90px;
}
.portfolioweb{
font-family: 'Roboto', sans-serif;
}

.cardtitel{
font-size: 16pt;
color: #018eaa;
}
.linkcard{
text-decoration: none;
font-size: 14pt;
color: black;
}
.linkcard:hover{
color: white;
}
.cardwend{
font-size: 16pt;
font-weight: 400;
width: 100%;
}

.portweb, .portanwend, .portdesign, .portillu{
display: none;
}
.linkweb:hover, .linkanwend:hover, .linkdesign:hover, .linkillu:hover{
transform: scale(1.05);
transition: 0.5s;
}
.backtoport{
font-family: 'Roboto', sans-serif;
color: white;
font-weight: 400;
font-size: 16pt;
padding-top: 15px;
padding-bottom: 15px;
}
@media all and (max-width: 900px){
  .raute{
    width: 600px;
    height: 400px;
    margin-left: 0px;
  }
  .rauteweg{
    width: 600px;
  }
.name{
  font-size: 24pt!important;
  margin-left: -16!important;
}
.containerraute{
  margin: 0;
  margin-left: -400px;

}
.containerheading{
  height: 400px!important;
}
.rauteweg{
  width: 600px;
  height: 400px;
  margin-left: 0px;

}


.containertext{
  margin: 0;
  width: 600px;
  display: flex;
  flex-direction: row;
  position: relative;
  max-height: 400px;
 
}
.textlinks{
  position: absolute;
margin-left: -50px;
}

.textmitte{
  position: absolute;
margin-left: 370px;
}
.textrechts{
 position: absolute; 
margin-left: 670px;
}
.textbildlinks{
  width: 98.8px;
}
.textbildmitte{
  width: 96.8px;
}
.textbildrechts{

  width: 297.6px;
}
.buttonmenu{
margin-top: -10px!important;
margin-right: -10px!important;
 
}
.ubermich{
  margin-top: 0!important;
}
.textuber, .read{
  font-size: 16pt!important;
}
.portfolioheader{
margin-left: -48px!important;
margin-inline-start: 0!important;
}
.headerport{
  font-size: 26pt!important;

}
.one, .two, .three, .four{
  width: 600px;
 
}
.card-img-top{
  height:150px!important;
}
.card{
  height: 351px!important;
}
.card-text{
  font-size: 11pt!important;
}
.bild{
  height: 250px!important;
}

.portfolio{
display: flex;
padding: 20px;
height: 1300px!important;
}
.portfolio2{
position: relative;

}
.titelportfolio{
  font-size: 26pt!important;
}
form{
  width: 600px;
font-size: 14pt;
margin-left: -50px;

}
.kontakt{
  margin-left: -135px;
}
form h4{
  font-size: 18pt!important;
  padding: 0px!important;
}
#carouselExampleIndicators, .carousel-inner{
  width: 600px!important;
}
.backtoport{
margin: 80px;
margin-top: 0px;
}
#myVideo{
  width: 600px!important;
  margin-top: -20px!important;
}
.fotome{
  width: 300px;
}
}

@media all and (max-width: 800px){
  .raute{
    width: 600px;
    height: 400px;
    margin-left: 0px;
  }
  .rauteweg{
    width: 600px;
  }
.name{
  font-size: 24pt!important;
  margin-left: -16!important;
}
.containerraute{
  margin: 0;
  margin-left: -400px;

}
.containerheading{
  height: 400px!important;
}
.rauteweg{
  width: 600px;
  height: 400px;
  margin-left: 0px;

}


.containertext{
  margin: 0;
  width: 600px;
  display: flex;
  flex-direction: row;
  position: relative;
  max-height: 400px;
 
}
.textlinks{
  position: absolute;
margin-left: -110px;
}

.textmitte{
  position: absolute;
margin-left: 320px;
}
.textrechts{
 position: absolute; 
margin-left: 620px;
}
.textbildlinks{
  width: 98.8px;
}
.textbildmitte{
  width: 96.8px;
}
.textbildrechts{

  width: 297.6px;
}
.buttonmenu{
margin-top: -10px!important;
margin-right: -10px!important;
 
}
.ubermich{
  margin-top: 0!important;
}
.textuber, .read{
  font-size: 16pt!important;
}
.portfolioheader{
margin-left: -48px!important;
margin-inline-start: 0!important;
}
.headerport{
  font-size: 26pt!important;

}
.one, .two, .three, .four{
  width: 600px;
 
}
.card-img-top{
  height:150px!important;
}
.card{
  height: 351px!important;
}
.card-text{
  font-size: 11pt!important;
}
.bild{
  height: 250px!important;
}

.portfolio{
display: flex;
padding: 20px;
height: 1300px!important;
}
.portfolio2{
position: relative;

}
.titelportfolio{
  font-size: 26pt!important;
}
form{
  width: 600px;
font-size: 14pt;
margin-left: -50px;

}
.kontakt{
  margin-left: -135px;
}
form h4{
  font-size: 18pt!important;
  padding: 0px!important;
}
#carouselExampleIndicators, .carousel-inner{
  width: 600px!important;
}
.backtoport{
margin: 80px;
margin-top: 0px;
}
#myVideo{
  width: 600px!important;
  margin-top: -20px!important;
}
.fotome{
  width: 300px;
}
}


@media all and (max-width: 500px){

  .raute{
    width: 390px;
    height: 250px;
    margin-left: 0px;
  }
  .rauteweg{
    width: 390px;
  }
.name{
  font-size: 18pt!important;
  margin-left: -16!important;
}
.containerraute{
  margin: 0;

}
.containerheading{
  height: 250px!important;
}
.rauteweg{
  width: 390px;
  height: 250px;
  margin-left: 0px;

}


.containertext{
  margin: 0;
  width: 390px;
  display: flex;
  flex-direction: row;
  position: relative;
  max-height: 250px;


}
.textlinks{
  position: absolute;
margin-left: 78px;
}

.textmitte{
  position: absolute;
margin-left: 355px;
}
.textrechts{
 position: absolute; 
margin-left: 540px;
}
.textbildlinks{
width: 64.2px;
}
.textbildmitte{
width: 62.92px;
}
.textbildrechts{
width: 193.4px;

}
.buttonmenu{
margin-top: -10px!important;
margin-right: -10px!important;
 
}
.ubermich{
  margin-top: 0!important;
}
.textuber, .read{
  font-size: 14pt!important;
}
.portfolioheader{
margin-left: -48px!important;
margin-inline-start: 0!important;
}
.headerport{
  font-size: 20pt!important;

}
.one, .two, .three, .four{
  width: 340px;
 
}

.portfolio{
display: flex;
padding: 20px;
height: 1300px!important;
}
.portfolio2{
position: relative;

}
.titelportfolio{
  font-size: 18pt!important;
  margin-left: 0!important;
  padding-left: 0!important;
}
form{
  width: 340px;
font-size: 12pt;
margin-left: 0px;

}
.kontakt{
  margin-left: -135px;
}
.nachricht{
  padding: 0;
}
form h4{
  font-size: 16pt!important;
  padding: 0px!important;
}
#carouselExampleIndicators, .carousel-inner{
  width: 300px!important;
}
.backtoport{
margin: 40px;
margin-top: 0px;
}
.card-img-top{
  height: 200px!important;
}
#myVideo{
  width: 300px!important;
  margin-top: -20px!important;
}
.fotome{
  width: 200px;
}
.bild{
  width: 220px!important;
  margin-left: 50px!important;

}

}