* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after {
  box-sizing: border-box;
}
*::before {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.code-wrapper {
  flex: 1;
  height: 50%;
}

.preview-wrapper {
  flex: 1;
  height: 50%;
  padding: 10px;
}

#code {
  overflow: hidden;
  height: 100%;
}
.actions{
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

.actions > button{
  margin: 10px;
  background: #ddd;
  padding:8px 10px;
  border:none;
  background: #00b7ff73;
  border-radius: 10px;
}
/* 如果是默认激活状态的话 就将颜色变深一点! */
.actions>button.active{
  box-shadow: 1px 1px 1px rgb(0,0,0.8);
}

.actions>button:focus{
  outline:none;
}