#halfFace1{
    z-index: 2;
    
 	color:#808080;
    position:relative;
    
    	    
}

#halfFace2{
	
    color:#FFA723;
    position: relative;
    
}

/* cuts the font in half by using the box size */
#halfOuter1{
    /* float: right; */
    
    overflow: hidden;
    position: relative;
    width: 50%;
}
/* moves the font 20px to the left */
#halfOuter2{
    /* float: right; */
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
       
}
/* gives absolute position a reference to a relative position */
#container{
    
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.smiley {
margin-left: 100px;
margin-top: 40px;
}