@font-face {
  font-family: 'RedHatDisplay';
  src: url('../media/font/RedHatDisplay-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'RedHatDisplayItalic';
  src: url('../media/font/RedHatDisplay-Italic-VariableFont_wght.ttf');
}

html {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background-image: url('../media/img/Background.png');
  background-position-x: center;
  background-size: cover;
  font-family: RedHatDisplay;
}


.link{
  text-decoration: none;
}
.games {
  margin: 2vh;
  padding: 1vh 2vh 2vh 2vh;
  height: 10vh;
  width: 37vh;
  background-color: white;
  border-radius: 2vh;
  box-shadow: 0px 0px 20px #0000004b;
}
.games h2 {
  font-size: 4vh;
  margin: 0vh;
  color:rgba(0,55,165,1);
}

.wrapper {
  margin: 0vh 0vh 5vh 0vh;

  display: flex;
  align-items: center;
  justify-content: center;

}
.wrapper2 {
  height: 100vh;
  width: 100vw;
  display: block;
  align-items: center;
  justify-content: center;
}

.container{
    perspective: 1000px;
    z-index: 3;
    height: 55vh;
    width: 37vh;
}

#card {
  position: relative;
  transition: all 0.4s linear;
  transform-style: preserve-3d;
  height: 55vh;
  width: 37vh;
}

#Texte{
  height: 55vh;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding: 0vh 2vh 0vh 2vh;
}

.Kartebild1{
  width: 37vh;
  backface-visibility: hidden;
}
.Kartebild2{
  width: 37vh;
}

#cardfront {
  text-align: center;
  z-index: 2;
  position: absolute;
  backface-visibility: hidden;
}

#cardback {
  text-align: center;
  z-index: 1;
  position: absolute;
  transform: rotateY(180deg);
}

#cardback p {
  color: #002973;
  font-size: 3vh;
  width: 33vh;
}

.untermenue {
  display: flex;
  align-items: center;
  justify-content: center;
}
#neuladen {
  width: 38vh;
  height: 6vh;
  font-size: 4vh;
  font-family: RedHatDisplayItalic;
  font-weight:bold;
  border-radius: 3vh;
  border: none;
  box-shadow: 0px 0px 20px #0000004b;
  color: white;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(51,197,0,1) 0%, rgba(44,168,0,1) 100%);
}