*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 之前插入 */
*::before{  
    box-sizing: border-box;
}
/* 之后插入 */
*::after{
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    /* 竖着排列 */
    flex-direction: column;
}
.code-wrapper{
    flex: 1;
    height: 50%;
padding: 10px;
}
.perview-wrapper{
    flex: 1;
    height: 50%;
}
#code{
    overflow: hidden;
    height:100%;
}

.actions{
    position: absolute;
    right: 0;
    top: 5%;
    display:flex;
    flex-direction: column;
}

.actions>button { /* 按钮美化 */
	width: 100px; /* 宽度 */
    height: 40px; /* 高度 */
    margin:10px;
	border-width: 0px; /* 边框宽度 */
	border-radius: 20px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
    font-size: 15px; /* 字体大小 */
    
}
.actions>button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}

.actions>button.active{
    box-shadow: 2px 2px 3px rgba(0, 0, 0 , 0.8);
}

@media(max-height:500px){
	.actions>button{
        width: 50px; /* 宽度 */
        height: 20px; /* 高度 */
        margin:3px;
        font-size: 10px; /* 字体大小 */

    }
    
}