body {
    background-color: #fff;
  }
  
  @font-face {
    font-family: satoshi;
    src: url(/Document_fonts/Satoshi-Light.otf);
  }
  
  @font-face {
    font-family: modus;
    src: url(/Document_fonts/Modus-Regular.otf);
  }
  
  @font-face {
    font-family: calibre;
    src: url(/Document_fonts/Calibre-Light.otf);
  }
  


  
  .back-menu {
    z-index: 10;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 8vh;
    padding: 0.65%;
    mix-blend-mode: difference;
  }
  
  .menu {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    padding: 0.9%;
    padding-bottom: 0;
    box-sizing: border-box;
    mix-blend-mode: difference;
  }
  
  .spacer {
    width: 0.8rem;
  }
  
  .hi {
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    font-family: modus;
    transition: filter .2s ease-in-out;
    filter: blur(0px);
    cursor: pointer;
    padding-top: 0.5rem;
  }
  
  .hi.active {
    filter: blur(2px);
  }
  
  .hi:hover {
    filter: blur(2px);
  }
  
  
  .phone {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: color 0.5s ease-in-out;
    filter: blur(0px);
  }
  
  .phone::after {
    content: "SCHREIB DOCH GERNE EINE MAIL :)";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, filter 0.2s ease-in-out;
    white-space: nowrap;
    color: #fff;
  }
  
  .phone:hover {
    color: transparent;
    filter: blur(2px);
  }
  
  .phone:hover::after {
    opacity: 1;
  }
  
  
  .logo {
    height: 5rem;
    position: fixed;
    right: 0.7rem;
    top: 0.7rem;
    z-index: 100;
    cursor: pointer;
  }
  
  @media (max-width: 800px) {
    .menu {
      padding: 1.9%;
      margin-bottom: -0.8rem;
    }
    .contact {
      padding: 0.9%;
    }
    .back-menu {
      padding: 0.9%;

    }
    
      
  }