* {
  outline: 0px dotted #8882;
}

html {
  margin: 0px;
  padding: 0px;
  font-size: 12pt;

  @media (max-width: 1024px) { font-size: 11pt; }
  @media (max-width: 640px) { font-size: 9pt; }
  @media (max-width: 480px) { font-size: 8pt; }
}

body {
  overflow-y: scroll;
  min-width: 320px;
  margin: 0px auto;
  padding: 1.0em 1.0em 4.0em 1.0em;
  border: none;

  @media (max-width: 1024px) { padding: 0.9em 0.9em 3.6em 0.9em; }
  @media (max-width: 640px) { padding: 0.75em 0.75em 3.0em 0.75em; }
  @media (max-width: 480px) { padding: 0.5em 0.5em 2.0em 0.5em; }

  > header {
    max-width: 1056px;
    margin: 2em auto;
    padding: 0 16px;

    @media (max-width: 1024px) { padding: 0 12px; }
    @media (max-width: 640px) { padding: 0 8px; }
    @media (max-width: 480px) { padding: 0 4px; }

    > div {
      display: flex;
      flex-wrap: wrap;
      position: relative;

      > h1 {
        flex-basis: 400px;
        margin: 0;
        padding: 0;
        line-height: 64px;
        font-size: 1.5rem;
        font-weight: normal;

        @media (max-width: 1024px) { line-height: 56px; }
        @media (max-width: 640px) { line-height: 48px; }
        @media (max-width: 480px) { line-height: 32px; font-size: 1.2rem; }

        > a {
          display: block;
          width: 400px;
          text-decoration: none;
          color: #444;

          @media (max-width: 1024px) { width: 350px; }
          @media (max-width: 640px) { width: 300px; }
          @media (max-width: 480px) { width: 200px; }

          > img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      > ul {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 24px 0 0 0;
        flex-grow: 1;

        > li {
          line-height: 32px;
          padding: 0 1em;

          a {
            display: block;
            height: 32px;
            padding: 0 0.5em;
            border-bottom: 2px solid;
            border-image: linear-gradient(90deg, #0000) 1;
            text-decoration: none;
            line-height: 32px;
            color: #888;
            transition: all 0.3s ease;

            &:hover {
              border-image: linear-gradient(90deg, #0000, #0004, #0004, #0004, #0000) 1;
              color: #333;
            }
          }
        }
      }

      > dl {
        flex-basis: 180px;
        display: flex;
        margin: 0;
        padding: 24px 0 0 0;

        > dt {
          display: none;
        }

        > dd {
          width: 100%;
          margin: 0;
          padding: 0;
          line-height: 32px;
          text-align: right;

          > a {
            display: block;
            height: 32px;
            padding: 0 0.5em;
            text-decoration: none;
            line-height: 32px;
            color: #888;
            transition: all 0.3s ease;

            &:hover {
              color: #333;
            }
          }
        }
      }

      @media (max-width: 1024px) {

        > h1 {
          flex-basis: 100%;
        }

        > ul, > dl {
          padding-top: 0;

          > li:first-child {
            padding-left: 0;
          }
        }
      }

      @media (max-width: 640px) {
        > dl {
          flex-basis: 160px;
        }
      }

      @media (max-width: 480px) {
        > dl {
          position: absolute;
          right: 0;
          top: 0;
          width: 100px;
        }
      }
    }
  }

  > footer {
    max-width: 1024px;
    margin: 2em auto;

    > div {
      text-align: center;
      color: #555;
    }
  }

  > main {
    max-width: 960px;
    margin: 0px auto;
    padding: 64px;
    border-radius: 8px;
    box-shadow: 0px 0px 64px #0004;

    @media (max-width: 1024px) { padding: 48px; }
    @media (max-width: 640px) { padding: 32px; }
    @media (max-width: 480px) { padding: 24px; }

    h1 {
      margin: 2em 0 1em 0;
      padding: 0.4em 0 0.4em 0.6em;
      border-left: 0.2em solid;
      border-image: linear-gradient(0, #0004, #0004, #0000) 1;
      font-size: 1.6rem;
      font-weight: normal;
      color: #555;

      &:first-of-type {
        margin-top: 0;
      }
    }

    h2 {
      margin: 1em 0;
      padding: 0.2em 0 0.2em 0.6em;
      border-left: 0.1em solid;
      border-image: linear-gradient(0, #0004, #0004, #0000) 1;
      font-size: 1.4rem;
      font-weight: normal;
      color: #555;
    }

    > nav {
      position: relative;
      margin: -48px -64px 2.5em -64px;
      padding: 0 64px 0.75em 64px;
      border-bottom: 1px solid #ddd;

      @media (max-width: 1024px) {
        margin: -36px -48px 2.0em -48px;
        padding: 0 48px 0.56em 48px;
      }

      @media (max-width: 640px) {
        margin: -24px -32px 1.25em -32px;
        padding: 0 32px 0.36em 32px;
      }

      @media (max-width: 480px) {
        margin: -18px -24px 1.0em -24px;
        padding: 0 24px 0.28em 24px;
      }

      &::before {
        content: url(img/burger.svgz);
        position: absolute;
        left: 8px;
        top: 0;
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 36px;
        text-align: center;
        color: #ccc;

        @media (max-width: 1024px) {
          left: 6px;
          top: 2px;
          width: 36px;
          height: 36px;
          line-height: 36px;
          font-size: 32px;
        }

        @media (max-width: 640px) {
          left: 4px;
          top: 0px;
          width: 24px;
          height: 24px;
          line-height: 24px;
          font-size: 20px;
        }

        @media (max-width: 480px) {
          left: 3px;
          top: 0px;
          width: 18px;
          height: 18px;
          line-height: 18px;
          font-size: 16px;
        }
      }

      > ul {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;

        > li {
          padding: 0 0.5em;
          border-left: 1px solid;
          border-image: linear-gradient(0, #0000, #0002, #0000) 1;

          &:first-child {
            border: none;
            padding-left: 0;
          }

          > a, > span
          {
            display: block;
            padding: 1em;
            line-height: 1em;
            border-radius: 8px;
            border: 1px solid;
            background-color: #fff;
            text-decoration: none;
            color: #555;

            @media (max-width: 1024px) { padding: 0.75em; border-radius: 6px; }
            @media (max-width: 640px) { padding: 0.50em; border-radius: 4px; }
            @media (max-width: 480px) { padding: 0.36em; border-radius: 3px; }
          }

          > a {
            border-color: transparent;
            transition: background-color 0.35s ease, color 0.35s ease;

            &:hover {
              background-color:hsl(235, 40%, 95%);
              color: hsl(234, 65%, 20%);
            }
          }

          span {
            border-color: #ddd;
            cursor: default;
          }
        }
      }
    }
  }
}

dl.dictionary {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0 3em 0;

  > dt {
    flex-basis: 200px;
    margin: 0 8px 0 0;
    padding: 1.5em 0 0.5em 0;
    border-bottom: 1px solid #0004;
  }

  > dd {
    flex-basis: calc(100% - 300px);
    flex-grow: 1;
    margin: 0;
    padding: 1.5em 0 0.5em 1em;
    border-bottom: 1px solid #0002;
  }

  &.tiny {
    > dt {
      flex-basis: 120px;
    }

    > dd {
      flex-basis: calc(100% - 200px);
    }
  }

  @media (max-width: 640px) {
    display: block;

    > dt {
      margin-bottom: 4px;
      padding-bottom: 0;
      border: none;
      font-size: 0.9rem;
      font-weight: bold;
      color: #888;

      &::before {
        content: "■ ";
      }
    }

    > dd {
      padding: 0 0 0.5em 0;
    }
  }
}

ul.button {
  display: flex;
  list-style-type: none;
  margin: 2em 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;

  > li {
    margin: 0 0.5em 1em 0.5em;
    padding: 0;

    > a {
      display: block;
      min-width: 120px;
      min-height: 48px;
      padding: 0 1.5em;
      border: 1px solid #aaa;
      border-radius: 8px;
      background: #eee linear-gradient(0, #0003, #fff3);
      line-height: 48px;
      text-align: center;
      text-decoration: none;
      font-family: inherit;
      font-size: 0.9rem;
      color: #000;
      cursor: pointer;

      &:focus {
        border-color:  #488;
        box-shadow: 0 0 4px #4888;
      }

      &:hover {
        border-color: #888;
        background-color: #f8f8f8;
      }

      @media (max-width: 1024px) { min-width: 108px; min-height: 40px; line-height: 40px; border-radius: 6px; }
      @media (max-width: 640px) { min-width: 90px; min-height: 36px; line-height: 36px; border-radius: 4px; }
      @media (max-width: 480px) { min-width: 72px; min-height: 32px; line-height: 32px; border-radius: 3px; }
    }
  }
}