/* tippy */
.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}
/* end of tippy scale */

.tippy-box[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}
/* end of tippy */

body{
    padding: 0;
    margin: 0;
}

.demo-static{
	display: flex;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
}

.demo-nav{
	width: 120px;
	min-width: 120px;
	height: 100%;
    overflow: auto;
}

.demo-body{
	width: calc(100% - 120px);
	height: 100%;
}

.demo-body iframe{
	height: calc(100vh - 8px);
	width: calc(100vw - 128px);
	display: inline;
	border: 2px solid #999;
  	outline: none !important;
}

.demo-ul{
	list-style-type: none;
	font-size: 48px;
	margin-top: 20px;
	padding-left: 10px;
}

.demo-ul li{
	padding: 10px 20px 10px 20px;
	margin-bottom: 20px;
	cursor: pointer;
}

.demo-ul li:hover{
	opacity: 0.75;
	color: #fff;
}

.li-demo{
	background: #32a852;
}

.li-html{
	background: #eee;
}

.li-css{
	background: #796de3;
}

.li-js{
	background: #e3c96d;
}

.li-console{
	background: #e3946d;
}

.li-edit{
	background: #e36d81;
}

.li-run{
	background: #e5ae37;
}

/* demo */
.CodeMirror{
	width: 100%;
	height: 100%;
	font-size: 18px;
}

.code-container{
	width: 100%;
	height: 100%;
	overflow: auto;
}