@font-face {
    font-family: AlmaMono-Regular;
    src: url(./fonts/AlmaMono-Regular.otf);
}

:root {
    --color1: #561C24;
    --color2: #6D2932;
    --color3: #C7B7A3;
    --color4: #E8D8C4;
}

* {
    margin: 0;
    color: var(--color4);
    font-family: AlmaMono-Regular;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--color3);
}

p {
    color: var(--color4);
    height: min-content;
}

div.nav {
    display: flex;
    background-color: var(--color1);
    justify-content: center;
    padding: 3cqh;
}

div.bookshelf {
    display: flex;
    flex-wrap: wrap;
}

div.book {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-flow: column;
    margin-top: 20px;
    margin-left: 20px;
    background-color: rgb(50, 50, 133);
    height: 300px;
    width: 200px;

    border-radius: 10px;
    border-left: solid 13px rgb(27, 27, 89);

    justify-content: space-between;

    box-shadow: 
                8px 7px 0px -4px,
                5px 5px 0px 4px rgb(27, 27, 89),
                5px 5px 7px 5px rgb(74, 74, 74);
}

#add-book {
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

p.book-title {
    text-align: center;
    font-size: 25px;
    font-weight: 500;
    margin: 10px;
}

p.book-author, p.book-pages {
    font-size: 14px;
    margin: 10px;
    align-self: start;

}

div.book:hover {
    background-color: rgb(62, 62, 160);
    border-left: solid 13px rgb(41, 41, 130);
    box-shadow: 
                8px 7px 0px -4px,
                5px 5px 0px 4px rgb(41, 41, 130),
                5px 5px 7px 7px rgb(74, 74, 74);
}

::backdrop {
  opacity: 0.75;
}

dialog {
    margin: auto auto;
    border-radius: 10px;
    color: var(--color1);
    background-color: var(--color2);
}

dialog p {
    font-size: 35px;
    font-weight: 600;
}

button {
    background-color: var(--color1);
    border-radius: 10px;
    border: solid 1px var(--color2);
    font-size: 15px;
    font-weight: 700;
    padding: 10px 25px;
}

form {
    display: flex;
    flex-flow: column;
}

div.buttons {
    margin: 20px 0px 0px 0px;
    align-self: flex-end;
}

input {
    background-color: var(--color4);
    color: var(--color1);
    margin: 5px;
    width: max-content;
}

dialog p {
    margin-bottom: 20px
}

div.input-style {
    display: flex;
    width: 280px;
    justify-content: space-between;
}

div.book-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

div.book-buttons svg {
    height: 50px;
    width: 50px;
    display: block; 
    background-color: rgb(128, 0, 0);
    border-radius: 10px;
    padding: 5px; 
    box-sizing: border-box; 
}

div.book-buttons svg:hover {
    background-color: rgb(194, 0, 0);
}

div.book-buttons svg.unread-button {
    background-color: rgb(0, 128, 0)
}

div.book-buttons svg.unread-button:hover {
    background-color: rgb(0, 194, 0)
}