.about
{
	--maincolor: blue;
}
.pictures
{
	--maincolor: red;
}
.music
{
	--maincolor: yellow;
}
.elsewhere
{
	--maincolor: green;
}
.guestbook
{
	--maincolor: brown;
}
body
{
	padding: 0;
	margin: 0;
} /* Hide scrollbar for Chrome, Safari and Opera */
.myDiv::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.myDiv {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
*
{
	padding-top: 0px;
	margin-top: 0px;
}
nav
{
	border-right: solid black;
	float: left;
	padding-right: 10px;
	height: 100%;
	padding-top: 0px;
	margin: 0px;
	background-image: repeating-linear-gradient(45deg, lightgrey 1px, darkgrey 2px, lightgrey 3px)
}
nav > ol, ul
{
	padding-left: 0;
	margin-top: 20%;
}
nav > * > li
{
	color: black;
	width: 100%;
	font-family: arial, sans-serif;
	font-weight: bold;
	padding: 3%;
	margin: 3%;
	background-image: linear-gradient(90, white, black);
	list-style: none;
	text-transform: uppercase;
	border-bottom: 3px black solid;
	border-left: 1px grey solid;
	border-top: 2px grey solid;
	border-right: 10px var(--maincolor) solid;
	border-radius: 12px 10px 10px 3px / 8px 13px 13px 3px;
	background-image: linear-gradient(180deg, white, lightgrey);
}
nav > * > li:hover
							 {
								 position: relative;
								 left: 5px;
								 top: 1px;
							 }
.myDiv
{
	text-align: center;
	width: 50%;
	height: 50%;
	margin-top: 20vh;
	margin-right: 20vw;
	background-color: darkgrey;
	border: black solid 2px;
	border-radius: 100px;
	float: right;
}

/* mobile stuff */
@media (max-width: 1000px)
{
	.myDiv
	{
		width: 90%;
		height: 90%;
		margin:5%;
	}
	p
	{
		font-size: 4vw;
	}
	#navlabel
	{
		display: block;
		height: 5vw;
		background-image: linear-gradient(darkgrey 1vw, grey 2vw, black 5vw);
		border-bottom: solid black 1px;
		margin-bottom: 2vw;
	}
	#nav
	{
		display: none;
		height: 100%
		position: fixed;
		width: 100%;
		padding-right: 0px;
		border-width: 0px;
		background-color: inherit;
	}
	#nav > ol, ul
	{
		width: 100%;
		margin: 0px;

	}
	#nav > ol, ul > li
	{
		display: flex;
		border-width: .5vw 8vw 1vw 1vw;
		border-radius: 1vw 10vw 10vw 2vw;
		width:80%;
		height:10vw;
    margin: 10px;
		font-size: 10vw;
		vertical-align: middle;
	}
	#navcollapse:checked + #nav
	{
		display: block;
	}
}