* {
    --table-background-color: rgb(233, 233, 233);
    --button-color: rgb(201, 172, 117);
    --button-hover-color: rgb(158, 92, 0);
    --table-color:white;
}

table, th, td {
    border: 1px solid;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table th:nth-of-type(1){
    width:35%;
}

table th:nth-of-type(1){
    width:35%;
}

td {
    text-align: center;
}

th, td {
    padding: 2px;
}

/* center table and add background to it */
body{
    display:flex;
    justify-content: center;
    align-items: start;
    background: url("./images/books-4-1421569.jpg");
    background-size: cover;
    height:100vh;
    margin:0;
}

.table.section{
    background-color: var(--table-background-color);
    padding:10px;
    border-radius: 10px;
    flex: 1 0 400px;
    margin: 10vh;
    display:flex;
    flex-direction:column;
}

/* style table */
caption{
    font-size: 20px;
}

table tr{
    background-color: var(--table-color);
}

table tr.header{
    background-color: var(--button-color);
}

.table-with-x-buttons{
    display:grid;
    grid-template-rows: 46px 23px;
    grid-auto-rows: 23px;
    grid-template-columns: 1fr 30px;
}

/* style x and + buttons */
.remove{
    background-color: var(--button-color);
    border:0;
    aspect-ratio: 1/1;
    border-radius:100%;
    width: 20px;
    padding:0;
    grid-column: 2/3;
    justify-self: center;
    align-self:center;
    text-align: center;
}

.new.book.button{
    background-color: var(--button-color);
    border:0;
    align-self:end;
    margin: 10px;
    border-radius:15px;
    padding: 8px 12px;
}

.new.book.button:hover, .remove:hover{
    background-color: var(--button-hover-color);
}

/* style read buttons */
.read-button{
    background-color: var(--button-color);
    border:0;
    width: 35px;
    border-radius:2px;
}

.read-button:hover{
    background-color: var(--button-hover-color);
}

/* style form */
form{
    display:grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 20px;
    grid-auto-rows: 20px;
}

form h2{
    grid-column: 1/3;
}

div.buttons{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 10px;
}