/*font Quicksand and Barlow*/
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Quicksand:wght@300;400;700&display=swap');

:root {
  /*colors*/
  --primary-blue: #33658A;
  --secondary-blue: #1976D2;
  --lineal-accent: #BEE9E8;
  --primary-orange: #F95738;
  --primary-black: #333333;
  --secondary-black: #1E1E1E;
  --primary-withe: #FFFFFF;
  --primary-gray: #D9D9D9;
  --red: #D62828;
  --yellow: #F77F00;
  /*fonts*/
  --primary-font: 'Quicksand', sans-serif;
  --secondary-font: 'Barlow', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.flip-card-container {
  /*card width and height*/
  width: 320px;
  height: 190px;
  /*the container is transparent*/
  background-color: transparent;
  /*3D effect on flip*/
  perspective: 1000px;
}

/*to position the front and back of the card*/
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/*rotate 180deg the flip-card-inner on flip-card-container:hover */
/*rotate right to left (-180deg)*/
.flip-card-container:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

.front-card, .back-card {
  position: absolute;
  width: 100%;
  height: 100%;
  /*on flip hide the back face*/
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/*front side of the card*/
.front-card {
  /*width and height in flip-card-container*/
  padding: 12px 21px;
  border-radius: 10px;
  background: linear-gradient(70.58deg, var(--primary-blue) 0%, var(--lineal-accent) 100%);
}

.top-content, .middle-content, .bottom-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 33%;
}

/*front side, top content*/
.top-content {
  align-items: center;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--primary-font);
}

.top-content__card-title {
  font-size: 40px;
  color: var(--primary-blue);
}

.top-content__card-text {
  font-size: 16px;
  color: var(--primary-black);
}

/*front side, middle content*/
.middle-content {
  /*change flex direction*/
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.06em;
  font-family: var(--secondary-font);
  /*neumorphism and color*/
  color: rgba(234, 235, 237, 0.5);
  text-shadow: -1px 1px 2px rgba(97, 98, 98, 0.2), 1px -1px 2px rgba(97, 98, 98, 0.2);
}

.middle-content__card-number {
  font-size: 20px;
}

.middle-content__card-dates {
  font-size: 14px;
  margin-top: 8px;
}

/*front side, bottom content*/
.bottom-content {
  align-items: flex-end;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.06em;
  font-family: var(--secondary-font);
}

.bottom-content__card-user {
  font-size: 20px;
  text-transform: uppercase;
  /*neumorphism and color*/
  color: rgba(234, 235, 237, 0.5);
  text-shadow: -1px 1px 2px rgba(97, 98, 98, 0.2), 1px -1px 2px rgba(97, 98, 98, 0.2);
}

/*maincard logo*/
.bottom-content__logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 67px;
  height: 54px;
}

.logo {
  position: relative;
  width: 100%;
  height: 80%;
}

.logo__circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.logo__circle--red {
  background-color: var(--red);
}

.logo__circle--yellow {
  left: 35%;
  background-color: var(--yellow);
  opacity: 75%;
}

.bottom-content__logo-text {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-family: var(--primary-font);
  color: var(--primary-black);
}

/*back side of the card*/
.back-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /*must rotate itself to prevent the reverse text*/
  transform: rotateY(180deg);
  padding: 12px 21px;
  border-radius: 10px;
  background-color: var(--primary-orange);
  /*same text properties for all items inside*/
  font-style: normal;
  font-weight: 500;
  font-size: 5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-family: var(--secondary-font);
  color: var(--primary-withe);
}

.magnetic-band {
  position: absolute;
  width: 100%;
  height: 31px;
  top: 22px;
  /* to stay over the padding in the left */
  /* remove this and go see the box model, you should see a -21px to prevent*/
  left: 0px;
  background-color: var(--primary-black);
}

.back-card__top-text {
  line-height: 10px;
}

.back-card__security-code {
  width: 176px;
  height: 23px;
  margin-top: 40px;
  background-color: var(--primary-gray);
}

.back-card__security-code p{
  font-style: italic;
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  text-align: right;
  margin-right: 5px;
  color: var(--secondary-black);
}

.back-card__info {
  display: flex;
  margin-top: 16px;
}

.back-card__logo-info {
  width: 53px;
  height: 34px;
  flex-basis: 53px;
  flex-shrink: 0;
  border-radius: 20px;
  margin-right: 7px;
  background-color: var(--primary-gray);
}

.back-card__logo-text {
  line-height: 7px;
  text-align: left;
}

/*last logos*/
.back-card__logos-wrapper {
  align-self: flex-end;
  width: 80px;
  height: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: top;
}

.logo-maincard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 29px;
  height: 27px;
}

.logo-maincard-wrapper {
  position: relative;
  width: 25px;
  height: 17px;
  top: 0;
  left: 0;
}

.logo-circle--small {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--primary-orange);
  background-color: var(--primary-withe);
}

.left {
  left: 35%;
}

.logo-tink {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17.8px;
  height: 17.78px;
  border-radius: 50%;
  border: 1px solid var(--primary-orange);
  background-color: var(--primary-withe);
  color: var(--primary-orange);
  text-transform: uppercase;
  font-size: 6px;
}

.logo-b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17.8px;
  height: 17.78px;
  border-radius: 5px;
  border: 1px solid var(--primary-orange);
  background-color: var(--primary-withe);
  color: var(--primary-orange);
  text-transform: uppercase;
  font-size: 14px;
}