* {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans TC', sans-serif; }

body {
  background-image: url(../img/bg-img.png), url(../img/email-pattern.png);
  background-repeat: no-repeat,repeat;
  background-size: 45%,auto;
  background-position: right bottom,top;
  width: 100%;
  height: 100vh; }

h1 {
  display: block;
  padding: 15px 50px;
  border-bottom: 3px solid #fff;
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 3px 0px #dddddd; }
  h1 a {
    display: block;
    display: inline-block;
    max-width: 300px; }
    h1 a img {
      width: 100%; }
  h1 .error-number {
    display: flex;
    position: absolute;
    right: 50px;
    bottom: 5px; }
    h1 .error-number h2 {
      font-size: 4rem;
      color: #ff4b4b;
      text-shadow: 2px 2px 0px #ffffff; }
    h1 .error-number span {
      margin-left: 10px;
      padding-top: 40px;
      color: #989898;
      text-shadow: 2px 2px 0px #ffffff; }

.error-content {
  padding: 50px; }
  .error-content .content-block {
    width: 100%;
    max-width: 900px; }
    .error-content .content-block .error-text {
      max-width: 80%;
      margin: auto; }
      .error-content .content-block .error-text h2 {
        font-size: 2rem;
        color: #ff4b4b;
        border-bottom: 2px solid #ddd;
        padding-bottom: 5px;
        margin-bottom: 10px; }
        .error-content .content-block .error-text h2 span {
          margin-right: 15px; }
      .error-content .content-block .error-text h3 {
        font-size: 3rem;
        color: #6b6b6b;
        margin-bottom: 5px; }
      .error-content .content-block .error-text ul {
        background-color: #ffffff;
        border: 5px solid #dddddd;
        padding: 10px 0; }
        .error-content .content-block .error-text ul li {
          list-style-type: none;
          font-size: 2rem;
          color: #5d5d5d;
          padding: 15px 20px;
          margin-bottom: 2px; }
    .error-content .content-block .home {
      margin: 25px 0;
      text-align: center; }
      .error-content .content-block .home a {
        display: inline-block;
        background: white;
        background: -moz-linear-gradient(top, white 0%, #ededed 100%);
        background: -webkit-linear-gradient(top, white 0%, #ededed 100%);
        background: linear-gradient(to bottom, white 0%, #ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
        padding: 10px 15px;
        border-radius: 15px;
        border: 3px solid #ffffff;
        text-decoration: none;
        box-shadow: 1px 2px 7px #bdbdbd; }
        .error-content .content-block .home a div {
          max-width: 30px;
          margin: auto; }
          .error-content .content-block .home a div img {
            width: 100%;
            -webkit-filter: brightness(0.5); }
        .error-content .content-block .home a p {
          color: #787878; }
      .error-content .content-block .home a:hover {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff4b4b+3,ff4b4b+17 */
        background: #ff4b4b;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ff4b4b 3%, #ff4b4b 17%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ff4b4b 3%, #ff4b4b 17%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ff4b4b 3%, #ff4b4b 17%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b4b', endColorstr='#ff4b4b',GradientType=0 );
        /* IE6-9 */
        border: 3px solid #d22d2d;
        box-shadow: none; }
        .error-content .content-block .home a:hover p {
          color: #fff; }
        .error-content .content-block .home a:hover div img {
          -webkit-filter: brightness(1); }