main.css

body{
    font-family: 'Inter', sans-serif;
    background-color: hsl(0, 0%, 90%);
}

#flexer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 25vh 5vw;
    height: 50%;
    text-align: center;
    box-shadow: 
        3px 3px 5px #93939380, 
        -3px -3px 6px #ffffff8a;
    
}

.header h1 {
    /* align text in the middle */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* height: 100%; */
}

button {

    background: linear-gradient(-45deg, rgba(3, 3, 3, 0.111), rgba(255, 255, 255, 0.342));    border: none; /* Keinen Rahmen anzeigen */
    border-radius: 10px; /* Abgerundete Ecken */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); Schattenwurf */
    box-shadow: 
        3px 3px 5px #93939380, 
        -3px -3px 6px #ffffff8a;
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Cursor zu einer Hand ändern, wenn darüber gehovert wird */
    transition: all 0.3s ease; /* Eine sanfte Übergangsanimation */
  }
  
  button:hover {
    background: linear-gradient(-45deg, rgba(3, 3, 3, 0.09), rgba(255, 255, 255, 0.342));    border: none; /* Keinen Rahmen anzeigen */

    box-shadow: 
       1.5px    1.5px 4px #93939380, 
       -1.5px    -1.5px 5px #ffffff8a;
    transform: translateY(0.8px);
    }
  
  button:active {
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.342), rgba(3, 3, 3, 0.09));    border: none; /* Keinen Rahmen anzeigen */

    box-shadow: 
    1px 1px 3px #93939350
    inset, 
    -1px -1px 3px #ffffffc0
    inset;
}