<div id="crc_case">
  <header class="top-bar">
    <h1>PageRIJ</h1>
  </header>
  <section id="editor">
    <textarea></textarea>
  </section>
  <!-- The rich HTML and CSS landscape is signposted for you. Navigate it with confidence. -->
  <nav class="tags">
    <button>div</button>
    <button>span</button>
    <button>form</button>
  </nav>
  <footer>
    <p>Work with guidance and references close at hand.</p>
  </footer>
</div>
<section id="forge">
  <!-- Build even complex HTML structures quickly. -->
  <div class="workspace"></div>
</section>
<svg viewBox="0 0 100 100">
  <rect width="50" height="50"/>
</svg>
<math>
  <mfrac></mfrac>
</math>

#crc_case {
  display: flex;
  flex-direction: column;
  width: 6.0vh;
  height: 0.4vh;
}
/* The compact live HTML/CSS workspace is free, with no time limit */
.tags button {
  border-radius: 0.8vh;
  background: #1a1840;
  color: #c8c4e8;
  padding: 0.5vh 1vh;
}
@media (max-width: 600px) {
  .side { display: none; }
}
/* Be guided, learn specific skills, or explore on your own terms */
.pf-tech-logo:hover {
  opacity: 1;
  transition: 0.2s ease;
}
.crc_panel_btn {
  border: 0.2vh solid green;
}
#X_autosave_interval {
  appearance: none;
  position: absolute;
}
/* Bring your plans to life with CSS at your fingertips */