body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #21002a;
    color: #eee;
}

.page-top {
    margin: 0;
    position: sticky;
    top:0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.page-top>h1 {
    color: #a89ec9;
    margin: 0 0 0 2em;
    justify-self: flex-start;
}

.new-book-btn {
    color: #21002a;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.711);
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid grey;
    border-radius: .3rem;
    cursor: pointer;
    margin: 0.5em 2em 0.5em 0.5em;
}

dialog {
    /* position: fixed;
    top: 35px; */
    min-width: 400px;
    background-color: #a89ec9c1;
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

form {
    border: 1px solid #484554;
    max-width: 45em;
}

form h2 {
    text-align: center;
    color: #2A2547;
    margin: 0.6rem;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem 0.3rem;
}
  
.form-row label {
    flex: 0 0 100px;
    text-align: left;
    color: #2A2547;
    padding-right: 0.5rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.input-field {
    flex: 1;
    margin-left: 0.5rem;
    max-width: 30em;
}

input[type="text"] {
    padding: 0.5em 0.7em;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #FBF8FF;
    border-radius: 4px;
    font-size: 1em;
    background-color: #e6d7f0b0;
    color: #000;
}
input[type="text"].unfilled {
    border-color: #df1010d0;
    box-shadow: 0px 0px 1px 1px rgba(250, 250, 250, 0.2);
}
input[type="text"]:focus {
    border-color: #F5ECFF;    
    background-color: #d8ceff99;
    outline: none;
}
input[type="text"].filled {
    border-color: #fff;
}

.buttons-row {
    margin: 0.5rem 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.close-btn,
.cancel-btn {
    color: white;
    background-color: #484554ca;
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid #FBF8FF;
    border-radius: .3rem;
    cursor: pointer;
    margin: 0.5em;
}
.submit-btn,
.save-btn {
    appearance: none;
    color: white;
    background-color: #484554ca;
    font-size: 1rem;
    padding: 0.5em;
    border: 1px solid #FBF8FF;
    border-radius: .3rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.submit-btn:hover,
.close-btn:hover,
.save-btn:hover,
.cancel-btn:hover {
    background-color: #ada9bbb8;
    color: #282c34;
}
.new-book-btn:hover {
    background-color: rgb(211, 211, 211, 0.6);
}
.new-book-btn:active,
.submit-btn:active,
.close-btn:active,
.edit-book:active,
.save-btn:active,
.cancel-btn:active,
.buttons>button:active {
    transform: translate(1px, -1px) scale(.9);
}

.books-container {
    display: grid;
    grid-auto-flow: row;
    gap: 2em 2em;
    grid-template-columns: repeat(4, 1fr);
}

.book-card {
    display: flex;
    position: relative;
    user-select:none;
    max-width: 300px;
    margin: 1rem auto;
    border: 1px solid #ffffff22;
    background-color: #282c34;
    background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: 0.7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: 0.5s all;
    ::before{
        position: fixed;
        content: "";
        box-shadow: 0 0 100px 40px #ffffff08;
        top: -10%;
        left: -100%;
        transform: rotate(-45deg);
        height: 60rem;
        transition: 0.7s all;
        }
        &:hover{
        border: 1px solid #ffffff44;
        box-shadow: 0 7px 50px 10px #000000aa;
        transform: scale(1.01);
        filter: brightness(1.3);
        ::before{
            filter: brightness(.5);
            top: -100%;
            left: 200%;
        }
    }
}
.main {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
}

h2 {
    margin-bottom: 0;
}

.tokenImage {
    border-radius: .5rem;
    max-width: 100%;
    height: 250px;
    object-fit: cover;
}
.author {
    margin: .5rem 0;
    color: #a89ec9;
}
.details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.read {
    padding-right: 1em;
}
.edit-book {
    color: white;
    background-color: transparent;
    font-size: 1rem;
    border: none;
    border-radius: .3rem;
    cursor: pointer;
}
.edit-book:hover
{
    background-color: rgb(211, 211, 211, 0.6);
}
.end-card {
    position: absolute;
    bottom: 0.5em;
    left: 0.2em;
    right: 0.2em;
    padding: 1rem;
}
hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid #88888855;
    margin-top: 0;
}
.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}
.buttons>button{
    color: white;
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid grey;
    border-radius: .3rem;
    cursor: pointer;
}
.buttons>button:hover{
    background-color: rgb(211, 211, 211, 0.6);
}
.toggle-read{
    background-color: transparent;
}
.remove-book{
    background-color: transparent;
}

@media only screen and (min-width: 900px) and (max-width: 1199px) {
    .book-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 650px) and (max-width: 899px) {
    .book-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 340px) and (max-width: 649px) {
    .book-cards {
        grid-template-columns: repeat(1, 1fr);
    }
}