body{
   margin: 2px;
   padding: 5px; 
   padding-left: 19px;
   width: 97%;
   min-height: 2700px;
   height: auto;
   display: grid;
   grid-template-columns: 0.3fr 2fr ;
   grid-template-rows: 0.45fr 4fr 0.1fr;
}

#overlay{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgb(92, 79, 79);
    opacity:0.15;
    z-index:10;
}

#popupTecTacToe {
    position: absolute;
    width: 30%;
    height: auto;
    top: 10%;
    left: 30%;
    background-color: azure;
    z-index: 99;
    padding: 45px;
    font-size: 20px;
    border-radius: 7px;
    color: blue;
    
}

#popup_Willkommen_heißen{
    display: none;
    position: absolute;
    top:10%;
    left: 30%;
    width: 36%;
    background-color: white;
    text-align: center;
    margin: 1%;
    border: solid 0.5px;
    padding: 1%;
    overflow: hidden;
    z-index: 99;
    box-shadow: 1px 1px 10px 1px;
    
}
.open{
    animation: 2s popupWillkommenOpen ;
}
.close{
    animation: 3s popupWillkommenClose ;
    
}
@keyframes popupWillkommenOpen {
    0% {
      top: -600px;
      left: 30%;
   }

   100% {
      top: 10%;
      left: 30%;
    }
}

@keyframes popupWillkommenClose {
    0% {
        top: 10%;
        left: 30%;
   }

   100% {
    top: -1000px;
    left: 30%;

    }
}
#popup_Willkommen_heißen div{
    text-align: center;
    margin: 4%;
}
#popup_Willkommen_heißen img{
    opacity: 0.7;
}
#popup_Willkommen_heißen #text{ 
    text-align: center;
    color: black;
}
.inputPasswordDiv{
    position: relative;
    display: flex;
    justify-content: space-around;
}
.inputPasswordDiv label{
    position: absolute;
    margin-right: 45%;
}

.inputPasswordDiv input[type="password"], .inputPasswordDiv input[type="text"]{
    position: absolute;
    margin-left: 42%;
    width: 40%;
    line-height: 22px;
    cursor: pointer;
    border-radius: 4px;
}
.inputPasswordDiv i{
    position: absolute;
    right:10%;
    top:-11px;
    color: #343d256b;
    font-size:xx-large;
    cursor: pointer;
}

.inputPasswordDiv i:hover{
    color: rgb(145, 57, 145) ;
    
}

#popupPsw:hover{
    opacity: 0.8;
}

.bottom{
    width:30%;
    font-size:22px;
    color:lightcoral;
    box-shadow:10px 10px 22px 1px gray;
    float:right;
    margin-top: 5.5%;
    margin-bottom: 2%;
}

.bottom:hover{
    box-shadow:10px 10px 22px 1px lightcoral;
}

#clock{
    position: absolute;
    left:45%
}
.visitKarte{
    width: 20%;
    height: max-content;
    margin: 1%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    box-shadow: 11px 11px 15px 1px #888888;
    background-color: azure;
    overflow: hidden;
}
.title{   
    line-height: 8px;
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
}
#nav{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    position: relative;
    display: flex;
    flex-direction: row; 
    justify-content: space-between; 
    margin: 5px;
}
.karte{
    width: 150px;
  /*   height: 60px; */
    margin: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #888888;
    cursor: pointer;
    transform-style: preserve-3d;
  
}
a{
    text-decoration: none;
}

#section_x li{
    padding-bottom: 10px;
    line-height: 28px;
 }

.js{
    width: 130px;
    word-wrap: anywhere;
    margin-left: 8%;
    background-color:#e3c5c5;
    opacity: 0.7;
}
.karte:hover{   
 box-shadow: 5px 1px 5px #506150;
 opacity: 0.7;
 transform: translateZ(-10px);
}
#asideLinke{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    margin: 5px; 
    padding-left: 30px;
    perspective: 600px;
    text-align: center;      
}
#section{
    grid-column: 2 / 3;
    grid-row: 2 / 3; 
    position: relative; 
    min-height: 1000px;
    height: auto;
    position: relative;
    overflow: hidden;
}

#footer{
    grid-column: 1 / 3;
    grid-row: 3 / 4;        
}
nav ,#asideLinke, section, aside,#footer{
    margin: 1px;
    border-radius: 5px;
    box-shadow:0px 3px 5px 2px rgb(87, 83, 83);
}
/*#region foto_Inof*/

#foto_Inof{
    display: none;
    height: 20%;
    position: relative;
}
/*  */
.scene1{
    position: absolute;/* das soll fest */
    top: 29%;
    left: 4%;
    width: 200px;
    height: 300px;
    border: solid 1px;
    perspective: 600px;
    margin-top: 10px;
    margin-left: 5px;
    float: left;
}
.card{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: flat;
    transform-origin: center right;  
    cursor: pointer;  
}
.card__face {
    position: absolute;
    height: 100%;
    width: 100%; 
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card__face--front{
    background-image: url(../images/saleh1.jpg);
    /* background-position: center; */
   
    background-size: cover;    /* mit dieser Eigenschaft passt sich das Bild an das Objekt */
    background-repeat: repeat-y;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
  }
  .Pictuer div.img {
    float: left;
    margin: 3%;
}
 
  .card__face--back {
    background-image: url(../images/saleh2.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: repeat-y;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    transform: rotateY(180deg);
     /* letzte div macht für ihn die Eigenschaft rotateY(180deg) somit wird gedreht und Front Face angezeigt sonst wird 
     immer der letzte divsFace angeizeigt; d.h wenn wir z.b 3 divs haben div1, div2, div3 wird immer div3 angezeigt 
     aber wenn ich bei div3 rotateY(180deg) mache dann wird das Face von div2 angezeigt und wenn ich bei div2 auch 
     rotateY(180deg) machen würde, dann wird das Face von div1 zum Anwender angezigt*/
  }
 .card:hover{                           /* hier gescheht das Drehen wenn der Maus auf dem Card sich bewegt */
  transform: translateX(-100%) rotateY(-180deg); /* translateX(100) damit sich die Card etwas nach links bewegt bevor 
                                                    er 180 dreht   */
 }
 
.card.is-spinning{
  transform: translateX(-100%) rotateY(-180deg); /* die KLasse kann man über JS in card hinzugefügt werden und somit gedreht */
}
@keyframes xx{
  0%{ transform: rotateY(0deg);} /* bei 0 Position ist der Anfangszustand Zustand und von da aus dreht sich der das Objekt */
  100%{transform:rotateY(-180deg);}
}

#foto_Inof .uberschrift_1{
    display: flex;
    justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
}
#foto_Inof .uberschrift_1 #lebenslauf{
  color: rgb(86, 112, 112);
  font-size: 300%;
}
#foto_Inof .uberschrift_2{
  
}
#foto_Inof  h1{
    color: cadetblue;
    margin-bottom: 6px;
    font-variant: small-caps;
    font-size: 35px;

}
#foto_Inof hr{
    border: solid 4px blue;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
}
#foto_Inof .tab{
    position: absolute;
    border-spacing: 14px;
    float: left;
    top: 30%;
    left: 18%;
    padding-left: 8%;
    text-align: justify;
    width: 100%;    
 }


 #foto_Inof .tab th{
   font-size: 130%;
   font-weight: bold;
   color:rgb(86, 112, 112);   
 }

 #foto_Inof .text_1{
    position: absolute;
    font-size: 20px;
    padding-right: 4%;
    top: 40%;
    left: 4%;    
 }
 #foto_Inof .text_1 span{
    margin: 14px;
    line-height: 40px;
 }
 #foto_Inof .text_1 ul{
   padding-left: 230px;
}

  
/*#endregion */
 
@media only screen and  (max-width: 1450px) {
       body{
        grid-template-columns: auto ;
        /* grid-template-rows: 300px 200px 1200px 200px; */
        grid-template-rows: 0.5fr  0.5fr   4fr   0.2fr ;
      } 
      #popup_Willkommen_heißen{       
        width: 100%;    
        margin: 2%;
        padding: 4%;   
    }
      #nav{
          grid-column: 1 / 2 ;
          grid-row: 1 / 2;
         
      }
      #asideLinke{
          grid-column: 1 / 2;
          grid-row: 2 / 3;
          display: flex;          
          flex-direction: row; 
          justify-content: space-between; 
          margin: 5px;
      }
      #section{
          grid-column: 1 / 2;
          grid-row: 3 / 4; 
          display: initial;          
          margin-top: 1%;
      }
      #footer{
        grid-column: 1 / 2;
        grid-row: 4 / 5; 
        display: flex;          
        flex-direction: row; 
    }
    
    #section_x .tab_EDVKenntnisse ,  #section_x  .tab_Sprachen{
        width: 100%;
        border-collapse: separate;
        border-spacing: 20px;
    }
      .karte{
        overflow: auto;
        height: 80px;
      }
     
      .js{
        float: left;
        margin-left: 0;
      }
      #projekteInhalt{
          position: absolute;
          top: 40%;     
      }
      #deckblatt .div1 {
        width: 100%;
        height: 90%;
    }
    .cube{
        padding-top: 50%;
    }
    .visitKarte{
       /*  width: 30%;    */ 
    }
    #deckblatt .div1 .unten2 {
        margin-top: 31%;
    }
    #clock{
        left: 40%;
    }
    .visitKarte h3{
        font-size: 12px;    
    }
    #deckblatt.aussen {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 7%;
    }
    #deckblatt .div1 .unten2 {
        position: relative;
    
        background: lavender;
        margin-top: 31%;
        height: 500px;
        float: left;
        height: auto;
        padding-left: 20%;
    }
    #deckblatt .scene {
        width: 300px;
        height: 80px;
        position: relative;
        left: 30%;
        top: 55%;
        perspective: 800px;
    }
    #deckblatt .div2 .bewer { 
       position: absolute;
     
    }

    .inputPasswordDiv label{

        margin-right: 54%;
    }
    .inputPasswordDiv i{     
        top:-4px;
        font-size:x-large;
        
    }
    
    .bottom{
        margin-top: 10%;  
    }
  }