.title1{
    color: #7a502b;
    font-weight: 550;
    font-size: 2.5em;
    margin-bottom: 20px;
    font-family: 'Merriweather', serif;
}

.title2{
  color: #7a502b;
  font-weight: 550;
  font-size: 1.3em;
  margin-bottom: 10px;
  font-family: 'Merriweather', serif;
}

.title3{
  color: #7a502b;
  font-weight: 595;
  font-size: 1.6em;
  margin-bottom: 10px;
  font-family: 'Merriweather', serif;
}

#myintro{
    font-size: 1.0em;
    margin-bottom: 30px;
}

.hero.is-link.is-fullheight-with-navbar{
  background-image: url(tree.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}

.notification.is-primary{
    background-color: #fff8fea1;
    color: #3d405b;
}

#name{
  color: #2f3f72;
  font-weight: 400;
}


.profile-picture{
    float: left;
    height: 440px;
    width: auto;
    margin-right: 100px;
    border-radius: 5%;
}

.footer{
    background-color: #eed8ec;
    color: #f4f1de;
    padding: 15px;
}

.container.is-max-desktop{
  overflow: auto;
  height: 450px;
}

.hide {
  display: none;
}

#folder-icon{
  height: 50px;
  width: 50px;
}

/* icons */
#flower-icon{
  height: 35px;
  width: 35px;
}

#flower-icon:hover + .hide{
  display: contents;
  color: #f288bd;
  box-shadow: 0 5px 20px #fff200;
  text-shadow: 0 5px 20px #e4e419;
}

#gmail-icon{
  height: 35px;
  width: 35px;
  margin-right: 20px;
}
#linkedin-icon{
  height: 35px;
  width: 35px;
  margin-right: 20px;
}
#resume-icon{
  height: 35px;
  width: 35px;
  margin-right: 20px;
}

@media only screen and (max-width: 400px){
  .popup .popuptext {
    display: none;
    position: absolute;
    top: 120px;
    left: 100px !important;
  }
  .popup1 .popuptext1 {
    display: none;
    position: absolute;
    top: 120px;
    left: 50px !important;
  }
  .popup2 .popuptext2 {
    display: none;
    position: absolute;
    top: 120px;
    left: 100px !important;
  }
}

/* The actual popup */
.popup .popuptext {
  display: none;
  position: absolute;
  top: 120px;
  left: 250px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* The actual popup */
.popup1 .popuptext1 {
  display: none;
  position: absolute;
  top: 120px;
  left: 250px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup1 .show1 {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* The actual popup */
.popup2 .popuptext2 {
  display: none;
  position: absolute;
  top: 120px;
  left: 250px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup2 .show2 {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* The actual popup */
.popup3 .popuptext3 {
  display: none;
 
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup3 .show3 {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* The actual popup */
.popup4 .popuptext4 {
  display: none;
 
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup4 .show4 {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* The actual popup */
.popup5 .popuptext5 {
  display: none;
 
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup5 .show5 {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}