@import "colours";

html, body {
  background-color: @main-bg;
}

div.preview {
  position: fixed;
  width: 580px;
  height: 490px;
  left: 50%;
  top: 50%;
  margin-left: -290px;
  margin-top: -310px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 19px;

  h1, h2, h3, h4, h5, h6 {
    font-size: auto;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  img {
    max-width: 100%;
    max-height: 600px;
  }

  pre {
    overflow: hidden;
    background-color: #263238;
    padding-right: 0;
    border-radius: 4px;
    font-family: 'Inconsolata', monospace;
    padding: 15px 20px;
  }

  code {
    color: #ABB2BF;
    font-size: 15px;
    font-family: 'Inconsolata', monospace;
    * {
      font-family: 'Inconsolata', monospace;
    }
  }

  &.hidden {
    display: none;
  }
}

form.write {
  background-color: white;
  position: fixed;
  width: 660px;
  height: 750px;
  left: 50%;
  top: 50%;
  margin-left: -330px;
  margin-top: -350px;
  border-radius: 4px;
  overflow: hidden;
  padding: 40px;
  box-sizing: border-box;

  textarea {
    resize: none;
    width: 100%;
    height: 490px;
    font-size: 20px;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
    border: none;
    outline: none;
    padding: 15px 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
  }

  input[type="text"][name="tags"] {
    border: none;
    outline: none;
    height: 25px;
    font-size: 14px;
    width: 100%;
    font-weight: bold;
    transition-duration: 0.3s;

    &:focus {
      font-size: 20px;
    }
  }

  button.switchview {
    float: right;
  }

  button.submit {
    transition-duration: 0.02s;
    &:hover i {
      transform: scale(1.3) translateX(-10px) translateY(8px) rotate(-6deg);
    }

    &:active i {
      opacity: 0;
      transform: scale(0.7) translateX(30px) translateY(-15px) rotate(18deg);
    }
  }

  button.switchview, button.submit {
    bottom: 55px;
    right: 70px;
    width: 40%;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    font-size: 22px;
    transition-duration: 0.3s;
    cursor: pointer;
    outline: none;
    margin-top: 30px;
    i {
      font-size: 25px;
      margin: 0 15px;
      transition-duration: 0.4s;
      color: #585858;
    }

    &:hover {
      transform: scale(1.2);

      i {
        color: #3b3b3b;
      }
    }

    &:active {
      transform: scale(0.9);
    }
  }
}
