@font-face {
    font-family: 'Pelagiad';
    src: url("../blob/font/Pelagiad.ttf") format('truetype');
}

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

main {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    background-color: #222222;
    color: rgb(223, 201, 159);
    font-family: sans-serif;
}

.nwah-entry-marker {
    width: 10px !important;
    height: 10px !important;
}

.nwah-entry-marker.mark {
    border: 5px solid black;
}

.nwah-player-marker {
    border-bottom: 20px solid;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    background: none !important;
}

.head {
    grid-row: 1;
    grid-column: 1;
    grid-column-end: 3;
}

.head > h2 {
    font-family: 'Pelagiad', sans-serif;
    margin: 0;
    padding: 0.3em;
    font-size: 3em;
    display: inline-block;
}

.player-list {
    padding: 0 1em 1em;
}

.player {
    background-color: #111111;
    border: 1px solid rgb(223, 201, 159);
    padding: 0.2em 1em;
    margin-bottom: 1em;
}

.player > .name {
    font-family: 'Pelagiad', sans-serif;
    font-size: 2em;
    padding: 0.1em;
    text-align: center;
}

.player > .name > .dot {
    display: inline-block;
    border-radius: 100%;
    width: 0.3em;
    height: 0.3em;
    margin-right: 0.3em;
    vertical-align: middle;
}

.player > .name > .level {
    font-size: 0.5em;
    vertical-align: bottom;
}

.map {
    grid-row: 2;
    grid-column: 2;
}

.overlay {
    position: absolute;
    grid-row: 2;
    grid-column: 1;
}

.leaflet-fade-anim .leaflet-tile, .leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: auto !important;
}

.leaflet-container {
    background: transparent;
}

.player .location {
    text-align: center;
    font-size: 0.7em;
    min-height: 2.2em;
}

.player .location > * {
    vertical-align: middle;
}

.bar {
    margin: 0.7em 0;
    position: relative;
    border: 1px solid rgb(223, 201, 159);
}

.bar .inner-bar {
    overflow: visible;
    height: 1.4em;
}

.bar .inner-text {
    display: block;
    width: 100%;
    position: absolute;
    padding: 0.2em;
    text-align: center;
}

.bar.health .inner-bar {
    background-color: darkred;
}

.bar.magicka .inner-bar {
    background-color: darkblue;
}

.bar.fatigue .inner-bar {
    background-color: darkgreen;
}