* {
      box-sizing: border-box;
    }
    html,
    body {
      margin: 0;
      padding: 0;
      background-color: #333399;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    div.title {
      color: #fff;
      display: inline-block;
      vertical-align: top;
      font-size: 32px;
      font-weight: bold;
      float: right;
      text-align: right;
      padding: 10px 10px 0 0;
    }
    div.title span {
      font-size: 18px;
      font-weight: bold;
    }
    .phpmath {
      display: grid;
      grid-template-areas: 'header header''aside main';
      grid-template-columns: 150px auto;
    }
    @media screen and (max-width: 700px) {
      .phpmath {
        display: grid;
        grid-template-areas: 'header''main''aside';
        grid-template-columns: 1fr;
      }
    }
    header {
      grid-area: header;
    }
    aside {
      grid-area: aside;
      padding: 15px;
    }
    nav {
      background-color: #ffff00;
      padding: 10px;
    }
    nav ul {
      list-style-type: none;
      padding-left: 0;
      padding-top: 0;
      margin-top: 0;
    }
    nav ul li a {
      color: #0000ee;
    }
    main {
      grid-area: main;
      padding: 15px;
      background-color: #fff;
    }
    pre,
    code {
      white-space: pre-wrap;
      word-wrap: break-word;
      text-align: justify;
    }