@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

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

body, html{
	color: var(--dark-grey);
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--white);
}

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

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

#wrapper-inner{
	width: 300px;
	text-align: center;
}
#wrapper-outer{
	position: fixed;
	top:0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
  
a{
	color: var(--dark-grey);
	float:left;
	width: 100%;
	padding: 20px;
	border:solid 1px var(--dark-grey);
	margin: 10px 0;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	border-radius:3px;
}

a.noborder{
	width: calc(50% - 20px);
	margin: 10px;
	border: none;
}
  
a:hover{
	color: var(--dark-grey);
	background-color: var(--very-light-grey);
}