body {
    /* TODO make the background of the page black and the font colour white */
    background-color: "white";
    margin-left: 20px;
    margin-right: 20px;
}

body,
h1,
p {
    margin: 0;
    padding: 0;
}

.leaflet-container .leaflet-tile-pane img {
    filter: grayscale(1)opacity(0.7);
}

html,
body {
    height: 100%;
    margin: 0;
}

header {
    background-color: black;
    text-align: center;
    color: rgb(255, 255, 255);
    height: 100px;
    width: 100%;
    position: fixed;
}

.title {
    padding: 20px;
}

.verse {
    font-size: 2em;
    list-style-type: none;
    padding: 0px;
    font-weight: 100;
    color: #ffffff;
}

.wrapper {
    display: flex;
    /* Allows us to position things inside this div with more freedom, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more details*/
    flex-grow: 1;
    /* The div will now grow to fill the available space */
    /* TODO make sure the minimum height of the wrapper is such that it fills the remaining space */
    /* NB we are going to do this in a slightly hacky way */
    /* vh is the viewheight, you should use this VERY sparingly, this situation is ok because we're limiting what the user can do */
    /* we'll minus 150px as this is the height we have manually defined the header and footer to be combined (100px + 50px)*/
    /* If we changed the height of the header and footer we'd have to change this here too! */
    min-height: calc(100vh - 30px);
}

.left-column {
    flex: 0 0 35%;
    /* in tandem with other flex values in the parent div tells us how much space will be taken up by this column, in this situation 1/3*/
    background-color: #171616;
    color: black;
    display: flex;
    /* Position things vertically in the centre */
    align-items: center;
    /* Position things horizontally in the centre */
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.left-column-content {
    /* TODO make sure the maximum height of this container never exceeds the available space */
    /* This is again slightly janky and will have to be updated if we change the size of the header and footer */
    max-height: calc(100vh - 150px);
    /* TODO force the div to create a scrollbar instead of increasing its vertical height */
    overflow: auto;
}


/* TODO hide the scrollbar on the left-column-content*/

.left-column-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.right-column {
    /* in tandem with the flex:1 on left-column, means this will take up 2/3 of the available space*/
    background-color: #ffffff;
    color: white;
    overflow: auto;
}

footer {
    position: fixed;
    /*force the footer to not move regardless of what else is going on on the page*/
    bottom: 0;
    /* Make sure it stays at the bottom of the page */
    background-color: rgb(36, 33, 33);
    display: flex;
    /*need this to be a flex to work with justify-content/align-items*/
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
}

.arrow-button {
    font-size: 10px;
    padding: 2px 10px;
    margin: 0 10px;
    height: 25px;
}

svg {
    background-color: #171616;
    height: 100%;
}


/* TODO add css classes for active-verse and active-line */

.active-verse {
    font-weight: 900;
    color: #ffffff;
}

.active-line {
    color: rgb(171, 68, 68);
}

.filler-verse {
    height: 500px;
}

.colum {
    cursor: pointer;
}

.fallen {
    cursor: pointer;
}

.sandy {
    cursor: pointer;
}

.bar {
    cursor: pointer;
}

div.tooltip-donut {
    position: absolute;
    text-align: center;
    padding: .5rem;
    background: #FFFFFF;
    color: #313639;
    border: 1px solid #313639;
    border-radius: 8px;
    pointer-events: none;
    font-size: 1.3rem;
}