@charset "UTF-8";
/* CSS Document */

main p {
	line-height: 1.5em;
}
main ul {
	line-height: 1.5em;
}
.start {
	background-image: url("../images/piano-small.jpg");
	color: #3942AD;
	margin: 0 0 4% 0;
	background-size: auto;
	padding: 2%;
}
.start p {
	font-weight: bold;
}
button{
	background-color: #AC45AD;
	font-family: "Quasimoda", sans-serif;
	font-weight: bold;
	padding: 2%;
	margin: 2% 0;
}
main a {
	font-size: 1em;
	text-decoration: none;
	color: #001626;
}
h1 {
	font-family: "Relation One", cursive;
	font-size: 1.65em;
	line-height: 1.35em;
	font-weight: bold;
}
h2, h3, h4, h5, h6 {
	font-size: 1.5em;
	font-weight: bold;
	margin: 4% 0 2% 0;
}
[class*="ser-"]{
	padding: 2%;
}
[class*="sec-"]{
	padding: 2%;
}

.ser-1 {
	background-color: #b3b7e6;
}
.ser-2 {
	background-color: #abede7;
}
.ser-3 {
	background-color: #e1b6e2;
}
.sec-local {
	background-color: #b3b7e6;
}
.sec-price {
	background-color: #abede7;
}
.sec-sched {
	background-color: #e1b6e2;
}

@media (min-width: 500px) and (max-width: 800px){
	main p {
		line-height: 1.725em;
		font-size: 1.15em;
		max-width: 600px;
	}
	main ul {
		line-height: 1.725em;
		font-size: 1.15em;
		max-width: 600px;
	}
	main a {
		font-size: 1.15em;
	}
	h1 {
		font-size: 2em;
	}
	h2, h3, h4, h5, h6 {
		font-size: 1.75em;
		font-weight: bold;
		margin: 4% 0 2% 0;
	}
}
@media (min-width: 801px) and (max-width: 1000px){
	main p {
		line-height: 1.875em;
		font-size: 1.25em;
		max-width: 800px;
	}
	main ul {
		line-height: 1.875em;
		font-size: 1.25em;
		max-width: 800px;
	}
	main a {
		font-size: 1.25em;
	}
	h1 {
		font-size: 2.25em;
	}
	h2, h3, h4, h5, h6 {
		font-size: 2em;
		font-weight: bold;
		margin: 4% 0 2% 0;
	}
}
@media (min-width: 1001px) and (max-width: 1300px){
	[class*="row-"]{
		display: flex;
	}
	[class*="ser-"] {
		width: 50%;
	}
	[class*="sec-"] {
		width: 50%;
	}
	main p {
		line-height: 1.875em;
		font-size: 1.25em;
		max-width: 800px;
	}
	main ul {
		line-height: 1.875em;
		font-size: 1.25em;
		max-width: 800px;
	}
	main a {
		font-size: 1.25em;
	}
	h1 {
		font-size: 2.5em;
	}
	h2, h3, h4, h5, h6 {
		font-size: 2em;
		font-weight: bold;
		margin: 4% 0 2% 0;
	}
}
@media (min-width: 1301px) {
	.start {
		background-size: cover;
	}
	[class*="row-"]{
		display: flex;
	}
	[class*="ser-"] {
		width: 50%;
	}
	[class*="sec-"] {
		width: 50%;
	}
	main p {
		line-height: 2.25em;
		font-size: 1.5em;
		max-width: 800px;
	}
	main ul {
		line-height: 2.25em;
		font-size: 1.5em;
		max-width: 800px;
	}
	main a {
		font-size: 1.5em;
	}
	h1 {
		font-size: 3em;
	}
	h2, h3, h4, h5, h6 {
		font-size: 2.5em;
		font-weight: bold;
		margin: 4% 0 2% 0;
	}
}