html {
  .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
}
body {
  font-family: ("https://fonts.google.com/specimen/Space+Grotesk");
  font-weight: 500;
}
.main-container {
  display: flex;
}
.left-section {
  background-image: url("images/bg-main-desktop.png");
  height: 100vh;
  width: 30vw;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
.front-card {
  width: 360px;
  height: 200px;
}
.error {
  border: 1px solid red;
}
.nameerror, .dateerror, .numerror, .cvcerror {
  color: red;
  margin-top: 0px;
  font-size: 12px;
  font-style: italic;
}
.frontcard {
  position: relative;
  top: 80px;
  left: 140px;
}
.backcard {
  position: relative;
  top: 110px;
  left: 190px;
}
.back-card {
  width: 360px;
  height: 200px;
}
.cvc-output {
  position: absolute;
  left: 290px;
  font-size: 18px;
  top: 70px;
  color: white;
}

.cardlogo {
  height: 30px;
  position: absolute;
  top: 10px;
  left: 12px;
}

.card-number {
    position: absolute;
    color: white;
    max-width: 90%;
    letter-spacing: 0.1vw;
    bottom: 30px;
    left: 14px;
  }

.carddetails {
  position: absolute;
  z-index: 100;
  left: 14px;
  margin-right: -24px;
  bottom: 15px;
  display: flex;
  width: 90%;
  justify-content: space-between;
  color: white; 
}
.atmnum {
  width: 100%;
}

.right-section, .thank-you {
  width: 70vw;
  padding-left: 30%;
  padding-right: 10%;
  display: flex;
  align-items: center;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
label {
  font-size: 12px;
  margin-bottom: 2%;
}
input {
  padding: 4% 3%;
  border-radius: 5px;
  border: 1px solid lightgray;
  font-size: 12px;
  margin-bottom: 0px;
}
.btn {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background-color: hsl(278, 68%, 11%);
  color: hsl(0, 0%, 100%);
}
.date-flex {
  display: flex;
  column-gap: 20px;
  label {
    font-size: 12px;
    margin-bottom: 10px;
  }
}
.err {
  border: 1px solid red;
}
.error {
  color: red;
}
.thankyou-img {
  width: 50px;
  height: 50px;
}
.thank-you {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hidden {
  display: none;
}
.inputflex {
  display: flex;
  column-gap: 10px;
  input {
    width: 35px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
.cvc-input {
  width: 120px;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media screen and (max-width: 400px) {
  .main-container {
   flex-direction: column;
   max-width: 100vw;
   padding: 0;
   margin: 0;
   position: relative;
    }
  .left-section {
    background-image: url("images/bg-main-mobile.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 30vh;
    display: flex;
    flex-direction: column-reverse;
  }
  .frontcard {
    max-width: 300px;
    height: 160px;
    top: 70px;
    left: 4vw;
    z-index: 100;
  }
  .backcard {
    max-width: 300px;
    height: 160px;
    top: 20vh;
    left: 20vw;
   
  }
  .front-card {
    width: 100%;
    height: 100%;
  }
  .atmnum  {
    font-size: 13px;
  }
  .back-card {
    width: 100%;
    height: 100%;
  }
  .cardlogo {
    width: 30px;
    height: 20px;
  }
  .cvc-output {
    top: 50px;
    left: 240px;
  }
  .carddetails {
    bottom: 1vh;
  }

  .right-section, .thank-you {
    margin-top: 15vh;
    width: 100%;
    justify-content: center;
    padding: 0;
  }
  .detailinfo {
    width: 60%;
    top: 35%;
    left: 15%;
  }
  input {
    margin-bottom: 0px;
  }
  .btn {
    margin-top: 2vh;
  }
}

@media screen and (max-width: 800px) and (min-width: 401px){
  .main-container {
    flex-direction: column;
    width: 100vw;
    padding: 0;
    margin: 0;
     }
   .left-section {
     background-image: url("images/bg-main-mobile.png");
     background-size: cover;
     background-repeat: no-repeat;
     width: 100%;
     height: 35vh;
     display: flex;
     flex-direction: column-reverse;
   }
   .frontcard {
     width: 50%;
     height: 100%;
     top: 130px;
     left: 190px;
     z-index: 100;
   }
   .backcard {
     width: 50%;
     height: 100%;
     top: 220px;
     left: 270px;
     z-index: 90;
   }
   .front-card {
     width: 100%;
     height: 100%;
   }
   .back-card {
     width: 100%;
     height: 100%;
   }
   .cardlogo {
     width: 70px;
     height: 40px;
   }
   .atmnum {
    font-size: 14px;
   }
   .cvc-output {
     top: 80px;
     left: 320px;
    
   }
   .carddetails {
     bottom: 1vh;
   }
 
   .right-section, .thank-you {
     margin-top: 15vh;
     width: 100%;
     justify-content: center;
     padding: 0;
   }
   .detailinfo {
     width: 60%;
     top: 35%;
     left: 15%;
   }
   input {
     margin-bottom: 0px;
   }
   .btn {
     margin-top: 2vh;
   }

}