@font-face {
  font-family: 'KIMM_Bold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
  font-style: normal;
}
@property --glow-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #ADF5FF;
}
:root {
  --gap: 0.125rem;
  --triangle-base: 3rem;
  --triangle-base-height: calc(1.733 * var(--triangle-base));
  --triangle-width: calc(var(--triangle-base) - var(--gap));
  --triangle-height: calc(var(--triangle-base-height) - var(--gap));
}

html, body {
  background: #0D0C1D;
  height: 100%;
  width: 100%;
  font-family: 'KIMM_Bold';
  text-align: center;
}

.wrap {
  position: relative;
  background: radial-gradient(#21585f, #161B33);
  background-size: 400% 400%;
  background-position: 100% 100%;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: calc(var(--gap) * 2);
  overflow: hidden;
  animation: bg-animation 20s alternate infinite;
}

.con {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.2rem;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
h1 {
  padding: 1rem;
  background: rgba(13, 12, 29, 0.9);
  border-radius: 5rem;
  box-shadow: 0 0 1rem 1rem rgba(13, 12, 29, 0.9);
  color: white;
  font-size: 3rem;
}
.btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(-1px);
  pointer-events: none;
  transition: filter .3s ease;
  background: linear-gradient(123deg, #fa6f00, #e433ff 50%, #8575ff);
  background-clip: content-box;
  padding: 1px;
}
.btn:before:active {
  box-shadow: none
}
.btn {
  padding: 25px 60px;
  background: #fff;
  color: #23303D;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1.85rem;
  position: relative;
  transform-style: preserve-3d;
}
.btn:hover:before {
  filter: blur(15px)
}

.btn:active:before {
  filter: blur(8px)
}

@media (max-width: 767px) {
  h1 {font-size: 2rem;}
  .btn {
    font-size: 1rem;
    padding: 15px 60px;
  }
}

@media (max-width: 374px) {
  h1 {font-size: 1.5rem;}
  .con {
    gap: 0.75rem;
  }
  .btn {
    font-size: 1rem;
    padding: 15px 40px;
  }
}

@keyframes bg-animation {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 400% 400%;
  }
}
#glow {
  position: absolute;
  width: 50vw;
  height: 100vw;
  background: radial-gradient(circle closest-side, var(--glow-color), transparent);
  animation: glow-animation 5.2s ease infinite alternate;
  transform: translate(-50%, -50%);
}

@keyframes glow-animation {
  from {
    --glow-color: #FD9831;
    transform: translate(-50%, -50%) scale(0.5);
  }
  to {
    --glow-color: #c56300;
    transform: translate(-50%, -50%) scale(1) rotate(90deg);
  }
}
.triangle-container {
  display: grid;
  grid-template-columns: repeat(var(--columns), calc(var(--triangle-base) * 2 + var(--gap)));
  width: 100%;
  height: 100%;
}

.triangle-set {
  display: inline-block;
  position: relative;
  width: calc(var(--triangle-base) * 2 + var(--gap));
  height: var(--triangle-base-height);
}
.triangle-set--offset {
  transform: translateX(calc(-1 * var(--triangle-base) - 0.5 * var(--gap)));
}
.triangle-set::before, .triangle-set::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: var(--gap);
  border-right: var(--triangle-width) solid transparent;
  border-left: var(--triangle-width) solid transparent;
}
.triangle-set::before {
  left: calc(-1 * var(--triangle-base));
  border-bottom: var(--triangle-height) solid #0D0C1D;
}
.triangle-set::after {
  right: calc(var(--gap) * 2.5);
  border-top: var(--triangle-height) solid #0D0C1D;
}