body {
    font-family: "Roboto", sans-serif;
    padding-top: 4em;
    background-color: #fafafa;
    color: #333333;

}

#editor {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
}

#preview {
    /*border: 1px solid #ddd;*/
    padding: 20px;
    border-radius: 5px;
    min-height: 1em;
    width: calc(100% - 20%);
    background-color: #fafafa;
}

@media (max-width: 736px) {
    #preview  {
        width: calc(100% - 2em);
    }
}

.code-block-with-copy {
    position: relative; /* 让按钮相对代码块定位 */
}

.copy-btn {
    position: absolute;
    top: 10px; /* 将按钮置于代码块的顶部 */
    right: 10px; /* 将按钮置于代码块的右侧 */
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px; /* 调整按钮文字大小 */
}

/*滚动条相关*/

/* 自定义滚动条整体样式 */
::-webkit-scrollbar {
    /*width: 2px; !* 滚动条宽度，变细 *!*/
    height: 0.7rem;
    width: 0.7rem;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: rgb(210, 211, 212); /* 滑块颜色改为蓝色 */
    border-radius: 0; /* 滑块圆角 */

}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
    background: rgb(210, 211, 212); /* 悬停时滑块颜色 */
}

/* 修改滚动条轨道背景 */
::-webkit-scrollbar-track {
    background-color: transparent;  /* 设置滚动条背景颜色 */
    border-radius: 0; /* 轨道也是直角 */
}
/* 鼠标悬停时，滚动条轨道变成灰色 */
::-webkit-scrollbar-track:hover {
    background: #f0f0f0; /* 灰色 */
}



a:focus {
    outline: none;
}