.main {
  margin: 1rem 1.5rem 5rem;

  &.has-editor:not(.split-view) > .form,
      &:not(.split-view) > .about,
      > .output-editor,
      > .rich-preview-wrapper {
    display: block;
    float: none;

    width: 100%;
    max-width: 60rem;
    margin: auto;
  }

  &.split-view {
    position: absolute;
    top: 5.75rem;
    right: 0;
    bottom: 3.5rem;
    left: 0;

    margin: 1rem 1.5rem;

    > .about, > .form, > .preview {
      overflow-y: auto;

      box-sizing: border-box;
      height: 100%;
    }
  }

  .output-editor {
    textarea {
      width: 100%;
      height: 100%;

      resize: vertical;

      font-family: monospace !important;
    }

    .actions {
      margin-top: .5rem;

      .save {
        float: right;

        padding: .5rem 2rem;

        text-transform: uppercase;

        border: none;
        background-color: $main-color;

        &:hover {
          background-color: $dark-color;
        }
      }
    }
  }

  .form {
    display: inline-block;

    box-sizing: border-box;
    width: 60%;

    // Remove the outermost border in the editor
    > fieldset, > div {
      margin: 0;
      padding: 0;

      border: none;
    }
  }

  .preview {
    display: inline-block;
    float: right;

    box-sizing: border-box;
    width: 40%;

    white-space: pre-wrap;

    font-family: monospace !important;
  }

  .about {
    max-width: 45rem;
    padding-right: 1rem;

    text-align: justify;

    font-size: 14px;

    h3 {
      margin-bottom: 0;

      &:not(:first-of-type) {
        margin-top: 2rem;
      }
      &:first-of-type {
        margin-top: 1rem;
      }
    }
  }
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &, &:visited {
    color: #0288d1;
  }
}

.ie11-only {
  display: none;
}

@media all and (-ms-high-contrast:none) {
  .about .ie11-only:not(.dismissed) {
    position: absolute;
    right: 1rem;

    display: block !important;

    width: 20rem;
    padding: 1.5rem;

    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);

    h1 {
      margin: 0;
      margin-bottom: .5rem;

      font-size: 2rem;
    }

    
    p {
      margin: 0;

      font-size: .875rem;
    }

    .dismiss {
      position: absolute;
      top: 0;
      right: 0;

      box-sizing: border-box;
      width: 2rem;
      height: 2rem;
      margin: .5rem;
      padding: .5rem;

      cursor: pointer;

      border: none;
      background: none;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.cookies {
  display: none;
}

.about .cookies:not(.dismissed) {
  position: relative;

 display: block !important;

  width: fit-content;
  padding: 1.5rem;

  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
    
  h2 {
    margin: 0;
    margin-bottom: .5rem;

    font-size: 2rem;
  }

  p {
    margin: 0;

    font-size: .875rem;

  }

  .dismiss {
    position: absolute;
    top: 0;
    right: 0;

    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    margin: .5rem;
    padding: .5rem;

    cursor: pointer;

    border: none;
    background: none;

    img {
      width: 100%;
      height: 100%;
    } 
  }
}
