body{
    color: white;
    
    margin: 0%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-image: url('Bilder/HintergrundMain.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.Fit_Menu{
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows: 1fr;
    width: 90%;
    margin: 5%;
    height: 100%;
    
    padding: 1%;
  }
  .Fit_option{
    width: 90%;
    height: 95%;
    padding: 1%;
    position: relative;
    top: 0%;
    margin: 2% ;
    background-color: #54b3d6;
    border: solid black;
    border-radius: 25px;
    display: inline-block;
    
  }
  .Fit_option:hover{
    width: 92%;
    height: 96%;
    margin: 1%;
    background-color: #f8f4ff;
    -webkit-box-shadow: 14px 14px 21px #9fa4b3, -14px -14px 21px #ffffff;
  box-shadow: 14px 14px 21px #9fa4b3, -14px -14px 21px #ffffff;
  }
  .Fit_option1{
    width: 90%;
    height: 95%;
    padding: 1%;
    position: relative;
    top: 0%;
    margin: 2% ;
    background-color: #54b3d6;
    border: solid black;
    border-radius: 25px;
    display: inline-block;
    
  }
  .Fit_option1:hover{
    width: 92%;
    height: 96%;
    margin: 1%;
    background-color: black;
    -webkit-box-shadow: 14px 14px 21px #9fa4b3, -14px -14px 21px #ffffff;
  box-shadow: 14px 14px 21px #9fa4b3, -14px -14px 21px #ffffff;
  }
  /* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 480px) 
{
    .Fit_Menu{
        display: block;
    }
}