/*general*/

.spacer{
  
    height: 2em;
}
.push{
    height:20%;
}


/*activity section*/

#activity{

  position: fixed;
  top: 10%;
  right: 3%;
}


/*poem buttons*/
button{
	background-color:#602043;
	padding:.5%;

}

button:hover {
	background-color: #862D61;
}


/*circle highlight buttons*/


.btnText{
	text-align: center;
	color: #333;
	
}
ul{
margin:4%;
	text-align: center;
}

li{

    display:inline;
    margin:2%;
}

.round button {

	border-radius: 50%;
	width:35px;
	height: 35px;
}

.round button:hover {
 border: solid white 2px;
 text-decoration: none;

}

button#btn1:hover{

	background-color: #EDE145;
}


button#btn2:hover{

	background-color:  #2ECE63;
}
/*highlight colours*/
.yellow{
	background-color: #EDE145;
}

.green{
	background-color: #2ECE63;
}

/*prompts*/

#prompts, #prompts1, #prompts2{
	
	text-align: left;

}

ul#prompts, ul#prompts1, #prompts2 {
	
    background-color: #602043;
    color:white;
    padding: 4%;
}

/*prompts-index2*/

#backBtnImg{
	
	display:inline-block;
	width: 34px;
	height: 33px;
	cursor:pointer;
	background: url("../../images/backIcon1.png") no-repeat;
	}

#nextBtnImg{
	display:inline-block;
	width: 34px;
	height: 33px;
	cursor:pointer;
	background: url("../../images/nextIcon1.png") no-repeat;
	}


#statementsBackButton, #statementsNextButton{
font-weight: bold;
color:white;
}


#statementsBackButton{
	float: left;
	cursor:pointer;
}

#statementsNextButton{
	float:right;
	cursor:pointer;
}




/*media queries*/

@media only screen and (max-width: 1024px){

	.text {
		max-width:95%;
	}


  
}

@media only screen and (max-width: 768px){

#IntroTitle {
        font-size: 5em;
        margin-top: 2%;
    }
     

   

#subtitle{
	font-size: 1em;
  }


}


@media only screen and (max-width: 560px){

	#IntroTitle {
        font-size: 3.2em;
        margin-top: 2%;
    }
     

   

#subtitle{
	font-size: 1em;
  }

  
	.text {
		text-align: left;
	}

	

}