/*styles that are specific to the hero section*/

/*picture container (left)*/
.picture-frame-container{
  position:relative;
}
.picture-frame{
  width:200px;
  height:200px;
  background-image:url("../img/rmnp-pic.jpg");
}
.smiley-convo.icon-link{
  position:absolute;
  top:-50px;
  left:calc(100% - 50px);
  width:100px;
  height:100px;
  background-image:url("../img/speech-bubble-icon.png");
  padding:30px 0 44px;
}
@media (hover: hover) and (pointer: fine) {
  .smiley-convo:hover{
    top:-65px;
  }
}
.smiley-icon{
  background-image:url("../img/happy-text-icon.png");
  height:100%;
}

.say-hi-text.icon-link-tooltip{
  bottom:calc(100% - 35px);
  left:16px;
  transform:none;
}

/* text container (right) */
#hero h1 > *{
  display:block;
}
/*medium intro text*/
#hero h1 .rel-smaller-text{
	font-size:58px;
  line-height:100%;
}
/* actual name */
#hero h1 .p-name{
  margin-top:20px;
}


/*about container (right)*/
.about-me-container{
  margin-left:100px;
}
.about-me-description{
  margin-top:50px;
  max-width:500px;
}


/*responsive*/
@media only screen and (max-width: 865px){
  #hero .picture-container{
    display:none!important;
  }
  #hero h1 .rel-smaller-text{
    font-size:3rem;
  }
  .about-me-container{
    margin-left:0;
  }
}