h1 {
  font-size: 50px;
}
h2 { 
  border-bottom: 1px solid #b46727;
  margin:5px;
}
.nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index:10;
  top: 0;
  left: 0;
  background-color: rgb(180, 104, 44);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;   
}

.nav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
  z-index:10;
}

.nav a:hover {
  background-color: #f1f1f1;
  font-size: 30px;
  z-index:10;
  color: grey;
}

.nav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  z-index:10;
  font-weight: bold;
}

@media screen and (max-height: 450px) {
  .nav {padding-top: 15px;}
  .nav a {font-size: 18px;}
}
#varnish, #lineage {
  position: relative;
  display: inline-block;
  z-index: 2;
  padding-bottom: -5px !important;
}
.pain {
  color: #FA968D;
}
.coordinate {
  width: 30px;
  height: 30px;   
  z-index: 4;
  cursor: pointer;
  display: inline-block;
}
.coordinate:hover {
  filter: drop-shadow(4px 6px 4px rgb(247 249 175 / 0.7));
}
.timeline {
  width:100px;
  height:100px;
}
.shutter {
   width:20px;
   height:20px;
}
.observation {
  border-radius: 10px;
  position: absolute;
  background-color: white;
  font-size: 15px;
  font-weight: bold;
  font-family: "Helvetica Neue",Helvetica,sans-serif;
  color: #b46727;
  padding: 0px 10px 3px 10px;
  visibility: hidden;
  text-wrap: wrap;  
  max-width: 400px;
  top: 0px;
  z-index: 5;
}
.dimension {
  opacity: .4;
  stroke: white;
  stroke-width: 2px;
  visibility: hidden;
  z-index: 3;
}
.lineage {
	stroke: #7d2227;
	stroke-width: 20;
	fill:none;
	stroke-opacity:.4;
	filter: drop-shadow(3px 5px 2px #FA5B4E);
	z-index:5;
}
#masq {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
#masq-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
#masq-slider {
	position: absolute;
	top: 10px;
	right: 10%;
	display: flex;
	align-items: center;
	color: white;
}
#masq-slider-label {
	margin-right: 10px;
	font-weight: bold;	
	display: flex;
	align-items:center;
}
.masq-network {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}