@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Mono:wght@400&display=swap');

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background-color: #1b1b1b;
  color: #000;
}

    #divCodeWrapper {
      height: calc(100vh - 56px); /* account for navbar height */
      margin-top: 56px;
      position: relative;
    }

    #preCode {
      height: 100%;
      width: 100%;
      background: #1b1b1b;
      margin: 0;
    }

    #preCode code {
      padding: 15px;
      height: 100%;
      width: 100%;
      font-size: 12pt;
      line-height: 1.5;
      overflow-y: auto;
      overflow-x: auto;
      display: block;
    }

    textarea {
      font-family: "Roboto Mono", monospace;
      font-size: 12pt;
      line-height: 1.5;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      padding: 15px;
      z-index: 2;
      background-color: transparent;
      color: transparent;
      caret-color: #000;
      overflow: auto;
      white-space: nowrap;
      border: none;
    }

    textarea:focus {
      outline: none;
    }

    .iframe-container {
      background: #000;
      display: none;
      height: 100%;
      position: fixed;
      width: 100%;
      z-index: 99;
      top: 0;
    }

    .printDoc {
      width: 100%;
      height: 100%;
      border: none;
      padding: 10px;
    }

    /* Custom scrollbar for textarea */
    textarea::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    textarea::-webkit-scrollbar-track {
      background: #1b1b1b;
    }
    textarea::-webkit-scrollbar-thumb {
      background-color: #000;
      border-radius: 4px;
      border: 2px solid #1b1b1b;
    }
    textarea::-webkit-scrollbar-thumb:hover {
      background-color: #333;
    }
    textarea {
      scrollbar-width: thin;
      scrollbar-color: #000 #1b1b1b;
    }