/*--------------------------About start----------------------------------------------------*/

#Body{
    background-color: var(--whiteorange);
    color: black;    
  }
  
  #About{  
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  #Containerabs1{  
    margin: 0 auto;
    margin-bottom: 0;
    width: 90%;
  }
  
  .pictext{
    display: flex;
    flex-direction: row;
    margin-left: 4%;
    margin-right: 4%;   
  }
  
  .about h3{
    font-size: 3em;
    margin:10px 30px;  
  }
  
  
  /* Flipbox Profilbild */
  
  .flipbox-profilepic {   
    width: 800px;  
    height: 800px; 
    perspective: 5000px;
    
    cursor: pointer;
  }
  
  .flipbox-inner-profilepic {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;  
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flipbox-profilepic:hover .flipbox-inner-profilepic {
    transform: rotateY(180deg);
  }
  
  .flipbox-front-profilepic, .flipbox-back-profilepic {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flipbox-front-profilepic {
    background-image: url(../img/Bastian_about_Frontalbild_normal_ganz.png);
    background-size: cover;
    background-position: center;
    filter: grayscale();
    transform: rotateY(0deg);
  }
  
  .flipbox-back-profilepic {
    background-image: url(../img/Bastian_about_Frontalbild_normal_ganz.png);
    
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
  }
  
  
  
  /* Hello Text */
  
  .about{  
    display: flex;
    flex-direction: column;
    
    margin: auto;
    margin-left:50px;
    flex:50%;
  }
  
  .about h2{
    color: var(--black);
    font-size: 6em;
    margin:0;
    margin-left: 10px;
    margin-top:10px;
    margin-bottom:10px;
    
  }
  .about h3{
    color: var(--black);
    font-size: 4em;
  }
  .about p{
    color: var(--black);
    font-size: 1.5em;
    line-height: 2em;
    margin-top: 40px;
    margin-left: 40px;
  }
  
  
  .trennlinie{
    margin: 0;
    padding: 0;
  }
  
  /* Responsive Hello + Pic */
  
  @media (max-width:1000px){
    
    .pictext{
      display: flex;
      flex-direction: column-reverse;    
      margin-left: 2%;
      margin-right: 2%;   
    }
    .flipbox-profilepic { 
      width: 600px;  
      height: 600px; 
      margin:auto;    
    }
    .about{  
      height: 500px;    
    }
    .about h2{
      font-size: 5em;         
    }
    .about h3{
      font-size: 3.5em;
    }
    .about p{
      font-size: 1.5em;
      line-height: 2em;    
    }
  }
  
  @media (max-width:700px){
    #Containerabs1{  
      width: 95%;
      margin-bottom: 0;
    }
    .flipbox-profilepic { 
      width: 395px;  
      height: 395px;        
    } 
    .about h2{
      font-size: 4em;  
    }
    .about h3{
      font-size: 3em;
    }
    .about p{
      font-size: 1.4em;
      line-height: 1.7em;    
    }
  }
  
  @media (max-width:450px){
    .flipbox-profilepic { 
      width: 300px;  
      height: 300px;        
    } 
    .about h2{
      font-size: 3.2em;  
    }
    .about h3{
      font-size: 2.8em;
    }
    .about p{
      font-size: 1.3em;
      line-height: 1.5em;    
    }
  
  }