.mainPage {
  border-radius: 18px;
  background: orange;
  padding: 5px; 
  width: 100px;
  text-align: center;
  color: white;
}
.mainPage:hover {
  border-radius: 18px;
  background: white;
  padding: 5px; 
  width: 100px;
  text-align: center;
  color: orange;
}

#sectionTwo {
 margin-left:0;
  margin-right:0;
}
body {
	font-family: 'Antic Slab', serif;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #FE8F59);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.font {
  font-style:italic;
}
#section2 {
  
}
.background2 {
  
}
#step2{
  text-align:center;
}
#section1 {
  
}
#step1 {
  text-align:center;
}
  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

#sub-header {
  color: #FFF;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: -2px 0px 2px #c78271;
}


.title {
  text-align: center;
  color:#FFF;
  text-decoration-style:solid; 
}
html,body {
    font-family: sans-serif;
}
.background {
  
  background-image: url("https://cdn2.vectorstock.com/i/1000x1000/10/61/abstract-colorful-music-note-vector-4581061.jpg");
  height: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
code {
  border-radius: 0.25em;
  border: 1pm solid silver 
}

button {
  background-color:lightblue; 
    border-radius:5px;
}
  
.piece {
  border:  2px solid #FCF5EF;
  border-bottom-width: thick;
   
}

#face {
  font-size: 5em;
  border: 1px solid grey;
  padding: 1em;
  border-radius: 0.25em;
  user-select: none;
}