#homeText {
  font-size: 54px;
  position: absolute;
  top: 25px;
  width: 400px;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
  text-align: center;                       
  -webkit-transform: translate(-50%, 0);                         
          transform: translate(-50%, 0);
  color: grey;
  /*border-radius: 25px;
  background-color: rgba(255,255,255,0.3);
  border-style: solid;
  border-width: 2px;
  border-color: #f8db49;*/
}

#aboutMeText {
  font-size: 18px;
  position: absolute;
  top: -188px;
  left: -70px;
  width: 420px;
  height: auto;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
  color: grey;
  text-align: justify;-webkit-font-smoothing: subpixel-antialiased;
}

.cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  /*background-image: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);*/
  /*background-color:  rgba(0,0,0,1);*/
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-perspective-origin: 55% 200px;
          perspective-origin: 55% 200px;
  z-index: 200;
  pointer-events: none;
  position: absolute;
}

.btn {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: transform, transition; 
}

.btn .btn__side {
  position: absolute;
  top: -200px;
  left: -330px;
  width: 254px;
  height: 404px;
  z-index: 21;
}

.btn .btn__front {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
  -webkit-transition: 200ms;
  transition: 200ms;
  position: absolute;
  z-index: 22;
}  

.eyes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 88px;  
  margin-left: 7px;  
  visibility: hidden;
}

.eyes__eye {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 90%;
    background-color: #fff;
    border-style: solid;
    border-color: #000;
    margin-right: 4px;
    margin-top: 12px;
}

.eyes__pupil {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%;
    will-change: transform, box-shadow;
}

.photo {
  position: absolute;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
  pointer-events: all;
}

#myPhoto {
  max-width:100%;
  max-height:100%;  
}

#sadMouth, #happyMouth {
  position: absolute;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
  z-index: 23;
  top: 134px;
  left: 112px;
  visibility: hidden;
}

#bars {
  position: absolute;
  /*top: -404px;*/
  overflow: hidden;
  height: 0px;
  bottom:0;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}

#myBars {
  max-width:100%;
}

.eyes__text {
    font-size: 28px;   
    color: grey;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 
    position: relative;
    /*cursor: default;*/
}


#quickLink {  
  pointer-events: all;
  color: #ffcc00;
  text-decoration: none;
  text-shadow: 0.5px 0.5px grey;
}

#interactivityText1 {
  position: absolute;
  width: 170px;
  top: 270px;
  left: -210px;
}

#interactivityText2 {
  position: absolute;
  width: 92px;
  top: 270px;
  left: 77px;
}

/*#NOT {
  position: relative;
  top: -240px;
  left: 10px;
  color: #000;      
  font-size: 2em;
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
  /*animation: neon1 1.5s ease-in-out infinite alternate;*/
  /*animation: flicker 3s linear infinite;
  pointer-events: all;
}*/

#NOT {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2em;
  cursor: url("../img/mouseIcon2.png"), auto;
  position: absolute;
  top: 240px;
  left: -50px;
  color: #ffcc00;
  pointer-events: all;
  -webkit-animation: flicker 7s linear infinite;
          animation: flicker 7s linear infinite;
  text-shadow: none;
}

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFFFF, 0 0 80px #FFFFFF, 0 0 100px #4ADFE6, 0 0 120px #4ADFE6, 0 0 180px #4ADFE6;
  }
  to {
    text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 20px #FFFFFF, 0 0 25px #FFFFFF, 0 0 30px #4ADFE6, 0 0 35px #4ADFE6, 0 0 40px #4ADFE6;
  }
}

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFFFF, 0 0 80px #FFFFFF, 0 0 100px #4ADFE6, 0 0 120px #4ADFE6, 0 0 180px #4ADFE6;
  }
  to {
    text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 20px #FFFFFF, 0 0 25px #FFFFFF, 0 0 30px #4ADFE6, 0 0 35px #4ADFE6, 0 0 40px #4ADFE6;
  }
}

@-webkit-keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 799px or less */
@media screen and (max-width: 799px) {
  #aboutMeText {
    font-size: 16px;
    left: -30px;
    top: -170px;
    width: 314px;
  }
  
  .photo {
    width: 230px;
    top: 40px;
    left: 60px;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
    pointer-events: none;
  }

  #interactivityText1 {
    top: 285px;
    left: -148px;
    font-size: 20px;
    width: 140px;
  }

  #interactivityText2 {
    top: 285px;
    left: 56px;
    font-size: 20px;
  }

  #NOT {
    font-size: 1.5em;
    top: 259px;
    left: -34px;
  }

  #bars {
    bottom: -2px;
    left: 60px;
    width: 230px;
  }
}

/* for 639px or less */
@media screen and (max-width: 639px) {
  #homeText {
    font-size: 34px;
    top: 18px;
  }

  #aboutMeText {
    font-size: 16px;
    top: -320px;
    left: -225px;
    width: 430px;
  }
  
  .photo {
    width: 230px;
    top: 196px;
    left: 218px;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
    pointer-events: none;
  }

  #interactivityText1 {
    top: 411px;
    left: -107px;
    font-size: 15px;
    width: 110px;
  }

  #interactivityText2 {
    top: 411px;
    left: 45px;
    font-size: 15px;
  }

  #NOT {
    font-size: 1em;
    top: 395px;
    left: -19px;
  }

  #bars {
    bottom: -157px;
    left: 218px;
    width: 230px;
  }
}

/* for 479px or less */
@media screen and (max-width: 479px) {
  #homeText {
    font-size: 24px;
    width: 130px;
  }

  #aboutMeText {
    font-size: 16px;
    top: -344px;
    left: -158px;
    width: 300px;
  }

  .btn .btn__side {
    left: -140px;
  }
  
  .photo {
    width: 165px;
    top: 290px;
    left: 58px;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
    pointer-events: none;
  }

  #interactivityText1 {
    top: 398px;
    left: -104px;
    font-size: 14px;
    width: 100px;
  }

  #interactivityText2 {
    top: 398px;
    left: 42px;
    font-size: 14px;
  }

  #NOT {
    font-size: 1em;
    top: 380px;
    left: -22px;
  }

  #bars {
    bottom: -148px;
    left: 58px;
    width: 165px;
  }
}