body {
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 1.55;
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
}

a,
a:visited {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

#app {
  color: var(--main-font-color);
  height: 100vh;

  header {
    position: relative;
    display: flex;
    height: 70px;
    width: 100vw;
    padding: 10px 25px;
    align-items: center;
    z-index: 100;

    h1 {
      position: relative;
      color: white;
      top: 2px;
    }
  }

  .container {
    position: relative;
    display: flex;
    height: calc(100vh - 70px);
    padding: 25px;

    #calcEditor,
    .mathResult {
      position: relative;
      width: 50%;
      height: 100%;
      padding: 0;
      margin: 0;
      letter-spacing: 0.1rem;
      font-family: "Ubuntu Mono", monospace;
      font-weight: var(--weight-bold);
      font-size: 1.8rem;
      overflow-x: hidden;
      overflow-y: auto;
      z-index: 25;

      /* same as in _aceEditor.scss (&.ace-tm .ace_scrollbar) */
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: var(--scrollbar-bg-color);
      }
      &::-webkit-scrollbar {
        width: 5px;
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: var(--scrollbar-main-color);
      }
      &::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-hover-color);
      }
    }

    /* #calcEditor {
      overflow-y: hidden;
    } */

    .mathResult {
      /* color: var(--result-font-color); */

      &.showActiveLine > p {
        opacity: 0.5;
      }

      p {
        margin: 0;
        line-height: var(--input-lh);
        opacity: 1;
        transition: opacity 0.1s ease-in-out;

        &.active {
          opacity: 1;
        }

        &:empty:before {
          content: "\200b"; /* unicode zero width space character */
        }

        span {
          color: #608b4e;
        }
      }
    }

    .separator {
      position: relative;
      height: 100%;
      width: 1px;
      padding-left: 25px;
      padding-right: 50px;
      z-index: 50;

      &::before {
        content: "";
        position: absolute;
        background-color: var(--separator-color);
        height: 90%;
        width: 1px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.75;
      }
    }
  }
}