html, body {
	 margin: 20px auto;
	 padding: 0;
}
 body {
	 display: block;
	 justify-content: center;
	 align-items: center;
	 background-color: #ccd9e8;
}
 .loader {
   text-align: center;
	 color: green;
	 font-family: Consolas, Menlo, Monaco, monospace, Roboto;
	 font-weight: bolder;
	 font-size: 5vh;
	 opacity: 0.8;
   margin-bottom: 20px;
}
 .loader span {
	 display: inline-block;
	 animation: pulse 0.3s alternate infinite ease-in;
}
 .loader span:nth-child(odd) {
	 animation-delay: 0.7s;
}
 @keyframes pulse {
	 to {
		 transform: scale(0.7);
		 opacity: 0.5;
	}
}
.code {
	 width: 100%;
   height: 450px;
	 overflow: hidden;
	 position: relative;
   margin-top: 10px;
}
 .svg {
   width: 700px;
	 position: absolute;
	 bottom: -10px;
	 left: 0;
	 right: 0;
	 margin: auto;
}
 #macbook {
	 animation: macbook 0.7s linear;
	 transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 #coder {
	 animation: coder 0.8s linear;
	 transform-origin: center center;
}
 #coffee {
	 animation: coffee 1s linear;
	 transform-origin: 83% 80%;
}
 #smoke {
	 animation: smoke 3s infinite;
}
 @keyframes macbook {
	 0% {
		 transform: translateY(300px);
	}
	 50% {
		 transform: translateY(10px);
	}
	 100% {
		 transform: translateY(0px);
	}
}
 @keyframes coder {
	 0% {
		 transform: scale(0);
		 opacity: 0;
	}
	 50% {
		 transform: scale(1.5);
		 opacity: 1;
	}
	 100% {
		 transform: scale(1);
		 opacity: 1;
	}
}
 @keyframes coffee {
	 0% {
		 transform: scale(0);
		 opacity: 0;
	}
	 50% {
		 transform: scale(1.5);
		 opacity: 1;
	}
	 100% {
		 transform: scale(1);
		 opacity: 1;
	}
}
 @keyframes smoke {
	 0% {
		 transform: translateY(0px);
		 opacity: 1;
	}
	 50% {
		 opacity: 0.5;
	}
	 100% {
		 transform: translateY(-15px);
		 opacity: 0;
	}
}