@keyframes fadeIn {
  0% {
    transform: translateY(2%);
      opacity: 0;
  }

  100% {
    transform: translateY(0);
      opacity: 100%;
  }
}

body {
    font-family: Open Sans, sans-serif;
    animation: 0.5s ease-out 0s 1 fadeIn;
    margin: 40px auto;
	max-width: 800px;
	line-height: 1.6;
	font-size: 18px;
	color: #454545;
	padding: 0 10px;
}

h1,
h2,
h3 {
	line-height: 1.2
}

.project {
    position: relative;
}

.project::before {
    content: "";
    position: absolute;
    display: block;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("../img/engine.jpg");
    filter: blur(2px) contrast(60%) opacity(70%) brightness(80%);
}

.chat::before {
    background: #303030;
    filter: blur(2px) contrast(60%) opacity(70%) brightness(80%);
}

.chat img {
    filter: blur(0px) contrast(100%) brightness(120%);
}

.chat {
    display: table;
}

.butty::before {
    background: url("../img/butty2.png") top right no-repeat #36393F;
    background-size: 60%;
    background-position-x: 50%;
    filter: blur(0px) contrast(80%) opacity(100%) brightness(100%);
}

.project-inside {
    padding: 10px;
    position: relative;
    color: white;
    /*height: auto;*/
}

.project:hover:before {
    transition: 0.3s;
    filter: blur(2px) contrast(55%) opacity(70%) brightness(100%);
}

.butty:hover:before {
    transition: 0.3s;
    filter: blur(2px) contrast(65%) opacity(80%) brightness(100%);
}

.overlay {
    color: inherit;
    display: block;
    text-decoration: none;
}

code {
    border: 1px solid #999;
    display: block;
    padding: 15px;
    white-space: pre-wrap;
}


#left-inner-box {
    float:left;
    margin-right:20px;
    width:47%;
}

/* be responsive */
@media screen and (max-width: 600px) {
   #left-inner-box {
    float: none;
    margin-right:0;
    margin-bottom: 20px;
    width:auto;
  }
}