a {
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-family:Maiandra GD;
}

[class*="wrapper"]:hover > .overlay {
    background-color:#FFF;
    opacity:0.75;
    border-radius:30px;
}

a:active {
  box-shadow: none;
  top: 5px;
}

a.green {
  background-color: #165E00;
  box-shadow: 0 5px 0 #114E00;
}

a.red {
  background-color: #DD0000;
  box-shadow: 0 5px 0 darkred;
}

a.purple {
  background-color: #800080;
  box-shadow: 0 5px 0 #600060;
}

a.yellow {
  background-color: #FFDD00;
  box-shadow: 0 5px 0 #ccb100;
  color: #DD0000;
}

/* Non-Demo Styles */
body {
  display: flex;
  flex-direction:  column ;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("Hintergrund.jpg");
  background-position: center; /* Center the image */
  background-repeat: no-repeat;
  background-size: cover; /* Resize the background image to cover the entire container */
  background-color: #222;
}