html
  head
    title
      block title
        | Authorization Server

    style.
      html, body {
        font-family: "Roboto";
        font-size: 11pt;
        background: #FAFAFE;
      }

      main {
        max-width: 30rem;
        margin: 2rem auto;
        background: white;
        border: 1px solid #DDD;
        padding: 2rem;
        border-radius: 6px;
      }

      h1 {
        font-weight: 500;
        text-align: center;
      }

      input, button {
        font: inherit;
      }

      input {
        background: white;
        height: 2rem;
        display: block;
        width: 100%;
        margin: 0.5rem 0;
        padding: 0 0.5rem;
        border: 1px solid #DDD;
      }

      input:focus {
        border: 1px solid #000;
        outline: none;
      }

      button {
        padding: 0 1rem;
        height: 2.5rem;
        background: #dedede;
        font-size: inherit;
        border: 0;
        border-radius: 6px;
        color: black;
        font-weight: 500;
        cursor: pointer;
      }

      fieldset {
        border: none;
        padding: 0;
        margin: 1rem 0;
      }

      .message.error {
        color: red;
      }

      .authorization {
        display: flex;
      }

      .authorization form {
        flex: 1 1 0;
      }
      .authorization form:first-child {
        margin-right: 2rem;
      }

      .authorization form button {
        width: 100%;
      }

      button.red {
        background: #b33f3f;
        color: white;
      }
      button.red:hover {
        background: #ff7878;
      }

      button.green {
        background: #41b141;
        color: white;
      }
      button.green:hover {
        background: #83d283;
      }

  body
    main
      header: h1
        block title
      block content