style.css

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  min-height: 100%;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Comic Neue', cursive;
}

/* navigation */
.header,
.footer {
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
  gap: 1rem;
}

.header-content_wrapper,
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 4px solid black;
  padding: 0 1.6rem;
}

.footer {
  margin: 2rem;
  align-items: flex-start;
}

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

.logo,
.footer-text {
  font-size: 2.75rem;
  margin: 1rem 0;
}

.menu-ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.75rem;
}

.list {
  font-size: 1.6rem;
  font-weight: 700;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.menu-ul .list .link.active {
  color: blue;
}

.uList .list {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1rem 1rem 1.6rem 1rem;
}

.desc,
.contact-list .list {
  font-size: 1.8rem;
  font-weight: normal;
}

.menu-ul .list:nth-child(2) {
  border-right-color: black;
  border-left-color: black;
  padding: 0 1.75rem;
}

.clock {
  font-size: 1.75rem;
  font-weight: bold;
  align-self: flex-end;
}

.main {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section {
  width: 98%;
  margin: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  height: 35vh;
}

.section.active {
  display: flex;
}

.section .heading {
  font-size: 3.75rem;
}

.books-view_section {
  padding: 0 0.6rem;
}

.uList {
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: flex-start;
  border: 4px solid black;
  max-height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.bookTitle,
.bookAuthor {
  font-size: 1.75rem;
}

.uList .list:nth-child(odd) {
  background-color: rgba(128, 128, 128, 0.6);
}

.inputs {
  width: 100%;
  height: 3.75rem;
}

.inputs:nth-child(3) {
  width: max-content;
  align-self: flex-end;
}

.remove-btn,
.inputs:nth-child(3) {
  padding: 0.4rem 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  border: 3px solid black;
  background-color: white;
  box-shadow: 5px 5px 3px 0 black;
}

.remove-btn {
  margin-left: auto;
}

.remove-btn:hover,
.inputs:nth-child(3):hover {
  cursor: pointer;
}

.remove-btn:active,
.inputs:nth-child(3):active {
  box-shadow: none;
  transform: translate(4px, 4px);
}

.input-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6rem;
  width: 50%;
  margin: auto;
}

.inputs:not(.inputs:nth-child(3)) {
  border: 3px solid black;
  padding: 0 1rem;
  font-size: 1.75rem;
  font-weight: bold;
}

.inputs:not(.inputs:nth-child(3))::placeholder {
  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
}

/* contact */
.contact_section {
  padding: 2rem;
}