#page-wrap {
  margin: auto 0;
}

body {
  background-color: black;
}

h1 {
  font-size: 3em;
  color: white;
  text-align: center;
}

.header {
    margin-top: 10%;
}


.smileys {
  width: 50%;
  padding-top:5%;
  padding-left:25%;
  padding-bottom: 22%;
  /* width: 1000px; */
  /* height: 180px; */
  /* background:gold; */
}


.smileys div {
  background-image:url(smileys.png);
  background-color:black;
  background-size:500% 100%;
  width: 20%;
  padding-bottom: 22%;
  /* width: 200px; */
/*   height: 180px; */
  float: left;  

}

.smileys .angry { 
  background-position: 500% 0px;
}

.smileys .unhappy { 
  background-position:  400% 0px;
}

.smileys .neutral { 
  background-position:  300% 0px;
}

.smileys .happy { 
  background-position:  200% 0px;
}

.smileys .joyful { 
  background-position:  100% 0px;
}