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

*:focus,
button:hover,
input[type=checkbox]:focus,
input[type=checkbox]:hover {
    outline: 3px solid orange;
}

input:focus,
button:active,
div[class=book-card] {
    outline: none;
    box-shadow: 2px 8px 15px 0px rgba(0, 0, 0, 0.15);
}

input:hover:valid,
input:focus:valid {
    border: 3px solid #16a92f;
}

input:hover:invalid,
input:focus:invalid {
    border: 3px solid #a33721;
}

dialog::backdrop {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 75%);
}

body {
    margin: 1%;
    margin-inline-end: 3%;
    height: 100vh;
    background-color: lightblue;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.50fr 4fr;
    
    
    & #new-book-button {
        width: 8em;
        margin-block: 2em;
        border-radius: 1em;
        padding-block: 1em;
        font-size: 1.35em;
        background-color: whitesmoke;
        align-self: center;
        justify-self: center;
    }
    
    & #book-shelf {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(auto-fill, 10em);
        grid-template-rows: repeat(auto-fill, 15em);
        gap: 1em;
        
        
        & .book-card {
            display: grid;
            grid-template-rows: repeat(4, 1fr);
            padding: 1em;
            border-radius: 0.5em;
            border: 2px solid black;
            background-color: whitesmoke;
            
            
            & .title, .pages {
                font-weight: bold;
            }
            
            & .author {
                font-style: italic;
            }
            
            & .options {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                
                
                & .delete-section {
                    
                    
                    & .delete-button {
                        padding-block: .25em;
                        padding-inline: .5em;
                        font-weight: bold;
                        border-radius: .25em;
                        background-color: whitesmoke;
                    }
                }
            }
            
            & div {
                text-align: center;
                align-self: center;
            }
        }
    }
    
    & #dialog {
        width: 50%;
        padding: 3em;
        border-radius: 1em;
        align-self: center;
        justify-self: center;
        
        
        & #dialog-form {
            display: grid;
            row-gap: 2em;
            
            
            & .input-container {
                display: grid;
                
                
                & .label-header {
                    font-weight: bold;
                }
                
                & .label-input {
                    height: 2em;
                    font-size: .99em;
                    padding-inline: 1em;
                    border-radius: .25em;
                    background-color: #DFE6EE;
                }
            }
            
            & #button-container { 
                display: flex;
                justify-content: space-around;
                
                
                & #submit-button, #close-button {
                    width: 6em;
                    padding: .5em;
                    font-size: 1em;
                    font-weight: bold;
                    border-radius: .25em;
                    background-color: whitesmoke;
                }
            }
        }
    }
}