body {
    background-color: #f0e68c;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 1em;
    font-size: clamp(.5rem, 2.5vmin, 1.5rem);
  }
  .loginform {
    border: none;
    border-bottom: 2px solid #D1D1D4;
    background-color: #d9d18c;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 91%;
    transition: .2s;
    margin: 0.7%;
  }
  .loginformsubmit {
      border: none;
      border-bottom: 2px solid #D1D1D4;
      background-color: #d9d18c;
      padding: 10px;
      padding-left: 24px;
      font-weight: 700;
      width: 100%;
      transition: .2s;
      margin: 0.7%;
    }
  .login {
      width: 20%;
      padding: 10px;
      padding-top: 10px;
  display: block; margin-left: auto; margin-right: auto;
  }	
  .loginregisterja {
      width: 20%;
  display: block; margin-left: auto; margin-right: auto;
  }	
  
  table {
  width: 28%;
  table-layout:fixed;
  height: 50%;
  margin-left: auto; margin-right: auto;
  justify-content: center;
  align-items: center;
  user-select: none;
  flex-grow: 1;
    grid-template-columns: repeat(5, 4em);
    grid-template-rows: repeat(6, 4em);
    gap: .25em;
  
  }		
  th {
  background-color: #04AA6D;
    color: white;
  height: 111px;
  table-layout:fixed;
  }	
  td {
    text-align: center;
  table-layout:fixed;
  justify-content: center;
  
  height: 50px;
  }	
  
  tr {
  justify-content: center;
  height: 90px;
  }
  
  .Homebutton {
      cursor:-webkit-grab;
      border: none;
      margin-top: 5px;
      grid-column: 2/3;
      margin-left: auto;
    
  }
  
  .wrapper {
      display:grid;
      column-gap:0;
      grid-template-columns: 60% 40%;
  }
  .WoertlLogo {
      display: block; 
      grid-column: 1/2;
      width: 33.3%; 
      height: auto;
      margin-left: auto;
      user-select: none;
  
  }
  .HomeImage {
      width:auto;
      height: 99%;
      margin-right: 0.5%;
      user-select: none;
      cursor:-webkit-grab;
      margin-left: auto;
  
  
  
  }
  .Leaderboard {
    cursor:-webkit-grab;
    border: none;
    margin-top: auto;
    grid-column: 2/3;
    margin-left: auto;
    margin-right: 5px;
    user-select: none;
  
  
  }
  /* Wörtl_SpielDesign */
  .container {
    width: 100%;
    height: 100vh;
  }
  
  .toppane {
    width: 100%;
    height: 100px;
  }
  
  .leftpane {
    width: 15%;
    height: 100vh;
  }
  
  .middlepane {
    width: 70%;
    height: 100vh;
  }
  
  .rightpane {
    width: 15%;
    height: 100vh;
  }
  
  body {
    margin: 0!important;
  }
  
  .d-flex {
    display: flex;
  }
  .keypads{
    font-size: inherit;
    grid-column: span 2;
    display: flex;
    /* width: 22.5%;
    height: 7.5%;
    margin-top: 5%;
    margin-left: 3%; */
    padding: 0;
    justify-content: center;
    align-items: center;
    border: none;
    /* border-color: rgb(0, 0, 0); */
    background-color: hs1(
      var(--hue, 200),
      var(--saturationm, 1%),
      calc(var(--lightness-offset, 0%) + var(--lightness, 51%)) 
    );
    color: black;
    fill: black;;
    border-style: solid;
    border-radius: .25em;
    cursor: pointer; 
    border-color: black;
    user-select: none;
  
  }
  .keypads.groß {
      grid-column: span 3;
  }
  .keypad {
      padding-top: 1%;
      display: grid;
      grid-template-columns: repeat(20, minmax(auto, 1.25em));
      grid-auto-rows: 3em;
      gap: .25em;
      justify-content: center;
  }
  .keypads:hover, .keypads:focus {
      --lightness-offset: 10%;
  }
  .keypads.falsch {
      --lightness: 22%;
  }
  .keypads.falscherort {
      --hue: 49;
      --saturation: 50%;
      --lightness: 50%;
  }
  .keypads.richtig {
      --hue: 115;
      --saturation: 29%;
      --lightness: 43%;
  }
  .error-border{
    border-bottom: 2px solid #D1D1D4;
  /*   background-color: #d9d18c;
   */  padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 25%;
    transition: .2s;
    display: block; margin-left: auto; margin-right: auto;
    border-color: #ff0000;
    background-color: #d9d18c;
  }
  .error{
    border-bottom: 2px solid #D1D1D4;
  /*   background-color: #d9d18c;
   */  padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 20%;
    transition: .2s;
    display: block; margin-left: auto; margin-right: auto;
    border-color: #ff0000;
    background-color: #d9d18c;
   }
  .loginformregister {
    border: none;
    border-bottom: 2px solid #D1D1D4;
    background-color: #d9d18c;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 25%;
    transition: .2s;
    display: block; margin-left: auto; margin-right: auto;
  
  }
  .loginregister {
      width: 100%;
      padding: 10px;
      padding-top: 10px;
  display: block; margin-left: auto; margin-right: auto;
  }
  .registerbutton {
   background-color: #d9d18c;
   width: 75%;
  }
  .registertext {
    display: block;
    margin-left: auto; 
    margin-right: auto;
    font-weight: 700;
      width: 75%;
  }