@import url(./style.css);
body {
  background-image: url(../images/bg-intro-desktop.png);
  background-color: var(--red);
  /* background-repeat: no-repeat; */
  background-position: -20vw -10vh;
}
main {
  text-align: center;
  padding: 1.5rem 1.5rem;
}
.start {
  margin-block: 4.1rem;
}
.start h1 {
  color: white;
  font-size: 1.72rem;
  line-height: 36px;
}
.start p {
  color: white;
  color: white;
  font-weight: 500;
  margin-block-start: 22px;
  line-height: 26px;
  letter-spacing: 0.15px;
}

.end .promotion {
  color: white;
  display: block;
  text-decoration: none;
  background-color: var(--blue);
  padding: 1.15rem 3rem;
  border-radius: 10px;
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
}
#myForm {
  background-color: white;
  border-radius: 10px;
  margin-block: 1.5rem;
  padding: 1.5rem 1.5rem;
  -webkit-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
  -moz-box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.096);
}
#myForm input {
  border: 1px solid var(--grayish-blue);
  padding: 1rem;
  border-radius: 4px;
}
#myForm input::placeholder {
  font-weight: 600;
  font-size: 0.92rem;
}
#myForm input:not(#firstName) {
  margin-block-start: 1rem;
}
#myForm input#btnInput {
  padding-block-start: 1rem;
  padding-block-end: 0.6rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.2px;
  background-color: var(--green);
  color: white;
  border-bottom: 4px solid #30ba7f;
  border-radius: 8px;
  cursor: pointer;
}
#myForm footer p {
  margin-inline: auto;
  color: var(--grayish-blue);
  margin-block-start: 0.7rem;
  width: 92%;
  line-height: 1.2rem;
  font-size: 0.7rem;
  font-weight: 600;
}
#myForm footer p a {
  color: var(--red);
  text-decoration: none;
}

.error::placeholder {
  color: var(--red);
}

#myForm input.error {
  border: 1px solid var(--red);
  background-image: url(../images/icon-error.svg);
  background-repeat: no-repeat;
  background-position: right 1rem bottom 50%, left 0 top 0;
}

#myForm span {
  color: var(--red);
  font-style: italic;
  text-align: end;
  font-size: 0.54rem;
  margin-block-start: 0.5rem;
}

/* .attribution {
  position: fixed;
  transform: translate(-50%);
  bottom: 1vh;
  left: 50vw; 
}*/
#footer {
  display: flex;
  align-items: center;
  position: fixed;
  transform: translate(-50%, 0);
  background: var(--blue);
  color: white;
  padding: 1rem;
  border-radius: 2rem;
  bottom: 1.25rem;
  left: 50%;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 1px 5px 2px;
}
.attribution {
  font-size: 0.688rem;
  text-align: center;
  line-height: 1.125rem;
  min-width: 15.625rem;
}
.attribution a {
  color: whitesmoke;
}
footer button {
  cursor: pointer;
  margin-inline-start: 1rem;
  border-radius: 50%;
  border-style: none;
  border-color: white;
  background-color: transparent;
  height: 1rem;
  width: 1rem;
}
footer button svg {
  filter: white;
  width: 100%;
  height: 100%;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(240deg) brightness(112%) contrast(101%);
}