body {
    background-image: 
    linear-gradient(0deg, rgb(0, 255, 0) 0%, black 50%, rgb(0, 255, 0));
    height: 98vh;
    width: 99%;
    overflow-y: hidden;
    overflow-x: hidden;
}

#Gewicht1 {
    text-align: left;
    font-size: xx-large;
    margin-left: 9%;
}

#Gezondheid {
    margin-left: 68%;
    position: absolute;
    top: -0.001%;
    font-size: xx-large;
    text-align: end;
}


#Gewicht2 {
    position: absolute;
    top: 65%;
    font-size: xx-large;
    margin-left: 9%;
    border: none;
}

#Mentaal {
    left: 68%;
    position: absolute;
    top: 65%;
    font-size: xx-large;
    text-align: end;
    border: none;
}


.pushable {
    background: black;
    border: none;
    border-radius: 50%;
    height: 320px;
    width: 370px;
    padding: 0;
    display: flex;
    cursor: pointer;
    margin-top: 6%;
    position: absolute; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  }
  .front {
    display: block;
    border-radius: 50%;
    font-size: 1.25rem;
    background: green;
    color: white;
    transform: translateY(-4px);
    height: 300px;
    width: 350px;
    position: absolute; 
    top: 3.8%;
    left: 3%; 

  }
  
  .pushable:active .front {
    transform: translateY(-2px);
  }
  
  .pushable:focus:not(:focus-visible) {
    outline: none;
  }

  .text {
    margin-top: 34%;
  }
  .front {
    transition:
      transform
      900ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .pushable:hover .front {
    transform: translateY(-9px);
    transition:
      transform
      300ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }

  .voorkant2 {
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

  .knop2:hover .voorkant2 {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }

  .knop2:active .voorkant2 {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  .knop2 {
    background: black;
    border: none;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
  }
  .voorkant2 {
    display: block;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    background: green;
    color: white;
    transform: translateY(-4px);

  }
  
  .knop2:active .voorkant2 {
    transform: translateY(-2px);
  }
  
  .knop2:focus:not(:focus-visible) {
    outline: none;
  }

  #info-buts {
    margin-left: 43.7%;
  }