@font-face {
	font-family: 'LibHandDisRegular';
}

html {
	--page-color-1: #50bdae;
	--page-color-2: #50bdae;
	font-family: 'LibHandDisRegular';
}

body {
	background-color: var(--page-color-1);
    background-position: center top;
    background-size: contain;
/*     border-bottom: 10px white; */
	overflow: hidden;
	margin: 0;
/*    margin-bottom: 10px;*/
	display: grid;
/*	grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;*/
	padding-right: 3%;
}

aside {
	grid-column: 2;
	grid-row: 1;
	z-index: 4;
	display: flex;
	flex-direction: column;
}

nav {
	align-self: flex-end;
    font-family: f25;
}
main {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

h1, h2 {
	margin-top: 2vh;
	color: var(--page-color-1);
	font-family: f25;
	text-shadow: 2px 0 0 black;
    text-align: right;
}

h1 {
	margin-top: 5vh;
    margin-bottom: 0;
	font-size: 200%;
}

h2 {
	font-size: 150%;
    margin-bottom: 4vh;
}

p {
    font-size: medium;
}

pp {
    font-size: medium;
    font-weight: normal;
    font-style: italic;
}

ppp {
    font-size: x-large;
}
    
#bubbles {
	width: 100vw;
	z-index: 3;
	position: center;
    top: 5px;
 /*   left: 1px;*/
	object-fit: contain;
	pointer-events: none;
	height: 100vh;
	/*! overflow: hidden; */
}

#map {
	width: 100%;
	height: 100vh;
	margin: auto;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}


/* marker */

.leaflet-marker-icon:hover {
	filter: drop-shadow(2px 2px 4px var(--page-color-1));
}
.leaflet-marker-icon {
	/*! width: 19px !important; */
	/*! height: 19px !important; */
	/*! transition: 0.2s ease-in-out; */
}

/* popup */

.leaflet-popup {
  font-size: medium;	
	pointer-events: none;
    position: absolute;
    top: 5vh;
}

.leaflet-popup-content-wrapper {
	background-color: var(--page-color-2);
	background-image: url(bb2.webp);
	background-size: fixed;
	font-family: f25;
	color: var(--page-color-1);
	text-align: center;
	box-shadow: none;
	z-index: 9;
	border: thin solid;
	background-repeat: no-repeat;
	background-blend-mode: hue;
    
}

.leaflet-popup-tip {
    background-color: transparent;
    color: none;
    border: none;
    box-shadow: none;
    background-image: none;
}

/* tooltip */

.leaflet-tooltip {
	background-color: transparent;
	border: none;
	box-shadow: none;
	font-weight: bold;
	font-family: f25;
	font-size: medium;
	color: var(--page-color-1);
	/*! text-shadow: 1px 0 0 var(--page-color-2); */
	/*text-decoration: underline solid var(--page-color-1);*/
}

.leaflet-tooltip:hover {
	text-shadow: underline solid var(--page-color-2);
}

.leaflet-tooltip-left::before {
	display: none;
	right: 0;
	margin-right: -12px;
	border-left-color: #000;
}

.event {
	font-weight: bold;
}