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

body,
input,
button {
   font-family: "Open Sans", sans-serif;
}

input,
button {
   font-size: 16px;
}

.head_bar {
   padding: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: cornflowerblue;
   color: white;
}

main {
   display: flex;
   justify-content: space-around;
   padding: 5%;
   background: linear-gradient(135deg, #153677, #4e085f);
}

.input_section {
   display: flex;
   flex-direction: column;
   padding: 50px;
   border: 1px solid black;
   border-radius: 10px;
   background: #fff;
}

.input_section > h2 {
   text-align: center;
   color: cornflowerblue;
}

.input_section > form > .input {
   margin: 8px 0;
}

.input_section > form > button {
   background-color: cornflowerblue;
   color: white;
   border: 0;
   border-radius: 5px;
   display: block;
   width: 100%;
   padding: 8px;
   cursor: pointer;
}

.input_section > form > button > span {
   font-weight: bold;
}

.input_section > form > .input > input {
   display: block;
   width: 100%;
   padding: 8px;
   margin: 10px auto;
   border-radius: 5px;
}

.input_section > form > .input > label {
   color: cornflowerblue;
   font-weight: bold;
}

.input_section > form > .input_inline {
   margin: 12px 0;
   display: flex;
   align-items: center;
}

.input_section > form > .input_inline > label {
   color: cornflowerblue;
   font-weight: bold;
   margin-right: 10px;
}

.search_section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   border: 1px solid black;
   border-radius: 10px;
   background: #fff;
}

.search_section > h2 {
   color: cornflowerblue;
}

.search_section > form {
   padding: 16px;
   width: 100%;
   display: grid;
   grid-template-columns: auto 1fr 0.5fr;
   grid-gap: 10px;
}

.search_section > form > label {
   display: flex;
   align-items: center;
}

.search_section > form > input {
   padding: 5px;
   border-radius: 5px;
}

.search_section > form > button {
   background-color: cornflowerblue;
   color: white;
   border: 0;
   border-radius: 5px;
   cursor: pointer;
}

.book_shelf {
   margin: 16px 0 0 0;
   border: 1px solid black;
   padding: 20px;
   border-radius: 10px;
   background: #fff;
}

.book_shelf > h2 {
   color: cornflowerblue;
}

.book_shelf > .book_list {
   padding: 20px;
}

.book_shelf > .book_list > .book_item {
   padding: 8px 16px 16px 16px;
   border: 1px solid black;
   border-radius: 5px;
   margin: 10px 0;
}

.book_shelf > .book_list > .book_item > h3,
p {
   margin: 8px 0;
}

.book_shelf > .book_list > .book_item > .action > button {
   border: 0;
   padding: 5px;
   margin: 0 5px 0 0;
   border-radius: 5px;
   cursor: pointer;
}

.book_shelf > .book_list > .book_item > .action > .green {
   background-color: green;
   color: white;
}

.book_shelf > .book_list > .book_item > .action > .red {
   background-color: red;
   color: white;
}