/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
@import url('https://fonts.googleapis.com/css?family=Anton|Dancing+Script|Itim|Varela+Round');

@media screen and (max-width: 600px){
 
	 a{ transition: font-size 500ms; 
   			 font-size: 1.1em; }

	.menu {
          width: auto;
          margin-top: 0;
          background-color: rgba(232, 216, 46, 0.5);
          list-style: none;
          position: relative;
          left: 0px;
          top: 50px;
          padding: 10px 13px 10px 3px;
  }

	img {
		width: 100%;
}
	li {
		backround-color: rgb(238, 238, 2);
		padding: 20px;
}
}



* { box-sizing: border-box;
 }


body {
  background-color: white;
  font-family: "Varela Round", serif;
  font-size: 0px;
  color: #444;
}



h3 {
  font-family: "Anton", sans-serif;
  font-size: 32px;
  text-align: center;
}

p {
  	font-family: "Itim", sans-serif;
	text-indent: 3em;
	font-size: 20px;
}




.menu {
  margin: 10px auto; 
  overflow: hidden;
  display: table;
  font-size: 24px;
  text-align: center;

}

header{ 
  position: fixed;
}

ul{ 
  list-style: none;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}


li{ 
  display: inline-block; 
  padding-left: 80px;
  padding-right: 80px;
  background-color: #eee;
  text-align: center;
}

a{
  color: #444;
  text-decoration: none;
  font-family: Varela Round;
  font-size: 1.5em;
  text-align: center;
  line-height: 1.8em;
  transition: font-size 500ms; 
}





section {
  padding: 20px;
  margin-top: 5%;
}

img {
  padding: 20px; 
  margin-top: 12%;   
}

footer {
   min-height: 700px;
}





#definition{
  background-color: rgba(232, 216, 46, 0.8);
}


#causes{
  background-color: rgba(236, 244, 171, 0.7);
}


#consequences{
  background-color: rgba(232, 216, 46, 0.8);
}


#solutions{
  background-color: rgba(236, 244, 171, 0.7);
}