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

* {
    margin: 0;
    padding: 0;
    font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
}

html,
body {
    height: 100%;
    position: relative;
}

/* Nav bar */
nav,
nav div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #384959;
}

nav {
    padding: 10px;
    color: white;
}

svg {
    width: 30px;
    
}

nav div {
    gap: 16px;
    font-size: 10px;
}

nav button,
#add-book,
#cancel {
    padding: 10px 20px;
    background-color: green;
    color: white;
    border: 0;
    font-weight: bold;
    font-size: 13px;
}

#cancel {
    background-color: red;
}

.remove {
    padding: 10px 20px;
    background-color: red;
    color: white;
    border: 0;
    font-weight: bold;
    font-size: 13px;
}

nav button:hover,
#add-book:hover,
#hasBeenReadBtn:hover {
    background-color: rgb(70, 131, 70);
    cursor: pointer;
}

#cancel:hover,
.remove:hover {
    background-color: rgb(255, 74, 74);
    cursor: pointer;
}

#hasBeenReadBtn {
    padding: 10px 20px;
    background-color: green;
    color: white;
    border: 0;
    font-weight: bold;
    font-size: 13px;
}



/* Dialog */
dialog {
    position: absolute;
    margin: auto;
    border: 0;
    border-radius: 10px;
    padding: 20px;

}

form p {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

form p:nth-child(4) {
    justify-content:flex-start;
    gap: 20px;
}



/* Books section */
.books {
    padding: 25px;
}

.no-books {
    text-align: center;
    font-size: 22px;
    font-style: italic;
    font-weight: lighter;
    margin-top: 50px;
}

.grid-container { 
    /* 
        confusing naming here instead of flex container is 
        due to its initial purpose as a grid container
    */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.card {
    height: 200px;
    width: 200px;
    box-shadow: 1px 2px 5px grey;
    border-radius: 20px;
    padding: 20px;
}