body {
  font-family: "raleway";
}

body, html {
  margin: 0;
  padding: 0;
}

.level-1 {
  left: 15px;
  position: relative;
}

.level-2 {
  left: 30px;
  position: relative;
}

.level-3 {
  left: 45px;
  position: relative;
}

.level-4 {
  left: 60px;
  position: relative;
}

.level-5 {
  left: 75px;
  position: relative;
}

.cursor {
  font-size: 18px;
  -webkit-animation: cursor 1s infinite;
  animation: cursor 1s infinite;
  color: #FFF;
}

@-webkit-keyframes cursor {
  0%    {opacity: 0;}
  20%   {opacity: 0;}
  40%   {opacity: 0;}
  50%   {opacity: 1;}
  70%   {opacity: 1;} 
  90%   {opacity: 1;}
  100%   {opacity: 1;} 
} 


@keyframes cursor {
  0%    {opacity: 0;}
  20%   {opacity: 0;}
  40%   {opacity: 0;}
  50%   {opacity: 1;}
  70%   {opacity: 1;}
  90%   {opacity: 1;}
  100%   {opacity: 1;}
}

#typingCss {
  margin-top: 10px;
}

#typingArea {
  position: absolute;
  right: 0;
  z-index: 999999999;
  height: 100%;
  top: 0;
}


#typingHtml {
  overflow: auto;
  height: calc(100% - 113px);
  background:#2e2e2e;
  padding: 20px;
  width: 300px;
  color: #e5b567;
  font-size: 14px;
}

#typingHtml::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
 
#typingHtml::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.4);
}
#typingHtml::-webkit-scrollbar-track {
  background-color: rgba(255,255,255, 0.1);
  border-radius: 10px;
}

/*body {  background-image: url(stream-cloud.jpg);  background-repeat: no-repeat;  background-size: cover;  margin: 0;  padding: 0;}.profile-card {  width: 320px;  height: 410px;  background-color: #FFF;  margin-left: auto;  margin-right: auto;  margin-top: 110px;  border-radius: 10px;  box-shadow: 0px 0px 12px 0px #000;}.cover-photo {  width: 100%;  height: 100px;  background-image: url(cover-photo.png);  background-size: cover;  background-position: 50% 50%;}.profile-pic {  background-image: url(self2.jpg);  background-size: cover;  background-repeat: no-repeat;  width: 110px;  height: 110px;  border-radius: 100px;  margin-left: auto;  margin-right: auto;  margin-top: -50px;  border: solid 5px white;}h2 {  text-align: center;  margin: 0;}p {  text-align: center;  margin-top: 5px;  margin-bottom: 5px;}a {  color: #000;  text-decoration: underline;  font-weight: bold;}*/

.selector {
  color: #b3c873;
}

.property {
  color: #6189a7;
}

.val {
  color: #9e86c8;
}

#write-speed-slider {
  width: 100%;
}

.typing-area-controls {
  width: 300px;
  /*background: #1e1e1e;*/
  background-color: #4A4842;
  padding: 20px;
  padding-bottom: 2px;
  padding-top: 20px;
  color: #FFF;
  text-align: center;
}

.typing-area-controls .typing-speed {
  font-size: 14px;
  text-decoration: underline;
  margin-top: 8px;
}

.typing-area-controls .typing-speed::before {
  content: "0";
  position: absolute;
  left: 22px;
  top: 27px;
  font-size: 14px;
}

.typing-area-controls .typing-speed::after {
  content: "100";
  position: absolute;
  right: 22px;
  top: 27px;
  font-size: 14px;
}

.minimizeTypingArea {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: #A3A3A3;
  color: #FFF;
  cursor: pointer;
  border-bottom-left-radius: 50%;
  font-size: 15px;
  text-align: center;
  line-height: 23px;
  z-index: 99999999;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}