/* Styles for index.html */
@font-face {
    font-family: 'ToxTypewriter';
    src: url('fonts/tox_typewriter/ToxTypewriter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
  /*background-image:url("bg_paper1.png");*/
  webkit-transition: background-url 0.5s ease;
  transition: background-url .5s ease;
}
.hide {
  display: none;
}
.body_container {
  padding: 30px;
  display: none;
  overflow: hidden;
  font-family: ToxTypewriter;
}
.orange {
  color: orange;
}
.blue {
  color: #4682B4;
}
.purple {
  color: #400080;
}

.profile-img-container {
  /* width: 100%; */
  /* text-align: center; */
  margin: 5px auto;
  display: none; /* It will be faded in */
}
.profile-img-container img{
  -webkit-filter: grayscale(85%); /* Safari 6.0 - 9.0 */
  filter: grayscale(85%);
}
.text-container {
  text-decoration: none;
  overflow: hidden;
  line-height: 100%;
  margin-top: 20px;
}
.text-container a {
  text-decoration: none;
}
span.underlineOnHover:hover {
  text-decoration: underline;
}

div.contact-img {
  margin-top: 10px;
}
div.contact-img img{
  width:40px
}
div.contact-img img:hover{
  position: relative;;
  bottom: 1px;
  -webkit-transition: width 0.1s; /* Safari */
  transition: width 0.1s;
  cursor: pointer;
}
/* Styles for typed.js for a typed-cursor */
.typed-cursor{
  opacity: 1;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  animation: blink 1s infinite;
}
@keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}