:root{ 
  --schrift-color: #efefef; 
  --schrift-color-hover: #f4fc05; 
  --seiten-hintergrund-color:   rgb(42, 42, 60); 
  --background-color: #000;
  
  --schrift: font-family: 'IBM Plex Serif';
} 

a:link { text-decoration: none; }   
a:active  { text-decoration: none;} 
a:visited { text-decoration: none; }  
a:hover { text-decoration: none; }  




body{ 
  background-color: var(--seiten-hintergrund-color); 
  font-family: var(--schrift);
  color: var(--schrift-color);
    }  

.top-container { padding: 4px;
                 text-align: center; }


.container{ max-width: 1550px; height: auto; margin: auto;}
    
ul {
  list-style-type: none;
  margin-top: 20px;
  padding: 1px; }

li { display: inline; }
    
li, a { padding: 5px 10px;
       color: var( --schrift-color);
       font-size: 20px; 
       letter-spacing: 2px; }   
        
a:hover{
  color: var(--schrift-color-hover);
}

img { max-width: 100%; height: auto;}  
    

h1{ font-size: 25px; font-weight: 500; letter-spacing: 2px;  }


figcaption{ font-size: 20px; letter-spacing: 2px; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  padding: 10px; 
}

.grid-container > div {
  text-align: center;
  padding: 10px 0; 
  background-color: var(--background-color);
} 




@media(max-width: 800px){ 
   .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  padding: 10px; } 
}

@media(max-width: 500px){ 
   .grid-container {
  display: grid;
  grid-template-columns:  1fr;
  padding: 10px; } 
}