.hideAboutMe {
    visibility: hidden;
}

#aboutMe {
    background-color: rgba(34,34,34,0.85);
    color: white;
    border-radius: 6px;
    padding: 10px 10px;
    text-align: center;
    top: 22%;
    left: 30%;
    right: 30%;
    margin: auto;
    max-width: 700px;
    position: fixed;  
    z-index: 99 !important;  
}

#navBtns {
  margin: auto;
  padding-top: 20px;
  box-shadow: grey;
}


.body {
    background-color: black;
}

#headShot {
  border-radius: 50%;
  width: 200px;
  height: auto;
}

.headShot img {
  width: 15rem;
  z-index: 2;
  transition: all 0.75s ease-out;
  
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  top: 5%;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  width: 300px;
  bottom: 100%;
  left: 50%;
  margin-left: -150px; /* Use half of the width (120/2 = 60), to center the tooltip */
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* .icon:hover {
  shadow
} */


/* Background */


/* particleground demo */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {

  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgb(0, 23, 36) 10%, rgb(15, 40, 73) 35%, rgba(0, 31, 63, 0.795) 100%);
  font-family: 'Montserrat', sans-serif;
  color: black;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#intro {
  position: absolute;
  top: 60%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
  width: 100%;
  height: 100%;
}





@media only screen and (max-width: 568px) { 
  #headShot {
    border-radius: 50%;
    width: 150px;
    height: auto;
  }


  #navBtns {
  
    padding-top: 30px;
  
    }
    .tooltip {
      position: relative;
      display: inline-block;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-right: 10px;
      top: 10%;
    }

    #aboutMe {
      background-color: rgba(34,34,34,0.85);
      color: white;
      border-radius: 6px;
      padding: 10px 10px;
      text-align: center;
      top: 10%;
      left: 7%;
      right: 7%;
      margin: auto;
      max-width: 700px;
      position: fixed;  
      z-index: 99 !important;  
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
}