* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
  }
  body {
	background-color: #ede8d0;
	background-image: url("BACKGROUND.jpg");
	background-blend-mode: lighten;
	background-repeat: repeat; /* Do not repeat the image */
	background-size: 50%;
  }
  .card {
	width: min(790px, 90vw);
	height: min(550px, 70vh);
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	transition: 1s;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  }
  .card.opened {
	transform: rotate(-3deg);
	filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
  }
  
  .card.opened .outside {
	transform: rotateY(-180deg);
  }
  
  .card.second .outside1 {
	transform: rotateY(-175deg);
  }
  
  .card.reset .outside,
  .card.reset .outside1 {
	transform: rotateY(0deg);
  }
   
  .outside,
  .inside,
  .outside1  {
	height: 100%;
	width: 50%;
	position: absolute;
	left: 50.1%;
  }
  
  .inside {
	background: linear-gradient(to right, #e7e7e7, #ffffff 30%);
	line-height: 3;
	padding: 0 min(20px, 3vw);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	left: 50%;
	box-shadow: 
	  inset 0 0 20px rgba(0, 0, 0, 0.1),
	  inset -5px 0 15px rgba(0, 0, 0, 0.05);
  }
  
  .outside {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index: 2;
	transform-origin: left;
	transition: 2s;
	cursor: pointer;
	box-shadow: 
	  5px 0 20px rgba(0, 0, 0, 0.2),
	  inset -2px 0 8px rgba(0, 0, 0, 0.1);
  }
  
  .outside1 {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index: 1;
	transform-origin: left;
	transition: 2s;
	cursor: pointer;
	box-shadow: 
	  5px 0 20px rgba(0, 0, 0, 0.2),
	  inset -2px 0 8px rgba(0, 0, 0, 0.1);
  }
  
  .front,
  .back,
  .front1,
  .back1  {
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: rotateX(0deg);
	box-shadow: 
	  inset 0 1px 3px rgba(255, 255, 255, 0.5),
	  inset 0 -1px 3px rgba(0, 0, 0, 0.1);
  }
  .front,
  .front1 {
	background-color: #ffffff;
	box-shadow: 
	  inset 0 1px 3px rgba(255, 255, 255, 0.8),
	  inset 0 -1px 3px rgba(0, 0, 0, 0.1),
	  0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .back,
  .back1  {
	transform: rotateY(180deg);
	background: linear-gradient(to left, #e7e7e7, #ffffff 30%);
	box-shadow: 
	  inset 0 1px 3px rgba(255, 255, 255, 0.6),
	  inset 0 -1px 3px rgba(0, 0, 0, 0.15),
	  0 2px 8px rgba(0, 0, 0, 0.15);
  }
	
  .outside p {
	font-size: clamp(16px, 3vw, 23px);
	text-transform: uppercase;
	margin-top: 30px;
	text-align: center;
	letter-spacing: clamp(2px, 1vw, 6px);
	color: #000046;
  }
  .inside h1 {
	font-size: clamp(60px, 15vw, 120px);
	line-height: clamp(60px, 15vw, 120px);
  }
  
  /* Design Elements from Canva */
  
  .front{
	  background-image: url("front.png");
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
  }
  
  .back{
	  background-image: url("back.png");
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
  }
  
  .front1{
	  background-image: url("front1.png");
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
  }
  
  .back1{
	  background-image: url("back1.png");
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
  }
  
  .inside{
	  background-image: url("inside.png");
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
  }

  /* Mobile optimizations */
  @media (max-width: 768px) {
	.card {
	  width: 90vw;
	  height: 60vh;
	  min-height: 400px;
	}
	
	.inside {
	  padding: 0 15px;
	}
	
	.outside p {
	  margin-top: 20px;
	}
  }
  
  @media (max-width: 480px) {
	.card {
	  height: 25vh;
	  min-height: 225px;
	}
	
	.inside {
	  padding: 0 10px;
	}
  }