* { box-sizing: border-box; margin: 0; padding: 0; }
    
:root{
      width:100vw;
      height: 100vh;
      overflow: scroll;
    }
body{
      background: #fff;
      width:100%;
      height: 100%;
      font-family: sans-serif;
      overflow: scroll;
      border: 2px dashed rgba(0,0,0,0.7);
    }
    .container {
      display: flex;
      width: 180vw;
      height: 100%;
    }
    .left, .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #f0f0f2;
      overflow: auto;
    }
    .left { flex: 1; }
    .right { flex: 1; border-left: 2px dashed rgba(0,0,0,0.7);}

    .iframe { width: 100%; height: 100%; border: none; }
    .textarea {
      width: 100%;
      height: 100%;
      background: #efefef;
      white-space: nowrap;
      overflow: scroll;
      padding: 10px;
      border: none;
      outline: none;
    }

    nav, .btn, .nava { display: flex; margin: 0; padding: 0; }

.text, .btna, .button, nav a {
      font-size:14;
      font-weight:bold;
      flex:1;
      background: rgba(0,0,0,0.7);
      color: silver;
      border-radius: 4px;
      text-decoration: none;
      width: 100%;
      padding:8px;
      border: 2px solid #ccc;
      text-align: center;
      margin:4px;
    }
    .text {
      background:#fff;
padding:0px 8px;
    }

    ul {
      height: 100%;
      overflow: scroll;
      list-style: none;
    }

    li {
      background: #fff;
      color: #3f3f3f;
      padding: 8px;
      cursor: pointer;
      border-bottom: 2px solid #bbb;
    }

    .selected { background: rgba(0,0,0,0.7); color: #fff; }

    h4, p {
      padding: 8px;
      border-top: 2px solid #ccc;
      border-bottom: 2px solid #ccc;
      display: block;
    }
* a{ text-decoration: none; color: red; }
    p span { font-size: 12px; }

    h6 {
      font-size: 18px;
      margin: 20px 0;
      padding: 10px;
      text-align: center;
      display: block;
    }

    #konfirm {
      background: rgba(0,0,0,0.9);
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      padding-top: 40%;
    }

    .show { display: block; text-decoration: none; color: red; }
.hidd { display: none; }
.nava #btnl::after{content:"Code"}
#view{display:block}
#input{display:none}
#btn{display:none}
#btn:checked~.nava #btnl::after{content:"Preview"}
#btn:checked~#view{display:none}
#btn:checked~#input{display:block}