html {
    font-size: 19.2px;
    overflow: unset;
  }
  
  html body {
    all: initial;
  }
  
  html body .total-contain {
    all: initial;
  }
  
  .contribution-content {
    width: 100%;
  }
  
  .contribution-content .content {
    width: 80%;
    margin: 3rem auto;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 2px -2px 10px #81ccbd;
    padding: 1.5rem;
  }
  
  .contribution-content .content .overview {
    opacity: 0;
    transition: all .35s ease-in;
    padding: 2rem;
    background-color: #FFFCF3;
  }
  
  .contribution-content .content .overview .contribution-head {
    display: inline-block;
    background-color: #8AEAC4;
    color: #f9a10b;
    font-family: qiantuhou;
    width: auto;
    height: 4vw;
    line-height: 3vw;
    padding: 0 0.3375rem;
    font-size: 3vw;
    margin-top: -2.5rem;
    box-shadow: 0.4vw 0.4vw 0vw #28ae78;
  }
  
  .contribution-content .content .overview .contribution-article {
    padding-top: 0.625rem;
  }
  
  .contribution-content .content .overview .contribution-article .contribution-title {
    color: #53DCBA;
    font-size: 3vw;
    font-family: hawk;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .contribution-content .content .overview .contribution-article p {
    font-size: 1.5vw;
    font-family: NavTitle;
    line-height: 3vw;
    text-align: justify;
    text-justify: newspaper;
  }
  
  .contribution-content .content .overview .contribution-article p .firstContribution {
    color: #f9a10b;
    font-size: 4vw;
    display: block;
    margin-bottom: 0.625rem;
    max-width: 0;
    animation: typing 8s steps(var(--characters)) forwards;
    white-space: nowrap;
    overflow: hidden;
    font-family: MvBoli;
  }
  
  .contribution-content .content .overview .contribution-article p .contribution-img {
    float: left;
    width: 20%;
  }
  
  .contribution-content .content .overview .contribution-article p .firstContribution:after {
    content: " |";
    animation: blink 1.5s infinite;
    animation-timing-function: step-end;
    font-family: none;
  }
  
  .contribution-content .content .overview .contribution-article p img {
    display: block;
    width: 60%;
    margin: 1rem auto;
  }
  
  .contribution-content .content .overview .contribution-article p .contribution-combine {
    display: flex;
    justify-content: space-around;
  }
  
  .contribution-content .content .overview .contribution-article p .contribution-combine img {
    width: 48%;
    border-radius: 0.5vw;
  }
  
  .contribution-content .content .suspend {
    transition: all .35s ease-in;
    position: fixed;
    right: 0;
    top: 30%;
    transform: translateX(100px);
    opacity: 0;
  }
  
  .contribution-content .content .suspend .catlogue-item {
    cursor: pointer;
    background-color: #F6A894;
    color: #fff;
    padding: 0.5vw;
    font-size: 1.5vw;
    border-radius: 0.5vw;
    font-family: hawk;
    margin: 0.5rem 0;
    transition: all .35s ease-in;
    transform: translateX(60px);
  }
  
  .contribution-content .content .suspend .catlogue-item:hover {
    transform: translateX(0px);
  }
  
  .contribution-content .content .active {
    border-left: none !important;
  }
  
  @keyframes typing {
    75%,
    100% {
      max-width: calc(var(--characters) * 1.5ch);
    }
  }
  
  @keyframes blink {
    0%,
    75%,
    100% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
  }