/*img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}*/
h1 { color: #f9f9f9;
     font-size:32pt;
      }

body
{
    background-color: #202020; 
	
	color: #f9f9f9;
	min-height: 100vh;
    font-family: 'Abel', sans-serif;
    letter-spacing: 2px;
flex-direction: column;
justify-content: center;
	/*display: grid;*/
	/*grid-template-rows: 1fr 8em;*/
}

footer
{
     position: fixed;
    /* margin: 0;*/
/*padding: 10px;*/     
background-color: #202020;
    /* high: 50px;*/
bottom: 0;
width: 100%;
     color: #f9f9f9;
     font-family: 'Abel', sans-serif;
     letter-spacing: 2px;
     text-align: center;
}

.container {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;/*flex-start; center;*/
    /*align-items: center;*/
    height: 100vh;
    padding: 5% 5% 5% 5%;
}

.kachel {
    width: 400px;
    height: 400px;
    background-color: #707070;
    /*background-image: linear-gradient(15deg, #262626, #555555);*/
    text-align: center;
    margin: 15px;
    color: #fff;
  /*  padding: 20px;*/
    transition: transform 0.3s; /* Übergang für Transform-Eigenschaft hinzufügen */
background-position: center center; 
background-size: contain;
background-repeat: no-repeat;   
 }

.kachel:hover {
    transform: scale(1.1); /* Kacheln vergrößern, wenn Maus darüber ist */
}

.kachel.clicked {
    transition: transform 3s;
    transform: scale(150);

}
a:link {
      color: #f9f9f9;
      }
      /* visited link */
      a:visited {
      color: #f9f9f9;
      }
      /* mouse over link */
      a:hover {
      color: #f9f9f9;
      }
      /* selected link */
      a:active {
      color: #f9f9f9;
      }

@media (max-width: 900px) {

       .kachel {
          width: 250px;
          height: 250px;    
     }
       h1 {font-size: 20pt}
       .container {}          


}

@media (prefers-color-scheme: dark) {

      .kachel {
         background-color: #707070;
       }