#header{
    background-color:black;
    color: white;
    height: 100px;
}
#bookList{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    background-color:#f1f1f1;
}
li{
    list-style: none;
    font-size: 19px;
}
body{
    background-color: #a2a2a2;
}

#cover{
    color: transparent;
}
#synopsis{
    position:relative;
    float: left;
}
.chapterDropdown{
    max-height: 400px;
    overflow-y: auto;
}
.dropdownSelected{
    background-color:#1c975b !important;
}
.spinnerOverlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white;
    background: #666666;
    opacity: .8;
    z-index: 1000;
}
@media (min-width: 1200px){
.spinnerElement{
        width: 15rem !important;
        height: 15rem !important;
        top: 30%;
        left: 45%;
        position: absolute;
    }
}
@media (min-width: 768px){
    .spinnerElement{
            width: 10rem !important;
            height: 10rem !important;
            top: 30%;
            left: 45%;
            position: absolute;
    }
}
@media (max-width: 767px){
    .spinnerElement{
            width: 5rem !important;
            height: 5rem !important;
            top: 30%;
            left: 45%;
            position: absolute;
    }
}

@media (prefers-color-scheme: dark) {
    /* all your styles for dark mode here */
    body{
        background-color: #222 !important;
    }
    .jumbotron{
        background-color: #282828 !important;
        color: #fff;
    }
    .list-group-item {
        background-color: #282828 !important;
        color:#fff !important;
    }
    #bookList{
        background-color: #282828 !important;
    }
    #search{
        background-color: #282828 !important;
    }
    .modal-content{
        background-color: #282828 !important;
        color:#fff !important;
    }
    .close{
        color: #fff !important;
        text-shadow: 0 1px 0 #000 !important;
    }
}