/* colors */
:root {
    --white: #fff;
    --very-light-grey: #eeeeee;
    --light-grey: #999;
	 --medium-grey: #555;
    --dark-grey: #222;
    --black: #000;
	 --background: #242424;
}

body, html{
	color: var(--white);
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--background);
	font-size: 16px;
}
@media screen and (max-width: 768px) {
	body, html {
		 font-size: 20px;
	}
}

#p5 {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
}
#p5 canvas.shadow{
	box-shadow: rgba(0,0,0,.1) 0px 20px 30px;
}
#p5 canvas.shadow.dark{
	box-shadow: rgba(0,0,0,.2) 0px 20px 30px;
}

#info-left{
	color: var(--medium-grey);
	position: fixed;
	left: 20px;
	bottom: 20px;
}
#info-right{
	color: var(--medium-grey);
	position: fixed;
	right: 20px;
	bottom: 20px;
}

#info-right a{
	float: right;
	color: var(--medium-grey);
	text-decoration: none;
}
#info-right a:hover{
	text-decoration: underline;
}

#info-right ul{
	text-align: right;
	list-style: none;
}
#info-right ul li{
	margin:10px 0 10px
}

.control-btn{
	position: fixed;
	left:10px;
	top:10px;
}