*{box-sizing: border-box; font-size: 30px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; }
body{background-color: #0c0840;} 

.animate-fading{animation:fading 5s; }
@keyframes fading
{
		0%  { opacity:0;}  
		100%{ opacity:1;}  
}















/* Extra small devices (smartphon portrain, 600px and down) */
@media only screen and (max-width: 600px) {
  .flex-containerPC {display: none;}
  .flex-containerTP {display: none;}
  .flex-containerTPB { display: none;}
  

  .flex-containerSP {  display: flex;  flex-direction: row;   justify-content: center; }
  .flex-containerSP div{width: 100%; }
  .flex-containerSPB {  display: flex;  flex-direction:row;   justify-content: center; margin-top: 5%;}
  .flex-containerSPB button{
    background-color: transparent;
    color: white;
    width: 50px;
    height: 50px;
  
    margin-left: 2%; margin-right: 2%;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
    border-radius: 10px;
    border-color: white; }
 }


/* Small devices (smartphon landscape, 600px and up) */
@media only screen and (orientation: landscape) and (min-width: 600px){
 
  .flex-containerPC{display: none;}
  .flax-containerTP  {display: none;}
  .flex-containerTPB { display: none;}
  .flex-containerSP{display: none;}
  .flex-containerSPB{display: none;}
  
  .flex-containerPC { display: grid;  grid-template-columns: repeat(20, 1fr);  grid-template-rows:  repeat(10, 1fr); }
    
  .flex-containerPC div {color: yellow; padding: 10px; font-size: 30px; text-align: center;}
  
  .item1 { grid-column: 3 / span 20;  grid-row: 1 / span 10; background-color: #0c0840;}
  .itemHome {  grid-column: 20;  grid-row: 1;}
  .itemVor {   grid-column: 20;  grid-row: 3;}
  .itemRueck { grid-column: 20;  grid-row: 5;}

  .button{
     background-color: transparent;
     color: white;
     width: 50px;
     height: 50px;
     margin-left: 2%; margin-right: 2%;
     text-align: center;
     text-decoration: none;
     font-size: 30px;
     cursor: pointer;
     border-radius: 10px;
     border-color: white; 
  }

}













/* Small devices (tablets portrain,  600px and up) */
@media only screen and (orientation: portrait) and (min-width: 600px){
  .flex-containerSP{display: none;}
  .flex-containerSPB{display: none;}
  .flex-containerPC{display: none;}

  .flex-containerTP {  display: flex;  flex-direction: row;   justify-content: center;   }
  .flex-containerTP div{padding-left: 8px; padding-right: 8px; }

  .flex-containerTPB {  display: flex;  flex-direction:row;   justify-content: center; justify-content: space-between;  }
  .flex-containerTPB button{
    background-color: transparent;
    color: white;
    width: 50px;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
    border: none;
  }
}

/* Extra large devices (large laptops and desktops, 1000px and up)*/
@media only screen and (min-width: 1000px) {
  .flex-containerSP{display: none;}
  .flex-containerSPB {display: none;}
  .flex-containerTP {display: none;}
  .flex-containerTP img{display: none;}
  .flex-containerTPB {display: none;}

  .flex-containerPC { display: grid;  grid-template-columns: repeat(20, 1fr);  grid-template-rows:  repeat(10, 0.13fr); }
    
  .flex-containerPC div {color: yellow; padding: 10px; font-size: 30px; text-align: center;}

  .item1 { grid-column: 3 / span 20;  grid-row: 1 / span 10; background-color: #0c0840;}
  .itemHome {  grid-column: 20;  grid-row: 1;}
  .itemVor {   grid-column: 20;  grid-row: 3;}
  .itemRueck { grid-column: 20;  grid-row: 5;}

  .button{
     background-color: transparent;
     color: white;
     width: 50px;
     height: 50px;
     margin-left: 2%; margin-right: 2%;
     text-align: center;
     text-decoration: none;
     font-size: 30px;
     cursor: pointer;
     border-radius: 10px;
     border-color: white; 
  }
 
}

/* Extra large devices (large laptops and desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
  .flex-containerSP{display: none;}
  .flex-containerSPB {display: none;}
  .flex-containerTP {display: none;}
  .flex-containerTP img{display: none;}
  .flex-containerTPB {display: none;}

  .flex-containerPC { display: grid;  grid-template-columns: repeat(20, 1fr);  grid-template-rows:  repeat(10, 1fr); }
    
  .flex-containerPC div {color: yellow; padding: 10px; font-size: 30px; text-align: center;}

  .item1 { grid-column: 3 / span 20; grid-row: 1 / span 10; background-color: #0c0840;}
  .itemHome {  grid-column: 20;  grid-row: 1;}
  .itemVor {   grid-column: 20;  grid-row: 5;}
  .itemRueck { grid-column: 20;  grid-row: 7;}

  .button{
     background-color: transparent;
     color: white;
     width: 50px;
     height: 50px;
     margin-left: 2%; margin-right: 2%;
     text-align: center;
     text-decoration: none;
     font-size: 30px;
     cursor: pointer;
     border-radius: 10px;
     border-color: white; 
  }
      
    
}