body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: var(--bg-gradient);
}

main {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 0.5rem;
}

.logo {
  @size: 4rem;

  display: flex;
  flex-direction: row;
  align-items: center;

  .logo-text {
    font-size: @size;
    font-weight: 400;
    font-family: "Ubuntu";
    text-transform: uppercase;
  }

  .logo-hex {
    font-size: @size;
    user-select: none;
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

form {
  .search-box {
    position: relative;

    // FIXME
    width: 100%;
    max-width: 50rem;
    box-sizing: border-box;
  }

  .search-clear {
    position: absolute;
    right: 0.2rem;

    input {
      background: transparent;
      color: var(--fg);
      font-size: 1.125rem;

      cursor: pointer;
      border: none;
      outline: none;

      &:hover {
        color: var(--accent);
      }
    }
  }

  @btn-padding: 0.625rem;
  @btn-font: 1.5rem;
  @height: @btn-font + @btn-padding * 2;
  @bdrs: @height * 0.25;

  .search input {
    padding: 0 0.5rem;
    box-sizing: border-box;
    height: @height;

    background: var(--bg-sec);
    color: var(--fg);
    font-size: 1.125rem;

    border: none;
    outline: none;
    border-top-left-radius: @bdrs;
    border-bottom-left-radius: @bdrs;
  }

  .search-submit input {
    padding: @btn-padding;

    background: var(--gradient);
    color: #fff;
    font-size: @btn-font;

    cursor: pointer;
    border: none;
    outline: none;
    border-top-right-radius: @bdrs;
    border-bottom-right-radius: @bdrs;
  }
}