.model {
  display: none;
  position: fixed;
  z-index: 999;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.model.share-show {
  animation: scale-in 0.25s ease 0s 1 normal forwards;
}

.model.share-hide {
  animation: scale-out 0.25s ease 0s 1 normal forwards;
}

.model .model-content {
  padding: 20px;
}

.model .model-nav {
  padding: 8px 20px;
  font-size: 16px;
  line-height: 24px;
  color: rgb(148 163 184);
  background-color: rgb(241 245 249);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.model .model-nav i.close {
  display: block;
  cursor: pointer;
  background-color: rgb(148 163 184);
  width: 16px;
  height: 16px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M8 8L40 40'/%3E%3Cpath d='M8 40L40 8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M8 8L40 40'/%3E%3Cpath d='M8 40L40 8'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: 100%;
  -webkit-mask-size: 100%;
  transition: 0.1s;
}

.model .model-nav i.close:hover {
  background-color: rgb(71 85 105);
}

.art-share {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 20px;
  gap: 8px;
}

i.icon {
  width: 35px;
  height: 35px;
  display: inline-block;
  background-color: #eee;
  border-radius: 999px;
  cursor: pointer;
}

i.icon.facebook {
  background-color: #0d5185;
  mask-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131c.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"%2F%3E%3C%2Fsvg%3E');
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131c.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"%2F%3E%3C%2Fsvg%3E');
  mask-size: 100%;
  -webkit-mask-size: 100%;
}

i.icon.twitter {
  background-color: #000;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23fff" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"%2F%3E%3C%2Fsvg%3E');
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.linkedin {
  background-color: #0a66c2;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23fff" d="M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z"%2F%3E%3C%2Fsvg%3E');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.weibo {
  background-color: #d52c2b;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="512" height="512" viewBox="0 0 512 512"%3E%3Cpath fill="%23fff" d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7c-22 4.8-28.8-28.1-7.1-32.8c50.1-10.9 92.3 37.1 76.5 84.8c-6.8 21.2-38.8 10.8-32-10.3M214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6c79.5-33.6 140.5-16.8 114 51.4c-3.7 9.4 1.1 10.9 8.3 13.1c135.7 42.3 34.8 215.2-169.7 215.2m143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7c-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116M347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3c72.3-15.2 134.8 52.8 111.7 124c-7.4 24.2 29.1 37 37.4 12c31.9-99.8-55.1-195.9-157.4-174.3m-78.5 311c-17.1 38.8-66.8 60-109.1 46.3c-40.8-13.1-58-53.4-40.3-89.7c17.7-35.4 63.1-55.4 103.4-45.1c42 10.8 63.1 50.2 46 88.5m-86.3-30c-12.9-5.4-30 .3-38 12.9c-8.3 12.9-4.3 28 8.6 34c13.1 6 30.8.3 39.1-12.9c8-13.1 3.7-28.3-9.7-34m32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4c-2.9 5.1-1.4 10.6 3.7 12.9c5.1 2 11.7-.3 14.6-5.4c2.8-5.2 1.1-10.9-4-12.9"%2F%3E%3C%2Fsvg%3E');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.wechat {
  background-color: #09bc64;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="24" height="24" viewBox="0 0 24 24"%3E%3Cg fill="%23fff" fill-rule="evenodd" clip-rule="evenodd"%3E%3Cpath d="M8.452 3.5C4.149 3.5.5 6.425.5 10.214c0 1.94.97 3.668 2.484 4.878v1.682a.5.5 0 0 0 .634.482l2.363-.657a9.307 9.307 0 0 0 2.63.329a.202.202 0 0 0 .192-.24a6.457 6.457 0 0 1-.097-1.122c0-3.898 3.405-6.637 7.197-7.01a.198.198 0 0 0 .172-.26C15.088 5.48 12 3.5 8.452 3.5M6.855 7.46a1.065 1.065 0 1 1-2.13 0a1.065 1.065 0 0 1 2.13 0m4.258 1.064a1.065 1.065 0 1 0 0-2.129a1.065 1.065 0 0 0 0 2.13"%2F%3E%3Cpath d="M16.79 9.887c3.617 0 6.71 2.461 6.71 5.679c0 1.632-.81 3.084-2.07 4.104v1.362a.5.5 0 0 1-.634.482l-1.947-.541a7.845 7.845 0 0 1-2.059.271c-3.616 0-6.71-2.46-6.71-5.678s3.094-5.679 6.71-5.679m-2.244 4.758a.932.932 0 1 0 0-1.863a.932.932 0 0 0 0 1.863m5.456-.931a.931.931 0 1 1-1.863 0a.931.931 0 0 1 1.863 0"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.whatsapp {
  background-color: #09bc64;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 0a6 6 0 1 1-3.002 11.196l-2.34.778a.5.5 0 0 1-.632-.632l.779-2.339A6 6 0 0 1 6 0m0 1a5 5 0 0 0-4.226 7.674a.5.5 0 0 1 .053.426l-.537 1.61l1.611-.536a.5.5 0 0 1 .426.052A5 5 0 1 0 6 1M3.93 3.003c.099 0 .197 0 .282.004c.09.006.212-.038.333.272c.123.319.418 1.104.455 1.183s.062.172.013.278c-.05.107-.075.173-.148.264c-.074.094-.155.209-.222.28c-.074.079-.15.164-.064.324c.085.158.382.68.821 1.101c.564.543 1.04.712 1.188.791s.234.064.319-.04c.086-.105.368-.464.467-.624c.098-.158.197-.133.332-.079c.135.053.862.437 1.009.516c.148.081.247.121.283.188c.038.066.038.385-.085.755c-.123.373-.712.712-.996.757a1.9 1.9 0 0 1-.931-.064a8 8 0 0 1-.84-.335c-1.482-.69-2.45-2.296-2.523-2.4c-.074-.106-.603-.863-.603-1.646s.38-1.167.516-1.325c.135-.16.296-.2.394-.2'/%3E%3C/svg%3E");
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}