@charset 'UTF-8';

* {
  margin: 0;
  padding: 0;

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

  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  width: 100vw;

  color: #0a0f1a;

  background-color: #0a0f1a;
}

main {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;

  width: 80%;

  padding: 3.2rem;

  background-color: #e6e9f0;

  border-radius: 24px;

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  p {
    font-size: 1.6rem;
  }

  a {
    text-decoration: none;
  }

  #finder-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;

    width: 100%;

    form {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;

      width: 100%;
      max-width: 64rem;

      div {
        display: flex;
        gap: 1.6rem;

        input,
        select {
          height: 4.8rem;
          width: 100%;

          padding: 0.8rem;

          font-size: 1.6rem;

          border: 0;
          border-radius: 1rem;
        }

        input:focus,
        select:focus {
          border: 1px solid #0a0f1a;
        }

        input::placeholder {
          color: #0a0f1a;
          filter: opacity(70%);
        }

        select {
          cursor: pointer;
        }
      }

      button {
        height: 4.8rem;
        width: 100%;

        color: #e6e9f0;

        background-color: #0a0f1a;

        font-size: 1.6rem;
        font-weight: 500;

        border: 0;
        border-radius: 1rem;

        cursor: pointer;
      }

      button:hover {
        background-color: #05070c;
      }
    }
  }

  #finder-table {
    display: block;

    height: 100%;
    max-height: 40rem;

    padding-right: 0.4rem;

    overflow: auto;

    .book-info {
      display: flex;
      align-items: center;
      gap: 1.6rem;

      width: 100%;

      margin-bottom: 0.8rem;
      padding: 0.8rem 1.6rem;

      color: #e6e9f0;
      background-color: #0a0f1a;

      border-radius: 1rem;

      cursor: pointer;

      .book-details {
        display: flex;
        justify-content: space-between;
        flex: 1;
      }

      .book-details > div:nth-of-type(2) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 0.8rem;
      }
    }

    .book-info:hover {
      background-color: #05070c;
    }

    img {
      height: 6.4rem;
      width: 6.4rem;
    }

    .alert-message {
      width: 100%;

      color: #0a0f1a;
      text-align: center;
      font-size: 1.2rem;

      filter: opacity(70%);
    }
  }

  #finder-table::-webkit-scrollbar {
    width: 0.8rem;
  }

  #finder-table::-webkit-scrollbar-track {
    background: #d2d5d8;
    border-radius: 1rem;
  }

  #finder-table::-webkit-scrollbar-thumb {
    background: #0a0f1a;
    border-radius: 1rem;
  }
}

@media screen and (max-width: 468px) {
  main {
    width: 90%;

    padding: 1.6rem;

    h1 {
      font-size: 2.4rem;
    }

    h2 {
      font-size: 1.6rem;
    }

    p {
      font-size: 1rem;
    }

    #finder-form {
      form {
        gap: 1.6rem;

        div {
          gap: 0.8rem;

          input,
          select {
            height: 3.2rem;

            font-size: 1.2rem;

            border-radius: 0.6rem;
          }
        }

        button {
          height: 3.2rem;

          font-size: 1.2rem;

          border-radius: 0.6rem;
        }
      }
    }

    #finder-table {
      img {
        height: 2.8rem;
        width: 2.8rem;
      }

      .book-info {
        .book-details > div:nth-of-type(2) {
          gap: 0.8rem;
        }
      }
    }
  }
}