.chat_container {
padding: 5vh 0;
overflow-y: auto;
height: 70%;
margin-left: 5%;
margin-right: 5%;
max-width: 90%;
width: 90vw;
top: 10%;
}

#about-info {
position: absolute;
top: 15vh;
left: 5%;
right: 5%;
bottom: 3vh;
padding: 0 4% 20px 4%;
overflow-y: auto;
overflow-x: hidden;
color: #fefefe;
}

#about-info::-webkit-scrollbar {
width: 6px;
}

#about-info::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}

#about-info::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}

#about-info::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}

#about-info .about-content {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 20px;
}

#about-info .wave-container {
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}

#about-info .wave-emoji {
font-size: 5em;
display: inline-block;
}

#about-info .section-text {
font-size: 0.95em;
margin-bottom: 0;
line-height: 1.8;
text-align: justify;
text-justify: inter-word;
}
#container {
height: 10%;
}
.cui {
    max-width: 100%;
}
.cui__bubble{
    font-size: 1.2em;
}

.cui__bubble a:link { color: #0000EE; }
.cui__bubble a:visited { color: #551A8B; }

#my-work-title {
    margin-top: 100px;
}
#my-work {
    margin-bottom: 5vh;
}

.headline {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.tagline {
    font-size: 12px;
    font-family: 'work sans', sans-serif;
    letter-spacing: 3px;
    color: #fefefe;
    padding-top: none;
    margin-top: none;
    /*font-weight: 300;*/
}
#home {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#home.center {
    left: 0;
    right: auto;
}

#home .h-content {
    text-align: center;
    width: 100%;
}

#home .headline,
#home .tagline {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#home .h-content{
    height: 10%;
}
#home .h-content.top-5 {
      top: 2vh; }
.main-logo {
  position: relative;
  max-width: 80px; }
#nav-footer {
    top: 0; 
    height: 10%;
}
#leftSide {
    right: 50%;
}

#rightSide #rightContent.showcontent {
    transition: .7s;
}
#prompt {
    font-family: 'Shadows Into Light', cursive;
    color: #fefefe;
    font-size: 1em;
}

.introjs-hint-pulse{
    box-sizing: content-box;
    width: 5px;
    height: 5px;
    border: 2px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 5px;
    background-color: rgba(136,136,136,0.24);
    z-index: 10;
    position: absolute;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.introjs-hint-dot {
    box-sizing: content-box;
    border: 10px solid rgb(229, 73, 41);
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    -webkit-animation: introjspulse 3s ease-out;
    -moz-animation: introjspulse 3s ease-out;
    animation: introjspulse 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    top: -15px;
    left: -15px;
    z-index: 1;
    opacity: 0;
}


.slower {
  -webkit-animation-duration: 0.9s;
  -ms-animation-duration: 0.9s;
  -moz-animation-duration: 0.9s;
  -o-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1.4s;
  -ms-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  -o-animation-delay: 1.4s;
  animation-delay: 7.5s; }