/* Basic layout */

:root {
	--settings-height: 0vh;
}

* {
	margin: 0;
	padding: 0;
}

html {
	font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
}

body {
	background: #444;
	text-align: center;
}

button {
	color: #888;
	background: none;
	border: .3vh solid #888;
	border-radius: 1vh;
	outline: none;
	cursor: pointer;
}




/* Content */

.content {
	opacity: 0.3;
	transition: opacity .5s, fill .5s;
}

body.connected .content {
	opacity: 1;
}




/* Heart */

.content svg {
	position: absolute;
	top: 10vh;
	left: 10vw;
	width: 80vw;
	height: calc(100vh - var(--settings-height) - 40vh);
}
/* .content {
	position: absolute;
	top: 10vh;
	left: 10vw;
	width: 80vw;
	height: calc(100vh - var(--settings-height) - 20vh);
}

.content svg {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
} */




#heart {
	transform: scale(0.8);
	transform-origin: 50% 50%;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

body.connected #heart {
	animation-name: heartbeat;
	animation-iteration-count: infinite;
	fill: red;	
}



/* Heartbeat */

#heartbeat {
	color: #fff;
	font-size: 20vh;
	margin-top: 65vh;
	position: relative;
}




/* Graph */

#graph {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 50vh;
	z-index: -1;
}