body {
	font-family:'Poppins', sans-serif;
}

h1 {
	font-size: 80px;
	color: #FFFFFF;
	margin-bottom: 10px;
	font-family:'Poppins', sans-serif;
	font-weight: bold;
}

h2 {
	color: #98C4E7;
	font-size: 40px;
	margin-bottom: 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
}

h3 {
	color: #112A59;
	font-size: 32px;
	margin-bottom: 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
}

.orange {
	color: peru;
}

.small-text {
	font-size: 14px;
}

.footer-text {
	font-size: 12px;
	font-style: italic;
}

.s5 p {
	color: #143c69;
}

#fp-nav ul li a span {
	background: #6A87BE;
}

#fp-nav ul li .fp-tooltip {
	color: #6A87BE;
}

img {
	width: 60%;
}

.legend-text {
	font-size: 14px;
}

.axis line,
.axis path {
  fill: none;
  stroke: #555;
  shape-rendering: crispEdges;
}

.tick text {
	font-family: sans-serif;
	font-size: 11px;
	fill: #555;
}

#priovis .x-axis text {
	font-weight: 600;
}

.area {
	fill: #825a5a;
}

.area.area-age {
	fill: #94a97a;
}

.bar {
	fill: #93bebf;
}

#dietFilter {
	max-width: 200px; /* Set a maximum width */
	margin: 0; /* Remove default margin */
	border-radius: 10px; /* Add border radius */
	background-color: #ffffff;
}

.diet-vis {
	height: 35vh; 
	width: 100%; 
}

.diet-tooltip {
	position: absolute;
	text-align: center;
	font: 12px sans-serif;
	color:white;
}

.diet-tooltip h3,h4 {
	text-align: left;
}

.diet-tooltip h4 {
	font: 14px sans-serif;
}

.diet-tooltip p {
	font: 9px;
}

.diet-axis path, .diet-axis line {
  fill: none;
  stroke: #134078; 
  shape-rendering: crispEdges; 
}

.diet-axis text {
  fill: #134078; 
	font-size: 1.3em;
}


#time-slider {
    width: 300px;
    margin: 20px auto; 
}

#migrationSlider {
    width: 400px; 
    margin: 20px auto; 
}

.range-slider-value {
    background-color: #3373b8; 
    color: #fff;
    border-radius: 5px; 
    padding: 5px 10px; 
    font-size: 16px; 
    display: inline-block;
    vertical-align: top;
    margin-top: -5px; 
}
  
.noUi-connect {
    background: rgb(169, 200, 233);
}


.health-tooltip {
    position: absolute;
    text-align: left;
    padding: 8px;
    font: 12px sans-serif;
    background: white;
    border: solid 1px #aaa;
    border-radius: 4px;
    pointer-events: none;
}


.table-style {
	overflow-y: scroll; 
	height: 60vh; 
	width: 70vh;
	border: thin solid grey; 
	border-radius: 5px; 
	text-align: left;
	margin-top: 40px;
}

th {
	color: #134078;
}

#subregionAnalysis {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;	
	color: #134078;
}


.overlay-box {
	background-color: rgba(255, 255, 255, 0.7); 
	border-radius: 15px; 
	padding: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  	width: 80%; 
	max-width: 800px;
	z-index: 100; 
}

/* responsiveness */
@media (max-width: 1200px) {
	.subregionTableColumn {
			width: 100%;
			margin-top: 20px; 
	}

	 .subregionMapColumn {
		width: 100%;
}

		.dietVis {
			width: 100%
		}
		#dietAnalysis {
			width: 100%; 
}

}


.bold {
	font-weight: bold;
}

.line-highlight {
	stroke-width: 3; 
	stroke: #112A59 !important; 
} 

.s1 {
	background-color: #112A59;
	position: relative;
}

.title {
	position: absolute;
	top: 15%; 
	left: 5%;
}

.snow-falling {
	width: 100%;
	height: 100%;
}

.bear {
	width: 30vh;
	height: 30vh;
	position: absolute;
    bottom: 12vh; 
    right: 12vh;
	z-index: 10;
}

.bear2 {
	width: 20vh;
	height: 20vh;
	position: absolute;
    bottom: 12vh; 
    right: 110vh;
	z-index: 10;
	transform: scaleX(-1);
}


.snow {
	position: absolute;
    bottom: 0; 
    left: 0;
	width: 100%;
	height: 25vh;
	z-index: 5;
}

.s2 {
	background-color: #FFFFFF;
	position: relative;
}

.ice {
	position: absolute;
    top: 0; 
	width: 100%;
}

.s3 {
	background-color: #F7FBFF;
}

.s4 {
	background-color: #F7FBFF;
	position: relative;
}

.stripe {
	position: absolute;
	bottom: 0; 
	width: 100%;
}	

.s5 {
	background-color: #F7FBFF;
}

.s6 {
	background-color: #112A59;
}

.polar-bear-on-ice {
	position: absolute;
	top: 50vh; 
	left: 60vh;
	width: 30%;
	z-index: 20;
}

.iceberg {
	position: absolute;
	top: 75vh; 
	left: 130vh;
	width: 25%;
	z-index: 20;
}

.iceberg-2 {
	position: absolute;
	top: 65vh; 
	left: 3vh;
	width: 20%;
	z-index: 20;
}

.background {
	position: absolute;
	bottom: 0; 
	width: 100%;
	z-index: 10; 
}

.s7 {
	background-color: #F7FBFF;
}

.s8 {
	background-color: #F7FBFF;
}

.s9 {
	background-color: #F7FBFF;
	position: relative;
}

.snow2 {
	position: absolute;
	bottom: 0; 
	width: 100%;
	z-index: 5;
}

.s10 {
	background-color: #FFFFFF;
}

.s11 {
	background-color: #F7FBFF;
	position: relative;
}

.iceberg {
	position: absolute;
	top: 70vh; 
	right: 20vh;
	width: 25%;
}

.blue-wave-top {
	position: absolute;
	bottom: 0; 
	width: 100%;
}

.s12 {
	background-color: #DEECF7;
	position: relative;
}

.blue-wave-bottom {
	position: absolute;
	top: 0; 
	width: 100%;
}

#migrationDiv {
	position: relative;
}

#bearInfoButton {
	background-color: #112A59;
	border: 1px solid #112A59;
	font-size: 14px;
}

#resetButton {
	background-color: #FFFFFF;
	border: 1px solid #112A59;
	color: #112A59;
	font-size: 14px;
}

.bear-info-active {
	border: 2px solid #112A59;
	border-radius: 10px;
	padding: 20px;
	font-size: 14px;
	height: 48vh;
}

.about-us {
	width: 50%;
	height: 50%;
	margin-top: 10vh;
	margin-bottom: 2vh;
}

.name {
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 0px;
}

.path, .year-text {
    opacity: 1; 
    transition: opacity 0.2s ease; 
}

.path.highlighted, .year-text.highlighted {
    opacity: 1 !important; 
}

.path.faded, .year-text.faded {
    opacity: 0.08; 
}