@import url("css.css");
@import url("css-1.css");


.card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-container .credit-card {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 450px;
  height: 270px;
  border-radius: 15px;
  background: #ffa78b;
  margin: auto;
  padding: 40px;
  transition: all 2s ease;
  transform-style: preserve-3d;
  animation: card-isometric 10s infinite;
}
.card-container .card-layer {
  position: absolute;
  border-radius: 15px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.card-container .card-layer-1 {
  transform: translateX(0px) translateY(0) translateZ(30px);
  background: rgba(255, 167, 139, 0.6);
  border: 2px solid rgba(255, 167, 139, 0.5);
}
.card-container .card-layer-2 {
  transform: translateX(0px) translateY(0) translateZ(60px);
  background: rgba(255, 167, 139, 0.4);
  border: 2px solid rgba(255, 167, 139, 0.5);
}
.card-container .card-layer-3 {
  transform: translateX(0px) translateY(0) translateZ(90px);
  background: rgbargba(255, 167, 139, 0.2);
  border: 2px solid rgba(255, 167, 139, 0.5);
}
.card-container .credit-card .bank {
  font-family: "Eczar", serif;
  position: absolute;
  top: 40px;
  right: 40px;
  text-align: right;
  font-size: 3em;
  font-weight: bold;
  line-height: 1em;
  color: #ffffff;
  transform: translateX(0px) translateY(0px) translateZ(65px);
}
.card-container .credit-card .chip {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 60px;
  height: 40px;
  border-radius: 15px;
  border: none;
  background-image: url("3ee7564584148615429a63e65fe1b3844d497393.svg");
  transform: translateX(0px) translateY(0px) translateZ(65px);
}
.card-container .credit-card .number {
  color: white;
  width: 100%;
  text-align: left;
  font-size: 2.19em;
  margin: auto;
  transform: translateX(0px) translateY(0px) translateZ(95px);
}
.card-container .credit-card .name {
  position: absolute;
  color: white;
  bottom: 40px;
  left: 40px;
  text-transform: uppercase;
  font-size: 1.5em;
  margin-top: 20px;
  transform: translateX(0px) translateY(0px) translateZ(35px);
}

.card-container .credit-card .circuit {
    position: absolute;
    color: white;
    bottom: 40px;
    left: 380px;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-top: 20px;
    transform: translateX(0px) translateY(0px) translateZ(65px);
  }
.card-container .credit-card .expiry {
  position: absolute;
  color: white;
  bottom: 90px;
  left: 40px;
  text-transform: uppercase;
  transform: translateX(0px) translateY(0px) translateZ(35px);
}
.card-container .credit-card .cvv {
  position: absolute;
  color: white;
  bottom: 90px;
  left: 240px;
  text-transform: uppercase;
  transform: translateX(0px) translateY(0px) translateZ(35px);
}

@keyframes card-isometric {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  }
}

@media only screen and (max-width: 766px) {
    .card-container .credit-card {
        margin-top: 40px;
    }

    .card-container {
        margin-top: 40px;
    }
  }

  @media only screen and (max-width: 520px) {
    .card-container .credit-card {
        margin-top: 40px;
        scale: 0.9;
    }

    .card-container {
        margin-top: 40px;
        scale: 0.9;
    }
  }

  @media only screen and (max-width: 485px) {
    .card-container .credit-card {
        margin-top: 40px;
        scale: 0.8;
    }

    .card-container {
        margin-top: 40px;
        scale: 0.8;

    }
  }

  @media only screen and (max-width: 455px) {
    .card-container .credit-card {
        margin-top: 40px;
        scale: 0.8;
        margin-left: -30px;
    }

    .card-container {
        margin-top: 40px;
        scale: 0.8;

    }
  }

  @media only screen and (max-width: 399px) {
    .card-container .credit-card {
        margin-top: 40px;
        scale: 0.8;
        margin-left: -45px;
    }

    .card-container {
        margin-top: 40px;
        scale: 0.8;

    }
  }

  @media only screen and (max-width: 375px) {
    .card-container .credit-card {
        margin-top: 40px;
        scale: 0.7;
        margin-left: -45px;
    }

    .card-container {
        margin-top: 40px;
        scale: 0.7;

    }
  }