body{
  font-family: system-ui;
  background: linear-gradient(135deg,#4b6cb7,#182848);
  color:white;
  text-align:center;
  margin:0;
}

.flashHeader{
  padding:20px;
}

.backBtn{
  text-decoration:none;
  color:white;
  font-weight:bold;
}

.flashContainer{
  padding:40px 20px;
}

.card{
  width:320px;
  height:220px;
  margin:20px auto;
  perspective:1000px;
}

.cardInner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition: transform 0.6s;
}

.card.flipped .cardInner{
  transform: rotateY(180deg);
}

.cardFront,
.cardBack{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  padding:20px;
  font-size:20px;
  font-weight:600;
  background:white;
  color:#182848;
}

.cardBack{
  transform: rotateY(180deg);
}

.flashControls button{
  margin:10px;
  padding:10px 20px;
  border:none;
  border-radius:12px;
  font-size:16px;
  cursor:pointer;
}