#introPgBody {
	/*background-color: black;*/
	background-image: url( "assets/icons/woodAndFlowers.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
}

#intropgTitle {
	position: absolute;
	font-family: 'Berkshire Swash', cursive;
	font-size: 9vh;
	text-align: center;
	margin-top: 28vh;
	margin-left: 25vw;
	text-shadow: 0.5vw 0.5vh black;
}

#buttonToMainPg {
	/*position: absolute;*/
	width: 25vw;
	height: 5vh;
	/*margin-top: 70vh;
	margin-left: 34vw;*/
	font-size: 3vh;
}

#introBox {
	position: absolute;
	padding: 0.1vh;
	background-color: white;
	margin-left: 27vw;
	margin-top: 45vh;
	width: 40vw;
	height: 45vh;
	border-radius: 45px;
	color: black;
	text-align: center;
}

#introBox #instructionsTitle {
	font-family: 'Berkshire Swash', cursive;
	font-size: 4vh;
}

#introBox p {
	font-family: 'PT Sans Caption', sans-serif;
	font-size: 3vh;


}

body {
	background-color: white;
	padding: 2vw;
	color: white;
}


.backgd {
	width: 100vw;
}

#topHalfOfPage {
	position: absolute;
	top: 0vw;
	left: 0vw;
	background-image: url( "assets/icons/backgd2.png");
	background-repeat: no-repeat;
	width: 100vw;
	background-size:100%;
	height: 70vh;
}

#bottomHalfOfPage {
	margin-top: 70vh;
	height: 6vh;
	border: white;

}

h3 {
	font-family: 'Berkshire Swash', cursive;
	font-size: 5vh;
	text-shadow: 1vw 1vh #fd6e8e;
	text-align: center;
	position: absolute;
	top: 1vw;
	left: 37vw;
	color: black;
}

h3:hover
{
color: #fd6e8e;
text-shadow: 1vw 1vh black;
transition: all 0.3s ease-in 0.5s;

}
.whiteRectangle {
	background-attachment: fixed;
	position: absolute;
	top: 2vw;
	left:0vw;
	background-color: white;
	width: 100vw;
	height: 8vw;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

/*.whiteRectangle2 {
background-attachment: fixed;
position: absolute;
top: 48vw;
left:0vw;
background-color: white;
width: 150vw;
height: 10vw;
display: flex;
align-items: flex-end;
z-index: -1;
}*/

button {
background-color: #fd6e8e;
color: white;
text-shadow: 0.1vw 0.1vw black;
width:8vw;
height: 2.5vw;
margin: 0.2vw;
border-radius: 1vw;
font-family: 'Berkshire Swash', cursive;
font-size: 1.25vw;
transition: all 0.5s ease 0s;
}

button:hover {
	background-color: #fd6e8e;
	color: white;
	text-shadow: 0.1vw 0.1vw black;
}
.playClearButton {
	background-color: black;
	color: white;
	text-shadow: 0.1vw 0.1vw black;
/*background-color: black;
color: white;
text-shadow: 0.1vw 0.1vw #fd6e8e;*/
}
.playClearButton:hover {
	background-color: #fd6e8e;
	color: black;
	text-shadow: 0.1vw 0.1vw #fd6e8e;
	color: white;
	text-shadow: 0.1vw 0.1vw #fd6e8e;
}
.row1, .row2, .row3 {
	display: flex;
	margin: 0.05vw;
	justify-content: center;
}

.flexbox {
	/*position: absolute;
	top: 50vw;
	left: 24vw;*/
	display:flex;
	flex-direction: column;
}
.soundIconGrid {
	padding-top: 3vh;
	padding-bottom: 3vh;
	grid-column-gap: 1vw;
	display: grid;
	/*padding-top: 13vh;*/
	grid-template-columns: repeat(10, 7vw);
	grid-template-rows: repeat(4, 7vw);
	padding-left: 10vw;
	padding-right: 10vw;
	padding-bottom: 2vh;
}

/*.soundIcon {
	background-color: white;
	opacity: 0.3;
}*/

.staff {
	display: grid;
	grid-template-columns: 7.5vw 50vw;
	grid-template-rows: repeat(1, 7.5vw);
	margin-left: 24vw;
	/*padding-right: 10vw;*/
	width: 50vw;
	height: 10vh;
	border: 15px solid white;
	border-radius: 18px;
	background-image: url("assets/icons/staff.png");
	background-repeat: repeat-x;
	background-size: 50vw 100%;
}

#treble {
	margin-top: -2vh;
	margin-left: 1vw;
	height: 14vh;
}

.staff img {
	height: 12vh;
	margin-top: -2.5vh;
}

#notes {
	margin-left: -5vw;
}

#notes li {
	/*margin-left: -5vw;*/
	display: inline;
	list-style: none;
}

#infoBox{
	background-color: white;
	color: black;
	width: 20vw;
	height: 11vw;
	font-family:'PT Sans Caption', sans-serif;
	position: absolute;
	z-index: 3;
	top: 5vw;
	left: 2vw;
	border-radius: 1vw;
	display: none;
	text-align:center;
}

#infoButton {
	background-color: white;
	color: black;
	text-shadow: 0.1vw 0.1vw #fd6e8e;
	position: absolute;
	top: 2vw;
	left:2vw;
}

#infoButton:hover {
	background-color: #fd6e8e;
	color: white;
	text-shadow: 0.1vw 0.1vw black;
	position: absolute;
	top: 2vw;
	left:2vw;
}