/*basicreset{{{*/
:root {
  --color1: rgb(2, 21, 38);
  --color2: rgb(3, 52, 110);
  --color2v: rgb(0, 48, 104);
  --color3: rgb(110, 172, 218);
  --color4: rgb(226, 226, 182);
  --color5: rgb(0, 128, 128);
  --color6: rgb(64, 224, 208);
  /* font-family: Helvetica; */
  font-family: Inter, sans-serif;
  color:white;
}

body {
  background-color: var(--color1);
  height: 100%;

  /* merge into one selector */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* merge into one selector */
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;

  /* maintain aspect-ratio */
  object-fit: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

/*}}}*/

body{
  display:grid;
  flex-flow:column;
  align-items: center;
  grid-template-columns: 1fr max(400px,60%) 1fr;
  gap:10px;
  padding:20px;
}

input[type="text"]{
  width:100%;
}
body>*{
  border-radius:10px;
}

.input-section{
  grid-column:2/3;
  padding:25px;
  background: var(--color2);
}

#input{
  display:flex;
  flex-flow:column;
}

#input>*{
  margin:5px 0;
}

.submit-button{
  align-self:flex-end;
  padding:0 20px;
  margin:10px 0 0;
}

.title{
  align-self:center;
  font-size:20px;
  font-weight:900;
}

.input-section>*{
  padding:5px;
}

.help{
  font-size: 14px;
  display:none;
  color:red;
}

.form-row input:invalid + .help {
  display: block;
}

h1{
  font-size:15px;
}

.booklist{
  grid-column:2/3;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}
.book{
  display:grid;
  justify-content: space-between;
  padding:20px;
  background-color: var(--color2);
  border-radius:10px;
}
.details{
  display: grid;
  grid-column:1/2;
}
.details{
  display: grid;
  grid-column:1/2;
}

.delete{
  grid-column:2/3;
}

.huge-title{
  grid-column:2/3;
  font-size:25px;
  font-weight:900;
}

button{
  height:30px;
  width:30px;
  background-color: var(--color2);
  border: var(--color2);
}

button:hover{
  background-color: var(--color3);
  border-radius:10px;
}