@font-face {
      font-family: 'Pinyon Script';
      font-style: normal;
      font-weight: 400;
      src: local('Pinyon Script'), local('PinyonScript'), url(../fonts/TzghnhfCn7TuE73f-CBQ0FgaG90emUMHR_woZ36JLVg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    header {
      margin-top: 24px;
    }
    header>.logo {
      text-align: center;
    }
    header>.logo>img {
      width: 80px;
    }
    header>h1 {
      margin-top: 10px;
      text-align: center;
      font-family: 'Pinyon Script', cursive;
      font-size: 48px;
      color: rgb(255, 76, 76);
      text-shadow: .5px .5px pink;
    }
    header>.link {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    header>.link>li {
      margin: 16px;
      font-size: 22px;
      color: rgba(255,0,0,.5);
    }
    header>.link>li>a {
      font-size: 26px;
    }
    header>.link>li>a:hover {
      color: rgba(255,0,0,1);
    }
    main {
      margin-top: 40px;
    }
    main>.viewPanels {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    main>.viewPanels>li {
      position: relative;
      width: 30%;
      min-width: 320px;
      padding: 32px 0;
      background: #000;
      border: 1px solid #fff;
      border-radius: 16px;
      margin: 16px;
      box-shadow: 1px 1px 7px 1px #000;
    }
    main>.viewPanels>li:hover {
      box-shadow: 5px 2px 15px 2px #000;
    }
    main>.viewPanels>li>a>img {
      width: 100%;
      vertical-align: top;
    }
    main>.viewPanels>li:nth-child(3)>a:hover:after {
      content: '我的简历';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 32px;
      font-weight: 900;
      text-align: center;
      color: #fff;
      line-height: 220px;
      background: rgba(0,0,0,.5);
    }
    main>.viewPanels>li:nth-child(2)>a:hover:after {
      content: 'Sticky Note';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 32px;
      font-weight: 900;
      text-align: center;
      color: #fff;
      line-height: 220px;
      background: rgba(0,0,0,.5);
    }
    main>.viewPanels>li:nth-child(1)>a:hover:after {
      content: 'Vue Resume';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 32px;
      font-weight: 900;
      text-align: center;
      color: #fff;
      line-height: 220px;
      background: rgba(0,0,0,.5);
    }
    footer {
      margin-top: 56px;
      text-align: center;
    }
    footer ul.iconfonts {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }
    footer ul.iconfonts>li {
      margin-left: 32px;
      font-size: 30px;
    }
    footer ul.iconfonts>li>a {
      color: rgb(50, 70, 90);
    }
    footer ul.iconfonts>li>a:hover {
      color: red;
    }