@charset "UTF-8";

body{
	font-family: 'Roboto', san-serif;
	color: whitesmoke;
			font-size:2.6vw;
			background-size: cover;
			margin:0px;
			padding:0px;
    		width:100%;
			height:100%;
}
.title{
	font-size:3.6vw;
	font-weight: 400;
}

img{max-width: 1600px;}
.caption{
	font-size:40%;
}
#box{
	
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	
	
}
#insta{
	width:90vw;
	height:90vw;
}
#sbox{
	
	width:75vh;
	height:75vh;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index:0;
	
	
}
#textholder1{
	position: absolute;
	left:5%;
	bottom: 7%;
}
#textholder{
	position: absolute;
	left:5%;
	bottom: 15%;
}
#value1{
	font-size: 60%;
}
#menuicon{
	position: fixed;
	width:2.5vw;
	height:2.5vw;
	right:1vw;
	top:1vw;
	cursor: pointer;
	z-index:2;
}
#graph{
	width:75vh;
	height: 75vh;
}
#oldgraph{
	width:75vh;
	height: 75vh;
	border:0.5px solid black;
}
.sidenav{
height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 3; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color:hsla(145,100%,7%,1.00); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10vh; /* Place content 60px from the top */
  transition: 0.5s;
}
#xbut{
	width:2.5vw;
	height:2.vw;
	position: absolute;
	right:1vw;
	top:1vw;
	cursor: pointer;
}
.socialholder{
	font-size:60%;
	height:3.2vw;
	position: absolute;
	right:0.8vw;
	bottom:1vw;
}

.socialicon{
	height:100%;
	padding-left: 0.5vw;	
}

#planktolink{
	line-height: 2.5vh;
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	float: left;
	padding-right:0.6vw;
	color: whitesmoke;
	text-decoration: none;
}
#bplanktolink{
	line-height: 3.2vh;
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	float: left;
	padding-right:0.6vw;
	color: black;
	text-decoration: none;
}
#content{
	padding: 5vh 5vw;
	color: black;
	
}

a{
	font-size: 100%;
	text-decoration: underline;
	color:black;
}

a:visited{
	color:black;
}
a:hover{
	color:green;
	
}
/* The navigation menu links */
.sidenav a {
	font-family: 'Inconsolata', monospace;
	font-size: 5vh;
 	 padding: 0.5vh 1vw 1vh 8vw;
	  text-decoration: none;
	  color: #f5f5f5;
	  display: block;
	  transition: 0.3s;
}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color:hsla(69,100%,50%,1.00);
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#read{
		color: white;
		position: absolute;
		bottom: 10%;
		left:8%;
		}
		
#dateread{
			font-size:50%;
		color: white;
		}
#timelapse{
	width:100vw;
	height:100vh;
	background: green;
	
}

@media (orientation:portrait){
	body{font-size:2.8vh;}
	#menuicon{
		width:4vh;
		height: 4vh;
		top:1vh;
		right:1vh;
		
	}
	#xbut{width:4vh;
	height: 4vh;
	top:1vh;
		right:1vh;
	}
	.title{
	font-size:3.2vh;
	font-weight: 400;
}
	.socialholder{
		height: 3.2vh;
	}
	#sbox{
	width:75vw;
	height:75vw;
	position:absolute;
	top:40%;
	left:50%;
	transform: translate(-50%,-50%);
	}
	#graph{
	width:90vw;
	height: 90vw;
}
	#oldgraph{
		width:90vw;
	height: 90vw;
	}
	.sidenav a {
	font-family: 'Inconsolata', monospace;
	font-size: 5vh;
 	 padding: 0.8vh 1vw 0.8vh 8vw;
	  text-decoration: none;
	  color: #f5f5f5;
	  display: block;
	  transition: 0.3s;
}
	
}