@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;600;700&display=swap');

*, *::before, *::after {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

::selection {
  background-color: var(--blue);
}

:root {
  --gray: hsl(0, 0%, 59%);
  --blue: hsl(223, 87%, 63%);
  --pale-blue: hsl(223, 100%, 88%);
  --light-red: hsl(354, 100%, 66%);
  --very-dark-blue: hsl(209, 33%, 12%);
}

html {
  font-size: 62.5%;
  font-family: 'Libre Franklin', sans-serif;
}

body {
  padding: 1rem;
}

#main-content {
  width: fit-content;
  margin: 4rem auto 0 auto;
  animation: showContent 500ms forwards;
}

@keyframes showContent {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--very-dark-blue);
}

#first-paragraph{
  font-size: 4rem;
  text-align: center;
  color: var(--gray);
  margin-bottom: 1rem;
}

#first-paragraph > strong {
  color: var(--very-dark-blue);
}

#last-paragraph {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--very-dark-blue);
}

#form {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  text-align: center;
}

#form div {
  position: relative;
  flex-grow: 2;
}

#form div p {
  opacity: 0;
  position: absolute;
  left: 10px;
  bottom: -15px;
  font-size: 1.2rem;
  color: var(--light-red);
}

#form div p.active {
  animation: showErrorMsg 300ms forwards;
}

@keyframes showErrorMsg {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#email {
  width: 100%;
  flex-grow: 2;
  text-align: left;
  flex-basis: 20rem;
  border-radius: 2rem;
  padding: 1.1rem 2rem;
  border: 1px solid var(--pale-blue);
}

#email.error {
  border-color: var(--light-red);
}

#email::placeholder {
  color: var(--gray);
}

#email:focus {
  outline: none;
}

#submit {
  flex-grow: 1;
  padding: 1.1rem;
  cursor: pointer;
  flex-basis: 15rem;
  font-weight: bold;
  border-radius: 2rem;
  color: var(--pale-blue);
  border: 1px solid var(--blue);
  background-color: var(--blue);
  box-shadow: 0px 0px 10px 0px var(--gray);
}

#box-error, #box-success {
  margin: auto;
  font-size: 2rem;
  padding: 1rem 3rem;
  color: var(--very-dark-blue);
  border: 3px solid var(--pale-blue);
}

#box-error::backdrop, #box-success::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

#box-error[open], #box-success[open] {
  text-align: center;
  border-radius: 1rem;
  animation: showModal 500ms forwards;
}

@keyframes showModal {
  from {
    opacity: 0;
    transform: translate3d(0, -150px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#hero-img {
  width: 100%;
  margin-top: 7rem;
  max-width: 60rem;
}

#hero-img > img {
  width: 100%;
  text-align: center;
}

#icons {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 10rem;
  margin-bottom: 2rem;
}

#icons * {
  display: block;
  cursor: pointer;
  font-size: 2.5rem;
  color: var(--blue);
}

#copy {
  font-size: 1.2rem;
  text-align: center;
  color: var(--gray);
}