/*
  CSS RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

img,
video {
  width: 100%;
}

a {
  text-decoration: none;
  margin: 0 0 48px 0;
}




/*
  STYLES
*/

.lateef-extralight {
  font-family: "Lateef", serif;
  font-weight: 200;
  font-style: normal;
}

.lateef-light {
  font-family: "Lateef", serif;
  font-weight: 300;
  font-style: normal;
}

.lateef-regular {
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
}

.lateef-medium {
  font-family: "Lateef", serif;
  font-weight: 500;
  font-style: normal;
}

.lateef-semibold {
  font-family: "Lateef", serif;
  font-weight: 600;
  font-style: normal;
}

.lateef-bold {
  font-family: "Lateef", serif;
  font-weight: 700;
  font-style: normal;
}

.lateef-extrabold {
  font-family: "Lateef", serif;
  font-weight: 800;
  font-style: normal;
}

h1 { 
  font-family: "Lateef";
  font-size: 48px;
  text-align: center;
  font-style: bold;
  line-height: 85%;
} 

h2 { 
  font-family: "Lateef";
  color: white;
  font-size: 32px;
  font-style: bold;
  text-align: center;
  line-height: 85%;
  margin-top: 2%;
  margin-bottom: 0;
} 

h3 { 
  font-family: "Lateef";
  font-weight: lighter;
  font-size: 24px;
  line-height: 90%;
  margin-top: 20px;
} 

body {
  background-color: black;
  padding: 36px;
  padding-top: 60px;
}


header {
  display: flex;
  justify-content: center;
  align-items: center;
}

header img {
  max-height: 50px; 
  cursor: pointer; 
}


.flip-card {
  margin-top: 30px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  width: 50vh;
  height: 50vh;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: white;
  justify-content: center;
  align-items: center;
}

/* Style the back side */
.flip-card-back {
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 0, 0);
  transform: rotateY(180deg);
}

.flip-card-inner,
.flip-card-front,
.flip-card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Damit h1 & h3 untereinander bleiben */
}

.flip-card-container {
  padding-bottom: 40px;
  display: flex;
  justify-content: center; /* zentriert alle Flip-Cards in der Mitte */
  gap: 32px; /* Abstand zwischen den Karten */
  flex-wrap: wrap; /* Falls zu wenig Platz ist, werden sie umgebrochen */
}


.flip {
  padding-bottom: 10vh;
}