body{
    background-color: rgb(42, 42, 42);
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(graphics/dark_planks.png);
    background-repeat: repeat;
}






.filters-tab{
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 20rem;
    height: calc(100% - 4rem);
    background-color: rgb(51, 51, 51);

    background-image: url(graphics/red_planks.png);
    background-repeat: repeat;
    color: burlywood;
}

.filters-tab h2{
    text-align: center;
}

.filters-flex{
    margin-left: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 17rem;
    overflow-y: scroll;
    height: calc(100% - 8rem);
    background-color: rgba(0, 0, 0, 0.259);
    padding: 1rem;
}

.filters-flex hr{
    color: rgba(0, 0, 0, 0);
}

.filter{
    background-color: rgba(0, 0, 0, 0.221);
    margin: 0.2rem;
    padding: 1rem;
    width: 16rem;
    font-weight: bold;

    display: flex;
    flex-direction: row;

    color: burlywood;

    flex-direction: row;
    overflow-y: visible;
}


.filter:hover{
    filter: brightness(1.2);
    cursor: pointer;
}

/* checked / unchecked box sits at the right edge of the row */
.filter-mark{
    margin-left: auto;   /* eats the free space in the flex row, pushing the mark right */
    padding-left: 0.5rem; /* keeps long filter names from touching the mark */
    flex-shrink: 0;      /* the mark never gets squashed when a name wraps */
    align-self: center;  /* stays vertically centred if the name wraps onto two lines */
}



.filter-settings{
    position: fixed;
    top: 1rem;
    width: 20rem;
    height: 40rem;
    left: calc(100% - 24rem);
    padding: 1rem;
    background-image: url(graphics/red_planks.png);
    background-repeat: repeat;
    color: burlywood;
    font-weight: bold;
    
    display: flex;
    flex-direction: column;
}

.filter-settings h2{
        margin-bottom: 0.1rem;
    text-align: center;
}

.filter-settings-flex{
        display: flex;
    flex-direction: column;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.188);
    padding: 1rem;
}

.name-setting{
        font-family: 'Times New Roman', Times, serif;
        background-color: rgba(0, 0, 0, 0.221);
        color: burlywood;
        padding: 0.5rem;
}
.point-setting{
    background-color: white;
    padding: 1rem;
  color: rgb(114, 114, 114);
  margin: 0.5rem;
}

.point-name{
       background-color: rgba(0, 0, 0, 0.221);
    margin: 0.2rem;
    padding: 1rem;
    font-family: 'Times New Roman', Times, serif;
}

.point-media{
      background-color: rgba(0, 0, 0, 0.221);
    margin: 0.2rem;
    padding: 1rem;
           font-family: 'Times New Roman', Times, serif;
}

.add-point{
    background-color: white;
    padding: 0.1rem;
    width: 3rem;
    height: 3rem;
    text-align: center;
}

.add-point:hover{
    cursor: pointer;
}








.filter-feed{
    position: fixed;
    width: 20rem;
    height: calc(40% - 2rem);
    left: calc(50% - 10rem);
    top: calc(60%);
    background-color: rgb(51, 51, 51);
    color: rgb(189, 189, 189);

        background-image: url(graphics/red_planks.png);
    background-repeat: repeat;
    color: burlywood;
}

.filter-feed-flex{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 60%;
    background-color: rgba(0, 0, 0, 0.181);
    margin: 1rem;
}

.filter-feed h2{
    text-align: center;
}

.filter-feed-article{
      background-color: rgb(255, 255, 255);
      padding: 0.3rem;
      margin: 0.6rem;
      color: rgb(94, 92, 92);
}

.filter-feed-article h3{
    font-weight: bold;
        display: inline;
}

.filter-feed-article-date{
    display: inline;
    font-family: 'Times New Roman', Times, serif;
}

.filter-feed-article p{
    margin-top: 0.2rem;
    font-family: 'Times New Roman', Times, serif;
}

.filter-feed-article a{
        margin-top: 0.2rem;
     font-family: 'Times New Roman', Times, serif;
     color: rgb(24, 24, 227);
}





.map-container{
   position: fixed;
   top: 0;
   left: 0;
   z-index: -2;
   transform-origin: 0 0;
   cursor: grab;
   user-select: none;
   will-change: transform;
}

.map-container.dragging{
    cursor: grabbing;
}

.map-img{
    position: relative;
    top: 0;
    left: 0;
    -webkit-user-drag: none;
    user-drag: none;
}

.map-point{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;

    /* Cancel out the parent map's zoom so points stay the same on-screen size.
       --inv-scale (= 1 / map scale) is set by filter_map.js.
       The top-center of the point (the middle of its top edge) is the anchor:
       translateX(-50%) shifts it so left/top marks that spot, and scale() comes
       first in the list so the shift is applied before scaling, which keeps the
       anchor pinned to the same map position at every zoom level. */
    transform: scale(var(--inv-scale, 1)) translateX(-50%);
    transform-origin: 0 0;
}

.map-point a{
    background-image: url(graphics/red_planks.png);
    background-repeat: repeat;
    color: burlywood;
    width: 7rem;
    height: 2.5rem;
    text-align: center;
}

.map-point a:hover{
    filter: brightness(1.2);
}

/* Second point at the same location: pushed down below the first one.
   The padding lives inside the counter-scaled point, so the gap stays the
   same size on screen at every zoom level. The padded area ignores the mouse
   so it doesn't block clicks on the point above it. */
.map-point.stack-2{
    padding-top: 4rem;
    pointer-events: none;
}
.map-point.stack-2 > *{
    pointer-events: auto;
}

/* Third point at the same location: pushed below the second one. */
.map-point.stack-3{
    padding-top: 8rem;
    pointer-events: none;
}
.map-point.stack-3 > *{
    pointer-events: auto;
}






.dev-notes{
    display: block;
        position: fixed;
    height: 15rem;
    width: 15rem;
    top: calc(100% - 18rem);
    left: calc(100% - 18rem);
    color: grey;
    background-color: white;
    overflow-y: scroll;
    padding: 1rem;
    font-size: 0.7rem;
}

.dev-notes h2{
    margin-bottom: 0.1rem;
    text-align: center;
}
.dev-notes p{
    margin-top: 0;
    font-family: 'Times New Roman', Times, serif;
}