@font-face {
  font-family: "kb";
  src: 
    url('/font/fk.woff2') format("woff2"),
    url('/font/fk.woff') format("woff"),
}
/* 用f-前缀来构建命名空间，避免冲突 */
.f-card {
  color: white;
  background: transparent;
  border: 2px solid #ff6b00;
}

.f-card:hover {
  border-radius: 12px;
  background-color: #ff6b00;
  scale: 0.95;
  rotate: 8deg;
  box-shadow: 0px 3px 187.5px 7.5px rgba(255, 107, 0, 0.4);
}

/* 毛玻璃模糊效果 */
.f-blur-card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blue(8px);
  background-color: rgba(255, 255, 255, 0.5);
}

.f-colorful, h1, h2 {
  background-image: linear-gradient(45deg, #e44219, #005ff3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f-colorful-text {
  background: blue url("https://afoo.me/posts/img/BF4768EE8B110260_5547_2.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.f-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.f-center-fullpage,.f-center-onepage,.f-center-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.f-bg-gradient {
  background: linear-gradient(63deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
}

.f-glow {
  -webkit-box-shadow:0px 0px 105px 45px rgba(45,255,196,0.9);
  -moz-box-shadow: 0px 0px 105px 45px rgba(45,255,196,0.9);
  box-shadow: 0px 0px 105px 45px rgba(45,255,196,0.9);
}

.f-text-underline {
  text-decoration-line: underline;
  text-decoration-style: "solid";
  text-decoration-color: rgba(232,54,0,1);
  text-decoration-thickness: 20px;
}

/* .f-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  background-color: #3e68ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
  padding: 0.25em 0.75em;
  min-width: 10ch;
  min-height: 44px;
  text-align: center;
  line-height: 1.1;
  transition: 220ms all ease-in-out;
  text-decoration: none;
  font-size: 1.5rem;
  box-sizing: border-box;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  cursor: pointer;
} */

/* 
<button class="f-button">
  Download
</button>
*/
.f-button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 4px;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
}

.f-button:hover {
  background: blue;
}

/* sparkle button */
/*
<button class="f-magic-button">
    <svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" class="f-magic-sparkle">
        <path d="M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z"></path>
    </svg>

    <span class="f-magic-text">Generate</span>
</button>
*/
.f-magic-button {
  border: none;
  width: 15em;
  height: 5em;
  border-radius: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #1C1A1C;
  cursor: pointer;
  transition: all 450ms ease-in-out;
}

.f-magic-sparkle {
  fill: #AAAAAA;
  transition: all 800ms ease;
}

.f-magic-text {
  font-weight: 600;
  color: #AAAAAA;
  font-size: medium;
}

.f-magic-button:hover {
  background: linear-gradient(0deg,#A47CF3,#683FEA);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 180px 0px #9917FF;
  transform: translateY(-2px);
}

.f-magic-button:hover .f-magic-text {
  color: white;
}

.f-magic-button:hover .f-magic-sparkle {
  fill: white;
  transform: scale(1.2);
} 

/* <div id="Armageddon" class="armageddon" style="display: none;"></div> */
.armageddon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 9999; 
  background-image: url('https://afoo.me/images/Armageddon.webp');
  background-repeat: repeat;
}

.f-overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1111; 
  cursor: pointer; 
  background-image: url('https://afoo.me/hero3/50.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.f-invisible {
  position: absolute;
  left: -9999px;
}