@import url("quicksand/stylesheet.css");
@import url("rainbowhobbies.css");
@import url("imagegallerystyle.css");
body {
    background-color: #1a1a1a;
	font-family:"quicksandregular";
	color: white;
align-items: center;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
position: absolute; 
   top: 100px; 
   left: 0; 
   width: 100%; 
}
h2 span { 
   color: white; 
   font: "quicksandbold"; 
	font-size: 200%;
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 5px; 
}

h2 span.spacer {
   padding:0px;
}
	
#page1 {
	height:650px;
	width:100%;
	background:black;
	padding-top:10px;
	}
	
#page2 {
	height:900px;
	width:100%;
	background:#4CAF50;
	padding-top:150px;
	}
	
#page3 {
	height:1400px;
	width:100%;
	background:#008CBA;
	padding-top:150px;
	}

#page4 {
	height:1000px;
	width:100%;
	background:#f44336;
	padding-top:150px;
	}

.button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button1 span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button1:hover span {
  padding-right: 25px;
}

.button1:hover span:after {
  opacity: 1;
  right: 0;
}

.button2 {background-color: #008CBA;
 border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;} /* Blue */
.button2 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button2 span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button2:hover span {
  padding-right: 25px;
}

.button2:hover span:after {
  opacity: 1;
  right: 0;
}

.button3 {
	background-color: #f44336;
 border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;} /* Red */ 
.button3 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button3 span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button3:hover span {
  padding-right: 25px;
}

.button3:hover span:after {
  opacity: 1;
  right: 0;
}

.buttontop {
    background-color: black; /* Green */
    border: none;
    color: white;
    padding: 10px 27px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.buttontop span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttontop span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttontop:hover span {
  padding-right: 25px;
}

.buttontop:hover span:after {
  opacity: 1;
  right: 0;
}


#section {
    width:700px;
    float:center;
    padding:10px;
}