@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap");

:root {

  --linear-gradient: linear-gradient(hsl(308, 47%, 21%), hsl(278, 68%, 16%));
  --red: hsl(0, 100%, 66%);
  /* NEUTRAL */
  --white: hsl(0, 0%, 100%);
  --light-grayish-violet: hsl(270, 3%, 87%);
  --dark-grayish-violet: hsl(279, 6%, 55%);
  --very-dark-violet: hsl(278, 68%, 11%);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Space Grotesk", sans-serif;
  line-height: 1;
  font-size: calc((18 / 16) * 1rem);
  font-weight: 500;
  color: var(--very-dark-violet);
  background-color: var(--white);
}
.btn {
  cursor: pointer;
  font-size: calc((16 / 16) * 1rem);
  color: var(--white);
  background: var(--very-dark-violet);
  border: none;
  width: 100%;
  padding: calc((18 / 16) * 1rem);
  border-radius: calc((7 / 16) * 1rem);
  transition: transform ease-out 0.1s;
}
.btn:hover {
  background: var(--linear-gradient);
}
.btn:active {
  transform: scale(0.99);
}
.btn:focus {
  outline: calc((2 / 16) * 1rem) dotted var(--very-dark-violet);
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hidden {
  display: none !important;
}
main {
  min-height: calc(100vh - (calc((50 / 16) * 1rem)));
  min-width: calc((300 / 16) * 1rem);
}
.cards-container {
  color: var(--white);
  background-image: url(../images/bg-main-mobile.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: calc((250 / 16) * 1rem);
  padding: calc((30 / 16) * 1rem) calc((20 / 16) * 1rem);
}
.cards {
  max-width: calc((400 / 16) * 1rem);
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.cards__card {
  font-size: calc((12 / 16) * 1rem);
  letter-spacing: calc((1 / 16) * 1rem);
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-size: cover;
  width: calc((300 / 16) * 1rem);
  height: calc((165 / 16) * 1rem);
  box-shadow: calc((20 / 16) * 1rem) calc((30 / 16) * 1rem)
    calc((50 / 16) * 1rem) rgba(0, 0, 0, 0.1);
  position: absolute;
}
.cards__card--front {
  z-index: 101;
  background-image: url(../images/bg-card-front.png);
  bottom: calc((-75 / 16) * 1rem);
  left: 0;
}
.card__logo {
  height: calc((30 / 16) * 1rem);
  position: absolute;
  top: calc((20 / 16) * 1rem);
  left: calc((20 / 16) * 1rem);
}
.card__number {
  font-size: calc((18 / 16) * 1rem);
  letter-spacing: calc((3 / 16) * 1rem);
  position: absolute;
  bottom: calc((50 / 16) * 1rem);
  left: calc((20 / 16) * 1rem);
}
.card__name {
  position: absolute;
  bottom: calc((20 / 16) * 1rem);
  left: calc((20 / 16) * 1rem);
}
.card__date {
  position: absolute;
  bottom: calc((20 / 16) * 1rem);
  right: calc((20 / 16) * 1rem);
}
.cards__card--back {
  z-index: 100;
  background-image: url(../images/bg-card-back.png);
  top: 0;
  right: 0;
}
.card__code {
  position: absolute;
  top: calc((74 / 16) * 1rem);
  right: calc((35 / 16) * 1rem);
}
.form-container {
  padding: calc((80 / 16) * 1rem) calc((20 / 16) * 1rem) calc((20 / 16) * 1rem);
}
.form {
  max-width: calc((400 / 16) * 1rem);
  margin: 0 auto;
  font-size: calc((14 / 16) * 1rem);
  text-transform: uppercase;
  letter-spacing: calc((2 / 16) * 1rem);
}
.form .form-control {
  margin-bottom: calc((20 / 16) * 1rem);
}
.form-control--error-message {
  text-transform: none;
  color: var(--red);
  margin-top: calc((5 / 16) * 1rem);
  display: none;
}
.form .form-control--date input {
  width: 47%;
}
.form .form-control__group {
  display: flex;
  gap: calc((10 / 16) * 1rem);
}
.form label {
  display: block;
  margin-bottom: calc((10 / 16) * 1rem);
}
.form input {
  width: 100%;
  font-size: calc((18 / 16) * 1rem);
  padding: calc((10 / 16) * 1rem);
  border-radius: calc((7 / 16) * 1rem);
  border: calc((1.5 / 16) * 1rem) solid var(--light-grayish-violet);
}
.form input:focus {
  outline: none;
  border: calc((1.5 / 16) * 1rem) solid var(--very-dark-violet);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}
::-webkit-input-placeholder {
  color: var(--dark-grayish-violet);
}
:-ms-input-placeholder {
  color: var(--dark-grayish-violet);
}

::placeholder {
  color: var(--dark-grayish-violet);
}
.form-control--error input {
  border: calc((1.5 / 16) * 1rem) solid var(--red);
}
.form-control--error .form-control--error-message {
  display: block;
}
.reset-input-border-color {
  border: calc((1.5 / 16) * 1rem) solid var(--light-grayish-violet) !important;
}
.completed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc((30 / 16) * 1rem);
}

.completed__text {
  margin-bottom: calc((20 / 16) * 1rem);
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc((50 / 16) * 1rem);
  min-width: calc((170 / 16) * 1rem);
  color: var(--dark-grayish-blue);
  background-color: var(--light-grayish-violet);
  font-size: calc((13 / 16) * 1rem);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: calc((5 / 16) * 1rem);
  z-index: 100;
}
.boxv {
  display: none;
}
.attribution {
  font-size: calc((11 / 16) * 1rem);
}
.attribution a:link,
.attribution a:visited {
  color: var(--very-dark-violet);
  padding: calc((1 / 16) * 1rem);
  text-decoration: none;
}
.attribution a:hover,
.attribution a:active {
  color: var(--blue);
  border-bottom: calc((1 / 16) * 1rem) solid var(--very-dark-violet);
}
.attribution a:focus {
  outline: calc((2 / 16) * 1rem) dotted var(--very-dark-violet);
}
.footer--friendly {
  background-color: #f0f8ff; 
  color: #333; 
  padding: 1rem;
  border-top: 2px solid #add8e6; 
}
.footer--friendly a {
  color: #007acc; 
  text-decoration: none;
}
.footer--friendly a:hover {
  text-decoration: underline;
}