@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }

body {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif; }

.container {
  min-height: 100vh;
  min-width: 100vw;
  background: #ffffff;
  background: -webkit-radial-gradient(center, #ffffff, #555555);
  background: -moz-radial-gradient(center, #ffffff, #555555);
  background: radial-gradient(ellipse at center, #ffffff, #555555);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 1fr);
  justify-items: center; }

@keyframes enter {
  0% {
    transform: translateY(40%);
    z-index: -1;
    box-shadow: 0 0 20rem 5rem rgba(0, 0, 0, 0.8);
    filter: blur(6px); }
  50% {
    transform: translateY(-70%);
    box-shadow: 0 0 10rem 5rem rgba(0, 0, 0, 0.6); }
  75% {
    z-index: 1;
    box-shadow: 0 0 5rem 2rem rgba(0, 0, 0, 0.4);
    filter: blur(2px); }
  100% {
    transform: translateY(0%);
    box-shadow: 0;
    filter: blur(0); } }

.card-block {
  max-width: 43rem;
  max-height: 27rem;
  width: 43rem;
  height: 27rem;
  z-index: 5;
  position: relative;
  border-radius: 1.5rem;
  perspective: 200rem;
  -moz-perspective: 200rem;
  transition: all 1s ease-in-out;
  grid-column: 3/7;
  grid-row: 2/6;
  animation: 2s enter ease-in forwards; }
  @media (min-width: 300px) and (max-width: 700px) {
    .card-block {
      max-width: 33rem;
      max-height: 20rem;
      width: 33rem;
      height: 20rem; } }
  .card-block__side {
    width: 100%;
    height: 100%;
    box-shadow: 0 2rem 6rem 0 rgba(122, 122, 122, 0.7);
    border-radius: 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
    display: grid; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-block__side {
        transition-delay: 0.6s; } }
    .card-block__side--front {
      background-color: #000000;
      background: linear-gradient(315deg, #000000 0%, #414141 74%);
      transform: rotateY(0deg); }
    .card-block__side--back {
      background-color: #000000;
      background: linear-gradient(-315deg, #000000 0%, #414141 74%);
      transform: rotateY(180deg);
      z-index: -1; }

.flip-front {
  transform: rotateY(-180deg); }

.flip-back {
  transform: rotateY(0deg); }

.card-item {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 25% 1fr; }
  .card-item__chip {
    height: 100%;
    width: 100%;
    position: relative;
    top: 1.2rem;
    left: 0.8rem;
    background: url("./assets/chip.png");
    background-size: 8rem;
    background-repeat: no-repeat; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__chip {
        background-size: 6rem; } }
  .card-item__logo {
    height: 10rem;
    width: 10rem;
    background: url("./assets/visa.png");
    background-size: 9rem;
    background-repeat: no-repeat;
    grid-column: 3 / -1;
    justify-self: end;
    align-self: center; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__logo {
        background-size: 7rem;
        height: 7rem;
        width: 8rem; } }
  .card-item__number {
    color: #f5f5f5;
    font-size: 2.4rem;
    font-weight: 400;
    position: relative;
    left: 1.2rem;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    align-self: end;
    pointer-events: none; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__number {
        font-size: 1.8rem; } }
    .card-item__number > span {
      display: inline-block;
      width: 1.9rem;
      transition: all 0.25s ease-in-out; }
      @media (min-width: 300px) and (max-width: 700px) {
        .card-item__number > span {
          width: 1.4rem; } }
  .card-item__name {
    color: #f5f5f5;
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    position: relative;
    text-transform: capitalize;
    left: 1.2rem;
    align-self: flex-end;
    grid-column: 1 / 3; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__name {
        font-size: 1.2rem; } }
  .card-item__date {
    color: #f5f5f5;
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    align-self: flex-end;
    justify-self: center; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__date {
        font-size: 1.2rem; } }
  .card-item__stripe {
    background-color: #000;
    height: 6rem;
    width: 39rem;
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center; }
  .card-item__cvv {
    background-color: #fff;
    height: 4rem;
    border-radius: 0.6rem;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.5rem;
    font-size: 1.6rem; }
  .card-item__logo--back {
    height: 7rem;
    width: 8rem;
    background: url("./assets/visa.png");
    background-size: 8rem;
    background-repeat: no-repeat;
    opacity: 0.5;
    grid-row: 3/4;
    grid-column: 1 / -1;
    justify-self: flex-end;
    align-self: flex-end; }
    @media (min-width: 300px) and (max-width: 700px) {
      .card-item__logo--back {
        background-size: 5rem;
        height: 4rem;
        width: 5rem; } }

.form-block {
  max-width: 60rem;
  max-height: 60rem;
  width: 60rem;
  height: 60rem;
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 3rem 6rem 0 rgba(122, 122, 122, 0.8);
  grid-column: 3/7;
  grid-row: 3/9; }
  @media (min-width: 300px) and (max-width: 700px) {
    .form-block {
      max-width: 125%;
      max-height: 62rem;
      width: 132%;
      height: 62rem;
      grid-column: 2/8; } }

.form-item {
  padding-top: 20rem;
  font-size: 1.4rem;
  color: #7a7a7a;
  display: grid;
  grid-template-columns: 1fr 70% 1fr;
  position: relative; }
  @media (min-width: 300px) and (max-width: 700px) {
    .form-item {
      grid-template-columns: 1fr 90% 1fr;
      padding-top: 13rem; }
      .form-item > div > label,
      .form-item > div > div > label {
        font-size: 1.2rem; } }
  .form-item__number {
    grid-column: 2 / 3; }
    .form-item__number #card-number {
      letter-spacing: 1rem; }
      @media (min-width: 300px) and (max-width: 700px) {
        .form-item__number #card-number {
          letter-spacing: 0.7rem; } }
  .form-item__name {
    grid-column: 2 / 3; }
  .form-item__group {
    grid-column: 2 / 3;
    display: flex;
    justify-content: space-between; }
    @media (min-width: 300px) and (max-width: 700px) {
      .form-item__group {
        flex-direction: column; } }
  .form-item__month > label {
    display: block;
    width: 20rem; }
  .form-item__month {
    width: 12rem;
    height: 5rem; }
    @media (min-width: 300px) and (max-width: 700px) {
      .form-item__month {
        width: 100%; } }
  .form-item__year {
    width: 12rem; }
    @media (min-width: 300px) and (max-width: 700px) {
      .form-item__year {
        width: 100%; } }
  .form-item__cvv {
    width: 30%;
    grid-column: 2 / 3; }
    @media (min-width: 300px) and (max-width: 700px) {
      .form-item__cvv {
        width: 100%; } }
  .form-item__button {
    border: none;
    font-size: 1.8rem;
    background-color: transparent;
    cursor: pointer;
    background: #3f3f3f;
    color: #fff;
    padding: 1.6rem 0;
    border-radius: 0.6rem;
    margin-top: 1rem;
    transition: all 0.3s;
    grid-column: 2 / 3; }
  .form-item__reset {
    margin-top: 1.5rem;
    padding: 0.5rem 2rem;
    border-radius: 5rem;
    cursor: pointer;
    justify-self: center;
    align-self: center;
    grid-column: 2 / 3; }
    .form-item__reset > a {
      color: #a0a0a0;
      text-decoration: none; }
  .form-item__reset:hover {
    box-shadow: 0 0 0.5rem #d1d1d1; }
  .form-item__reset:active {
    box-shadow: 0 0 0.2rem #d1d1d1;
    transform: translateY(0.1rem); }

.form-input {
  font-size: 1.8rem;
  font-family: inherit;
  letter-spacing: 0.2rem;
  border: 0;
  outline: 0;
  width: 100%;
  border-radius: 0.6rem;
  padding: 1.5rem 2rem;
  border: 1px solid #949494;
  margin-bottom: 2rem;
  margin-top: 0.5rem;
  caret-color: #53749e;
  color: #53749e;
  font-weight: 400;
  background-color: #fff; }
  @media (min-width: 300px) and (max-width: 700px) {
    .form-input {
      padding: 1rem 1.5rem;
      font-size: 1.4rem;
      letter-spacing: 0.1rem; } }
  .form-input--select {
    padding: 1.5rem 1rem;
    color: #7a7a7a;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC");
    background-size: 1.2rem;
    background-position: 90% center;
    background-repeat: no-repeat;
    padding-right: 3rem; }
    @media (min-width: 300px) and (max-width: 700px) {
      .form-input--select {
        padding: 1rem 1.5rem;
        background-position: 95% center; } }

.form-input:focus {
  box-shadow: 0 0 0.5rem rgba(33, 150, 243, 0.8);
  border: 1px solid rgba(33, 150, 243, 0.5); }

input[type='number'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield; }

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none; }

.test {
  transform: rotateX(360deg); }

.invalid {
  box-shadow: 0 0 0.5rem #e27676; }

.danger {
  color: #e27676;
  opacity: 1;
  transition: all 1s ease; }

.hide {
  opacity: 0; }

.numberItem {
  position: absolute;
  transform: translate(-18px, 15px);
  opacity: 0; }

.slide-fade-up-appear {
  opacity: 1;
  transform: translate(-17px, 0px); }

.slide-fade-up-disappear {
  opacity: 0;
  transform: translateY(-15px); }