/*-----------------------Home Startpage------------------------------------------------------------*/

#Startpage{
    background-color: var(--black) ;
    overflow: hidden;
  }
  
   #Start{        
      height: 100vh;          
  } 
  
  
  /* ----------Background------- */
  
  .background{    
      z-index: -99;
      position: absolute;
      top: 0;
      right:0;
      bottom: 0;
      left:20%;    
      background-image: url('../img/Harttung_Dev_BG.png');
      -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
      background-size:cover;    
      background-repeat: no-repeat; 
  
      /* Animation BG */
      -webkit-animation:backgroundAni 1.5s cubic-bezier(.6, .7, .7, 1);
        -moz-animation:backgroundAni 1.5s cubic-bezier(.6, .7, .7, 1);
      animation: backgroundAni 1.5s cubic-bezier(.6, .7, .7, 1);      
      -webkit-animation-fill-mode:backwards;
        -moz-animation-fill-mode:backwards;
      animation-fill-mode:backwards;
  }
  
  @keyframes backgroundAni {
      0% {opacity: 0;transform: scale(1.2);}
      100% {opacity: 1;transform: scale(1);}	
  }
  
    
.name {
      display: flex;
      flex-direction: column;
      justify-content: center;
  
      height: 100vh;
      padding-left: 10%;
      padding-right: 30%; 
      
  }
  
  
  .name h2{
    font-size: 10em; 
    letter-spacing: -.02em; 
  }
  
  /* The Container for Flip Box */
  .flip-box-hello,
  .flip-box-iam,
  .flip-box-bastian {
    background-color: transparent;  
    width: 620px;
    height: 200px;  
  }
  
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow:visible;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an flip when you move the mouse over the flip box container */
  .flip-box-hello:hover .flip-box-inner,
  .flip-box-iam:hover .flip-box-inner,
  .flip-box-bastian:hover .flip-box-inner {
    transform: rotateX(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front,
  .flip-box-back {  
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;  
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  
  /* Style the front side */
  .flip-box-front {  
    color: rgb(255, 255, 255);
    cursor: pointer;
    transform:rotateX(0deg);              /* Magic!!!! So wird die Vorderseite auch unsichtbar */
  }
  
  .textcolor{
    color: hsl(40,80%,65%)
  }
  
  /* Style the back side */
  .flip-box-back {  
    color: #FFF;
    transform: rotateX(180deg);
  }
  
  .flip-box-back a{
    color:hsl(40,100%,60%);
    text-decoration: none;  
    letter-spacing: -.02em;
  }
  
  
  
  
  /* --------------Animation Text ----------------- */
  
  .animate {	
    -webkit-animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
      -moz-animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
      animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);	
    -webkit-animation-fill-mode:backwards;
      -moz-animation-fill-mode:backwards;
      animation-fill-mode:backwards;
  }
  
  @-webkit-keyframes animate {
      0% {opacity: 0;-webkit-transform: translateY(100%);}
      100% {opacity: 1;-webkit-transform: translateY(0%);}	
  }
  
  @keyframes animate {
      0% {opacity: 0;transform: translateY(20vh);} 
      100% {opacity: 1;transform: translateY(0%);}	
  }
  
  /* ------ Delays ------ */
  .delay02 { -webkit-animation-delay: .2s; animation-delay: .2s;}
  .delay04 { -webkit-animation-delay: .4s; animation-delay: .4s;}
  .delay06 { -webkit-animation-delay: .6s; animation-delay: .6s;}
  .delay08 { -webkit-animation-delay: .8s; animation-delay: .8s;}
  .delay10 { -webkit-animation-delay: 1s; animation-delay: 1s;}
  .delay12 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
  
  
  
  /* --------Responsive Start Animation----------------- */
  
  @media (max-width:770px){
    .name h2{
      font-size: 8em;  
    }
  .flip-box-hello,
  .flip-box-iam,
  .flip-box-bastian { 
      
    width: 460px;
    height: 150px;  
    }
  .background{
    left:10%;
    }
  }
  
  @media (max-height:700px){
    .name h2{
      font-size: 6em;  
    }
  .flip-box-hello,
  .flip-box-iam,
  .flip-box-bastian { 
    
    width: 350px;
    height: 110px;  
    }
  .background{
    left:15%;
    }
  }
  
  @media (max-width:550px){
    .name h2{
      font-size: 4em;
      font-weight: 800;  
    }
  .flip-box-hello,
  .flip-box-iam,
  .flip-box-bastian { 
    
    width: 290px;
    height: 80px;  
    }
  .background{
    left:0;
    }
  }
  
  @media (max-height:500px){
    .name h2{
      font-size: 4em;  
    }
  .flip-box-hello,
  .flip-box-iam,
  .flip-box-bastian { 
    
    width: 230px;
    height: 80px;  
    }
  .background{
    left:30%;
    }
  }