@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');

html {
      background-color: #1a1b26;
      align-items: center;
      color: #ebdbb2;
      --link-color: #d9d2b8;
      --link-hover-color: #f0e6c6;
      display: flex;
      font-family: 'Ubuntu Mono', monospace;
      font-size: clamp(18px, 2.15vw, 42px);
      height: 100%;
      justify-content: center;
      margin: 0;
      transition: background-color 400ms ease;
    }

    body {
      align-items: center;
      display: flex;
      gap: clamp(1.5rem, 3vw, 3rem);
      justify-content: center;
      margin: clamp(0.75rem, 1.4vw, 1.5rem);
      padding: clamp(0.75rem, 1.4vw, 1.5rem);
    }

    h1 {
      font-size: 2em;
      grid-column: 1 / -1;
      margin: 0 0 0.2em;
      text-align: center;
      color: inherit;
      transition: color 400ms ease;
    }

    a {
      color: var(--link-color);
      text-decoration: none;
      transition: color 400ms ease;
    }

    a:focus,
    a:hover {
      color: var(--link-hover-color);
    }

    nav {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      margin: 0;
      padding: 1em 0;
    }

    ul {
      list-style-type: none;
      margin: 0.35em 0;
      padding: 0;
      text-align: center;
      white-space: nowrap;
    }

    li:first-child {
      font-weight: bold;
      line-height: 2em;
      color: #ad8ee6;
    }

    img {
      border: 2px solid #ebdbb2;
      height: clamp(400px, 44vh, 700px);
      object-fit: cover;
      object-position: 50% 100%;
      width: clamp(160px, 10em, 320px);
    }

input {
  background-color: unset;
  font: 16px 'Ubuntu Mono', monospace;
  color: #ebdbb2;
  height: 100%;
  width: 100%;
  border-top-style: hidden;
  border-bottom-style: soild;
  border-left-style: hidden;
  border-right-style: hidden;
  border-bottom-color: #ff9e64;
  text-align: center;
  margin-top: 50px;
  outline: 0;
  padding-bottom: 0.5em;
}

@media (max-width: 700px) {
  img {
    width: clamp(140px, 36vw, 190px);
  }
}