.oben{
    color: rgb(239, 241, 209);
    text-align: left;
    font-size: 2rem;
    font-family: monospace;
    padding-top: 30px;
 
    margin-left:10vw;
  }
  .infos{
  
    color: rgb(239, 241, 209);
    text-align: left;
    font-size: 16px;
    font-family: monospace;
    padding-top: 30px;
   
    margin-left: 10vw;
  }
  h1{font-size: 2rem;}
  .unten{
    
    color: rgb(239, 241, 209);
    text-align: left;
    font-size: 26px;
    font-family: monospace;
    padding-top: 30px;
    padding-left: 200px;
    margin-left: 50px;
  }
  .grid-container {
    width: 54.4vw;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-gap: 1vw;
    border:2px solid  rgb(144, 144, 163);
    border-radius: 10px;
    padding: 10px;
    margin-top: 30px;
    margin-left: 10vw;
  }

  .buttons {
    width: 56vw;height: 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3px;
    background-color: rgba(8, 41, 78, 0.8);;
    padding: 2px;
    margin-left: 10vw;
    border: rgb(169, 169, 209);
    border-radius: 10px;
    margin-top: 5px;
  }
  
  .grid-item {
    height: 4vw;width: 4vw;
    background-color: #013;
    border: 3px solid rgb(144, 144, 163);
    border-radius: 5px;
    font-size: 3vw;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 2px;
  }
  .grid-item2 {
    height: 3vw;width:15vw;
    background-color: rgba(8, 41, 78, 0.8);;
    border: 2px solid rgba(169, 198, 236, 0.8);
    border-radius: 5px;
    font-size: 0.9rem;
    color: rgb(239, 241, 209);
    font-family: monospace;
    text-align: center;
    cursor: pointer;
    padding-top: 1vw;
  }
  @media (max-width:600px){
    .grid-item2 {
      font-size: 0.7rem;
    }
    .grid-item {
      font-size: 1rem;
    }
    h1{ 
      font-size: 1.4rem;}
}
  @media (max-width:500px){
    .grid-item2 {
      font-size: 0.6rem;
    }
    .grid-item {
      font-size: 1rem;
    }
    h1{ 
      font-size: 1.4rem;}
}