<main>
  <section class="home">
  <form action="/artist-search-results">
    <input
      type="text"
      name="artistName"
      size="40"
      placeholder="Search your favorite artist …"
    />
    <div class="button-container">
      <button class="button form-button reset" type="reset">
        <span>×</span>

      </button>
      <button class="button form-button go" method="GET" type="submit">
        <span>»</span>
      </button>
    </div>
  </form>
</section>
</main>

@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap");

/* small reset */
*,
* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark: rgba(0, 0, 0, 1);
  --dark-08: rgba(0, 0, 0, 0.8);
  --dark-05: rgba(0, 0, 0, 0.5);
  --dark-02: rgba(0, 0, 0, 0.2);
  --light: rgba(245, 245, 245, 1);
  --light-08: rgba(245, 245, 245, 0.8);
  --light-05: rgba(245, 245, 245, 0.5);
  --light-02: rgba(245, 245, 245, 0.2);
  --contrast-1: rgba(255, 102, 17, 1);
  --contrast-1-08: rgba(255, 102, 17, 0.8);
  --contrast-1-05: rgba(255, 102, 17, 0.5);
  --contrast-1-02: rgba(255, 102, 17, 0.2);

  --contrast-2: rgba(1, 210, 80, 1);
  --contrast-2-08: rgba(1, 210, 80, 0.8);
  --contrast-2-05: rgba(1, 210, 80, 0.5);
  --contrast-2-02: rgba(1, 210, 80, 0.2);

  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-icons: "Fira Sans", sans-serif;
}

body {
  font-family: var(--font-family-sans);
  font-size: 16px;
  font-weight: 300;
  background-color: var(--dark);
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 500;
}

img {
  max-width: 100%;
  height: auto;
}
/* end of reset */

main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3em;
}

section {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}

.button {
  width: 1.2em;
  height: 1.2em;
  z-index: 1000;
  margin: auto;
  font-family: var(--font-family-icons);
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  color: var(--light-08);
  border-radius: 50%;
  border: none;
  background-color: var(--contrast-1-08);
  transition: all 0.2s ease-in-out;
}

.button:hover {
  color: var(--light);
  background-color: var(--contrast-1);
  transform: scale(1.2);
}

.button span {
  display: inline-block;
  position: relative;
  top: -2px;
}

.form-button {
  position: relative;
  margin-right: 0.25em;
}

.form-button.reset {
  color: var(--contrast-1-08);
  background-color: var(--light-08);
}

.form-button.reset:hover {
  color: var(--contrast-1);
  background-color: var(--light);
}

.home form {
  position: relative;
  display: flex;
  align-items: center;
}

.home input {
  text-align: center;
  font-size: 1.5em;
  color: var(--contrast-1);
  background: transparent;
  padding: 0.5em 0;
  border: none;
  border-bottom: 1px solid var(--contrast-1-05);
  transition: border-color 0.3s ease-in-out;
}

.home input:focus {
  outline: none;
  border-bottom: 1px solid var(--contrast-1);
}

.home form .button-container {
  display: inline-flex;
  position: absolute;
  right: -10em;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.home form:focus-within .button-container {
  display: inline-flex;
  right: -5em;
  opacity: 1;
}

.home input {
  font-family: var(--font-family-sans);
  font-weight: 300;
}

.home input::placeholder {
  font-family: var(--font-family-sans);
  font-weight: 300;
  color: var(--light-08);
}

@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
  }
}