*{padding:0;margin:0;box-sizing:border-box}a{color:inherit;text-decoration:none}ul{list-style:none}.divider{width:100%;min-height:.5px;margin:10px 0;background-color:#ccc}html,body{width:100%;height:100%}body{display:flex;flex-direction:column}header{width:100%;height:70px;display:flex;gap:100px}header>figure{width:70px;height:70px;display:flex;justify-content:center;align-items:center;margin:0 30px}header>nav{display:flex;align-items:center}header>nav>ul{display:flex}#logo{width:100%;height:100%;padding:10px;object-fit:cover}#logo:hover{cursor:pointer}main{width:100%;padding:20px;display:flex;gap:20px}aside{width:150px;height:100%}aside>nav>ul li{margin-bottom:5px;padding-left:5px}aside>nav>ul li:hover{cursor:pointer;background-color:#ecebeb}section{width:1000px;height:100%;overflow:hidden;display:flex;justify-content:center}footer{width:100%}.preview-container{width:100%;height:100%;display:flex;gap:20px}.preview-container>*{flex:1;border:1px solid #ccc;padding:10px}.preview-input,.preview-output{overflow:hidden}.preview-input{height:100%;display:flex;flex-direction:column}.preview-input>*{flex:1}.preview-output{height:100%}.preview-iframe{width:100%;height:100%;border:none}.html-box,.css-box,.javascript-box{display:flex;flex-direction:column;gap:10px;overflow:hidden;margin-bottom:10px}.cm-editor{height:150px;overflow:auto}