@font-face {
  font-family: 'Charter';
  src: url('../font/Charter/charter_regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charter';
  src: url('../font/Charter/charter_italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Charter';
  src: url('../font/Charter/charter_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../font/InterWeb/Inter-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../font/InterWeb/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@keyframes animateBg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.text-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stage {
  animation: animateBg 200s infinite linear;
  background-image: linear-gradient(45deg, #ff9999, #ffb399, #ffcc99, #ffe699, #ffff99, #e6ff99, #ccff99, #b3ff99, #99ff99, #99ffb3, #99ffcc, #99ffe6, #99ffff, #99e6ff, #99ccff, #99b3ff, #9999ff, #b399ff, #cc99ff, #e699ff, #ff99ff, #ff99e6, #ff99cc, #ff99b3, #ff9999, #ffb399, #ffcc99, #ffe699, #ffff99, #e6ff99, #ccff99, #b3ff99, #99ff99, #99ffb3, #99ffcc, #99ffe6, #99ffff, #99e6ff, #99ccff, #99b3ff);
  background-size: 300% 100%;
}

.cp {
  padding: 0 40px;
}

body {
  margin: 40px auto;
  max-width: 950px;
  line-height: 1.6;
  color: #444;
  font-family: 'Charter';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
}

header h1 {
  margin: 0;
  padding: 20px 0 0 0;
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-size: 120px;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-size: 34px;
}

h3 {
  margin: 0;
  padding: 10px 0 0 0;
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
}

.logo {
  height: 100px;
  padding: 80px 0 20px 0;
}

figcaption {
  text-align: center;
  font-family: 'Charter';
  font-weight: normal;
  font-style: italic;
  font-size: 21px;
}

footer {
  padding-top: 80px;
  font-size: 17px;
}

.no_underline {
  text-decoration: none;
}