body {
  background-color: #eeeeee;
  color: #000;
  font-family: sans-serif;
  grid-template-columns: minmax(auto,62.5rem);
  margin: unset;
  display: grid;
  gap: 50px;
  justify-content: center;
  /* header height determines scroll margin as well, so we use a var */
  --header-height: 4.5rem;
}

input {
  padding: 5px;
  min-width: 17.1875rem;
}

h1 {
  margin: unset;
}

h2 {
  margin: unset;
  margin-block-end: 5px;
}

header {
  background-color: inherit;
  z-index: 1;
  position: sticky;
  top: 0;
  display: grid;
  height: var(--header-height);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: end;
  align-items: center;
  padding: 5px 20px;
}

header nav {
  text-align: center;
  display: grid;
  grid-auto-columns: 1fr;
  gap: 5px;
  grid-auto-flow: column;
}

:target {
  scroll-margin-block-start: var(--header-height); 
}

nav {
  display: flex;
  justify-content: center;
}

form {
  display: grid;
  gap: 15px;
  place-items: center;
}

form input[type="submit"] {
  font-weight: bold;
  min-height: 2rem;
}

footer {
  display: grid;
  background-color: #dddddd;
  justify-items: end;
  gap: 5px;
  padding: 20px;
}

footer a {
  font-weight: bold;
  min-height: unset;
}

footer nav {
  display: flex;
  gap: 20px;
}

p {
  margin: unset;
}

a {
  display: block;
  color: inherit;
  text-decoration: none;
}

button, input[type="submit"] {
  background-color: #f1c40f;
  border: unset;
  padding: 0 20px;
  min-height: 40px;
  text-transform: uppercase;
  transition: background-color 1s;
  border-radius: 2px;
}

button:hover, input[type="submit"]:hover {
  background-color: orange;
}

figcaption {
  background-color: #dddddd;
  padding: 15px;
  justify-self: stretch;
  font-weight: bold;
}

figure {
  margin: unset;
  text-align: center;
  display: grid;
  place-items: center;
  border: solid 1px currentColor;
  padding-block-end: 15px;
}

video {
  max-width: 100%;
  margin: auto;
}

main {
  display: grid;
  gap: 10px;
  place-content: center;
  grid-auto-flow: column;
  grid-auto-columns: minmax(auto,19.5rem);
}

main dl {
  display: grid;
  gap: 10px;
}

dd {
  margin: unset;
}

#features dt {
  align-self: end;
}

#features {
  --icon-margin: 12rem;
  display: grid;
  margin-inline-start: var(--icon-margin);
  grid-auto-rows: 3.59375rem;
  padding: 0 10px;
}

#features dt::before {
  font-size: 3rem;
  position: absolute;
    margin-inline-start: calc(-1 * var(--icon-margin) / 4 * 2.4);
  
}

#features dt:first-of-type::before {
  content: '🤘';
}

#features dt:nth-of-type(2)::before {
  content: '👍';
}

#features dt:last-of-type::before {
  content: '🤙';
}

dt {
  font-weight: bold;
  font-size: 1.5em; 
}

main dt {
  margin: 14px;
}

video {
  max-width: auto;
}

@media (max-width: 40rem) {
  header {
    grid-auto-flow: unset;
  }

  form {
    text-align: center;
  }

  main {
    grid-auto-flow: unset;
  }

  #features dt:is(:first-of-type, :last-of-type, :nth-of-type(2))::before {
    content: unset;
  }

  #features {
    margin-inline-start: unset;
  }
}