/*general styling*/
html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	overflow: auto;
}
h1 {
	font-family: Helvetica;
	padding: 0;
	margin: 0;
	font-size: 75px;
}
p {
	font-family: 'Courier New', monospace;
	font-size: 20px;
}
.light {
	color: white;
}
.dark {
	color: black;
}
.full-flex-container {
	width: 100%;
	height: 100%;
	display: flex;
}
.centered {
	margin: auto;
}
.subpage {
	padding-top: 5%;
	padding-left: 10%;
	padding-right: 10%;
}
table {
	width: 80%;
	border-spacing: 0 50px;
}
/* home page circles */
#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: white;
}
a {
	font-family: 'Courier New', monospace;
	font-size: 20px;
}

/* home page styling (name title page) */
#myCanvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	background: #ed553b;
}
#home-down {
	position: absolute;
	left: 50%;
	bottom: 30px;
}

/* home page about styling */
#about {
	background: #f6d55c;
}
#about a {
	color: #173f5f;
}

/* home page code styling*/
#code {
	background: #778899;
}
#code a {
	color: #f6d55c;
}

/* home page art styling*/
#art {
	background: #173f5f;
}
#art a {
color: #f6d55c;
}

/* art and code nav styling */
.nav {
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	background-color: white;
}
.nav a {
	color: black;
}
.nav-space {
	margin-top: 50px;
}
.left-link {
	position: fixed;
	top: 15px;
	left: 10px;
}
.right-link {
	position: fixed;
	top: 15px;
	right: 10px;
}

/* media queries */
@media screen and (min-width: 1400px) {
	.subpage {
		padding-top: 5%;
		padding-left: 20%;
		padding-right: 20%;
	}

	table {
		margin: auto;
	}

	.left-link {
		left: 20%;
	}
	.right-link {
		right: 20%;
	}
}

/* iphone 5, galaxy s5, moto g4 */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
		p, a {
			font-size: 15px;
		}
		h1 {
			font-size: 25px;
		}
}

/* iphone 6, 7, 8 and plus*/
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
		p, a {
			font-size: 20px;
		}
		h1 {
			font-size: 30px;
		}
}

/* iphone X, pixel 2, pixel 2XL */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
		p, a {
			font-size: 20px;
		}
		h1 {
			font-size: 35px;
		}
}