html {
  background: url('./background-video.mp4') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: fixed;
  }

/* video {
 justify-content: center;
  position: fixed;
  right: 40%;
  bottom: 60%;
  top: 50%;
  left: 0%;
  height: 95%;
  width: 280%;
  z-index: 100;
  } */



    img {
height: 300px;
      width: 200px;
}

.cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
perspective: 1000%;
}

.card {
  z-index: 200;
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s;
  transform-style: preserve-3d;
}

.card:nth-child(2) {
  transform: translateY(-50px);
}

.card:nth-child(3) {
  transform: translateY(-100px);
}

.card.fan-out {
  transform: translateX(calc((100% / 4) * var(--index))) translateY(-50%);
z-index: 200;
}

.card.selected {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  cursor: auto;
}
#one {
  background-color: rgb(250, 100, 100);
}
#one:selected{
   transform: rotateY(50deg);
}
#two {
  background-color: rgb(200, 0, 200);
}
#two:selected{
   transform: rotateX(50deg);
}
#three {
  background-color: rgb(0, 200, 150);
}
  #three:selected{
     transform: rotateY(50deg);
  }

.reset {
border: white solid 3px;
  
}


.instructions {
color: white;
}