@media (max-aspect-ratio: 1/1.5) {
	.card-container {
		width: 80vw;
		height: calc(80vw * 1.501);
		margin-top: calc(((80vh - (80vw * 1.501)) / 2) + 10vh);
	}
	
	#container1 {
		width: 80vw;
		height: calc(80vw * 1.501);
		margin-top: calc(((80vh - (80vw * 1.501)) / 2) + 10vh);
	}
}

@media (min-aspect-ratio: 1/1.5) {
	.card-container {
		width: calc(80vh / 1.501);
		height: 80vh;
		margin-top: 5vh;
		margin-left: calc(((80vw - (80vh / 1.501)) / 2) + 10vw);
	}
	#container1 {
		width: calc(80vh / 1.501);
		height: 80vh;
		margin-top: 5vh;
		margin-left: calc(((80vw - (80vh / 1.501)) / 2) + 10vw);
	}
}

.text-bubble {
  position: absolute;
  background-color: rgba(0,0,0,0.85);
  color: white;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 3.5vh;
}

.info-card {
	width: 100%; 
	height:100%; 
	position:absolute; 
	left: 0; 
	top: 0;
	cursor: pointer;
  font-size: 2.5vh;
}

.text-info {
	position: absolute; 
	left:0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	text-align: center; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	color: white; 
	font-size: larger;
}

.text-info > p {
	margin: 10px;
}

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green
}


.hideable-card {
	position: relative;
	visibility: hidden;
	display: none;
}

.visible-card {
  visibility: visible;
  
  -webkit-animation: fadeInFromNone 0.3s ease-out;
  -moz-animation: fadeInFromNone 0.3s ease-out;
  -o-animation: fadeInFromNone 0.3s ease-out;
  animation: fadeInFromNone 0.3s ease-out;
	display: block;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  /*perspective: 20000px;  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;
  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);
}*/

.flipped {
	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: black;
}

/* Style the back side */
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

#top-left {
	position: absolute;
	top: 7%;
	left: 15%;
	background: rgba(255,0,0,0.01);
	width: 20%;
	height: 20%;
}

#top-right {
	position: absolute;
	top: 7%;
	right: 15%;
	background: rgba(255,0,0,0.01);
	width: 20%;
	height: 20%;
}

#bottom-left {
	position: absolute;
	bottom: 7%;
	left: 15%;
	background: rgba(255,0,0,0.01);
	width: 20%;
	height: 20%;
}

#bottom-right {
	position: absolute;
	bottom: 7%;
	right: 15%;
	background: rgba(255,0,0,0.01);
	width: 20%;
	height: 20%;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}