/******************************************************************************
 * CSS for the packaging animation when downloading source code
 *  original codes made by Jhey,
 *  ref. https://codepen.io/jh3y/pen/XWaGEgO
 *****************************************************************************/
.scene,
.scene *:after,
.scene *:before,
.scene * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
.scene {
  transform: translate(-50%, -50%);
  z-index: 1000;
}
:root {
  --steps: 23;
  --delay: 0.3;
  --speed: 0.3;
  --face-1: #be8e64;
  --face-2: #dba776;
  --face-3: #e7b37e;
  --face-4: #f3bf86;
  --face-5: #eab37b;
  --face-6: #7d3712;
  --tape: #b07c54;
  --height: 10;
  --width: 20;
  --depth: 20;
  --packaged: 0;
}
input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
div#package {
  position: fixed;
  transition: all 0.7s ease-in-out;
  opacity: 0;
  top: 65%;
  left: 50%;
}
div#package.fade-in {
  top: 60%;
  opacity: 1;
}
div#package.fade-out {
  top: 55%;
  opacity: 0;
}
#packaging-message {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: Galmuri9, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: #555;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.scene .package__side--main > .package__flap--top:before {
  --bg-step: 9;
}
/**
 * Handles all the steps of packaging up the box. Quite long winded.
 * 1. Start with package rotated so that all sides are flat
 * 2. Extra Side
 * 3. Then Tabbed Side
 * 4. Then Flipped Side and Tab
 * 5. Then go through the bottom flaps in order
 * 6. Tilt the box up.
 * 7. Close the top.
 */
.scene .package__side--extra {
  --step: 0;
}
.scene .package__side--tabbed {
  --step: 1;
}
.scene .package__side--tabbed:after {
  --step: 2;
}
.scene .package__side--flipped {
  --step: 2;
}
.scene .package__side--extra > .package__flap--bottom {
  --step: 3;
}
.scene .package__side--tabbed > .package__flap--bottom {
  --step: 4;
}
.scene .package__side--main > .package__flap--bottom {
  --step: 5;
}
.scene .package__side--flipped > .package__flap--bottom {
  --step: 6;
}
.scene .package__tape--bottom {
  --step: 7;
}
.scene .package__wrapper {
  --step: 8;
}
.scene .package,
.scene .package__shadow {
  --step: 9;
}
.scene .package__icon--html {
  --step: 10;
}
.scene .package__icon--css {
  --step: 11;
}
.scene .package__icon--js {
  --step: 12;
}
.scene .package__side--extra > .package__flap--top {
  --step: 16;
}
.scene .package__side--tabbed > .package__flap--top {
  --step: 17;
}
.scene .package__side--main > .package__flap--top {
  --step: 18;
}
.scene .package__side--flipped > .package__flap--top {
  --step: 19;
}
.scene .package__tape--top {
  --step: 20;
}
.scene .package__branding,
.scene .package__label,
.scene .package__branding--shadow,
.scene .package__label--shadow {
  --step: 21;
}
.scene .package__label:after {
  --step: 22;
}
.scene .package__label:before {
  --step: 23;
}
.scene .package__wrapper {
  transform: rotateX(-24deg) rotateY(-32deg) rotateX(90deg);
}
.package,
.package__wrapper,
.package__flap,
.package__flap--top,
.package__flap--bottom,
.package__side,
.package__side:after,
.package__icon,
.package__tape--top,
.package__tape--bottom,
.package__branding,
.package__label,
.package__label:after,
.package__label:before,
.package__shadow,
.package__label--shadow,
.package__branding--shadow {
  transition: transform calc(var(--speed, 0.2) * 1s) calc((var(--step, 1) * var(--delay, 1)) * 1s), opacity 0.1s calc(((var(--step, 1) * var(--delay, 1)) + ((var(--speed) - 0.1) * (1 - var(--packaged)))) * 1s), height calc(var(--speed, 0.2) * 1s), width calc(var(--speed, 0.2) * 1s);
  transition-timing-function: ease-in-out;
}
.package {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--packaged, 0)) * 90deg));
}
.package__shadow {
  background: #595959;
  opacity: 0.75;
  position: absolute;
  height: 99%;
  width: 99%;
  top: 0;
  left: 50%;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) scaleY(var(--packaged));
}
.package__tape {
  background: var(--tape);
  height: 4vmin;
  width: 94%;
  left: 50%;
  position: absolute;
  transform-origin: 0 50%;
  transform: translate3d(-50%, var(--offset-y), 2px) scaleX(var(--packaged, 0));
}
.package__tape--bottom {
  --offset-y: 50%;
  bottom: 100%;
}
.package__tape--top {
  --offset-y: -50%;
  top: 100%;
}
.package__direction {
  display: inline-flex;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.75vmin;
  transform: rotate(180deg) translate3d(0, 0, 1px);
  position: absolute;
  top: 0;
  right: 0;
  padding: 5%;
  justify-content: flex-end;
  color: #1a1a1a;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.package__direction img {
  fill: currentColor;
  width: 8%;
  min-width: 2vmin;
}
.package__wrapper {
  transform: translate3d(0, calc(((1 - var(--packaged, 0)) * var(--height)) * 1vmin), calc(var(--height) * -0.5vmin));
}
.package__label {
  height: 20%;
  width: 30%;
  background: #fafafa;
  position: absolute;
  right: 10%;
  bottom: 20%;
  border-radius: 5%;
  opacity: var(--packaged);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotate(180deg) translate3d(0, 0, calc((1 - (var(--packaged, 0))) * 5vmin));
}
.package__label--shadow {
  transform: rotate(180deg) translate3d(0, 0, 0) scale(var(--packaged));
  background: #1a1a1a;
}
.package__label:after,
.package__label:before {
  content: '';
  position: absolute;
  height: 20%;
  width: var(--line-length, 70%);
  top: var(--line, 20%);
  left: 10%;
  background: #1a1a1a;
  transform-origin: 0 50%;
  transform: scaleX(var(--packaged, 0));
}
.package__label:before {
  --line: 50%;
  --line-length: 40%;
}
.package__branding {
  height: 30%;
  position: absolute;
  bottom: 10%;
  left: 10%;
  transform: rotate(-160deg) translate3d(0, 0, calc((1 - (var(--packaged, 0))) * 5vmin));
  opacity: var(--packaged);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.package__branding--shadow {
  transform: rotate(-160deg) translate3d(0, 0, 0) scale(var(--packaged));
  filter: brightness(0);
  opacity: var(--packaged);
}
.package__icon {
  --speed: 1;
  position: absolute;
  top: 50%;
  left: 30%;
  width: 90%;
  transform: translate(-50%, -50%) translate3d(calc(var(--x, 0) * 1%), calc((((1 - var(--packaged, 0)) * (var(--y, 0) * (max(var(--height), var(--depth), var(--width)))))) * -1vmin), calc(var(--z, 0) * 1vmin));
  opacity: var(--packaged);
}
.package__icon--js {
  --x: 60;
  --y: 1.4;
  --z: 0;
}
.package__icon--html {
  --x: 0;
  --y: 1.6;
  --z: -3;
}
.package__icon--css {
  --x: -50;
  --y: 1.2;
  --z: 3;
}
.package__content {
  width: calc(min(var(--height), var(--width)) * 1vmin);
  height: calc(var(--height) * 1vmin);
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0) rotateX(-90deg) rotateY(45deg);
}
.package__flap {
  width: 99.5%;
  height: 49.5%;
  background: var(--face-4);
  position: absolute;
  left: 50%;
}
.package__flap--bottom {
  transform-origin: 50% 100%;
  bottom: 100%;
  transform: translate(-50%, 0) rotateX(calc(var(--packaged, 0) * 90deg));
}
.package__flap--top {
  top: 100%;
  transform-origin: 50% 0%;
  transform: translate(-50%, 0) rotateX(calc(var(--packaged, 0) * -90deg));
}
.package__side {
  background: hsla(var(--hue, 0), 30%, 30%, 0.3);
  height: calc(var(--height) * 1vmin);
  position: absolute;
  top: 50%;
}
.package__side--main > .package__flap--top:before {
  --bg-step: 13;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--face-2);
  opacity: var(--packaged);
  transition: opacity calc(var(--speed, 0.2) * 1s) calc((var(--bg-step, 1) * var(--delay, 1)) * 1s);
  transition-timing-function: ease-in-out;
}
.package__side--extra > .package__flap--top,
.package__side--tabbed > .package__flap--top {
  top: 99%;
}
.package__side--extra > .package__flap--bottom,
.package__side--tabbed > .package__flap--bottom {
  bottom: 99%;
}
.package__side--extra > .package__flap.package__flap--top {
  background: #edb678;
}
.package__side--extra > .package__flap.package__flap--bottom {
  background: #efc08a;
}
.package__side--tabbed > .package__flap.package__flap--bottom {
  background: #ebbb84;
}
.package__side--flipped > .package__flap.package__flap--bottom {
  background: #f2c592;
}
.package__side--main > .package__flap.package__flap--top {
  background: #efbb80;
}
.package__side--main {
  --hue: 2;
  background: var(--face-5);
  left: 50%;
  transform: translate(-50%, -50%) rotateX(90deg) rotateY(0deg) translate3d(0, 0, calc(var(--depth) * 0.5vmin)) translate(0, 50%);
  width: calc(var(--width) * 1vmin);
}
.package__side--main > .package__flap {
  height: calc(var(--depth) * 0.495vmin);
}
.package__side--tabbed {
  --hue: 90;
  top: 0;
  left: 100%;
  background: var(--face-2);
  width: calc(var(--depth) * 1vmin);
  transform-origin: 0% 50%;
  transform: rotateY(calc(var(--packaged, 0) * 90deg));
}
.package__side--tabbed > .package__flap {
  height: calc(var(--width) * 0.495vmin);
  background: var(--face-3);
}
.package__side--tabbed:after {
  content: '';
  position: absolute;
  left: 99.5%;
  top: 0;
  height: 100%;
  width: 10%;
  background: var(--face-3);
  clip-path: polygon(0 0%, 100% 20%, 100% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0%, 100% 20%, 100% 80%, 0 100%);
  transform-origin: 0% 50%;
  transform: rotateY(calc(var(--packaged, 0) * 91deg));
}
.package__side--extra {
  --hue: 120;
  right: 100%;
  top: 0;
  background: var(--face-2);
  width: calc(var(--depth) * 1vmin);
  transform-origin: 100% 50%;
  transform: rotateY(calc(var(--packaged, 0) * -90deg));
}
.package__side--extra > .package__flap {
  height: calc(var(--width) * 0.495vmin);
  background: var(--face-3);
}
.package__side--flipped {
  --hue: 320;
  background: var(--face-3);
  top: 0;
  right: 100%;
  width: calc(var(--width) * 1vmin);
  transform-origin: 100% 50%;
  transform: rotateY(calc(var(--packaged, 0) * -90deg));
}
.package__side--flipped > .package__flap {
  height: calc(var(--depth) * 0.495vmin);
  background: var(--face-4);
}

/** end of packaging animation CSS **/

:root {
    --byeol-white: #FFFFFF;
    --byeol-white2: #E9EBF2;
    --byeol-night: #0B1C26;
    --byeol-night2: #112A40;
    --byeol-night3: #2E4559;
    --byeol-grass: #6AB04B;
    --byeol-point: #4189A6;
    --byeol-moon: #E0B88D;
    --byeol-nebular: #ca5fa4;
    --byeol-nebular2: #F2B6D7;
    --byeol-handheld-frame-light: #EFEFEF;
    --byeol-handheld-frame-bump-light: #D8D8D8;
    --byeol-handheld-frame-dark: #2d3943;
    --byeol-handheld-frame-bump-dark: #1a293d;
}



div#download {
  position: relative;
  margin-top: 200px;
  display: flex;
  font-family: Galmuri9;
  align-items: center;
  margin-bottom: 150px;
  justify-content: center;
}

button#download-button {
  position: relative;
  cursor: pointer;
  border: none;
  display: inline-flex;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 130px;
  color: var(--byeol-handheld-text-light);
  background-color: var(--byeol-handheld-accent-light);
  transition: all 0.3s ease;

  background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
  color: #fff;
  overflow: hidden;
}
button#download-button:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 2s ease-in-out infinite;
}
button#download-button:hover {
  opacity: 0.7;
}
button#download-button:active {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
            -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.2),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@keyframes shiny-btn1 {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

details {
  position: relative;
}
summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: 13px;
  height: 37px;
  color: var(--byeol-handheld-text-light);
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}

html summary {
  background-color: var(--byeol-handheld-frame-bump-light);
}
html summary:hover {
  background-color: var(--byeol-handheld-frame-light);
}
html summary:active {
  background-color: var(--byeol-night3);
}
html.dark-mode summary {
  background-color: var(--byeol-handheld-frame-bump-dark);
}
html.dark-mode summary:hover {
  background-color: var(--byeol-handheld-frame-dark);
}
html.dark-mode summary:active {
  background-color: var(--byeol-white2);
}

summary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
summary:active {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
            -4px -4px 6px 0 rgba(116, 125, 136, .2),
  inset -4px -4px 6px 0 rgba(255,255,255,.2),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
div#download-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: var(--byeol-handheld-frame-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 160px;
  overflow: hidden;
}
div#download-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--byeol-handheld-text-light);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
div#download-dropdown a:hover {
  background-color: var(--byeol-handheld-frame-hover-light);
}

.feature {
  padding: 15px;
  margin-bottom: 15px;
}

.feature-title {
  margin-bottom: 15px;
}

@media screen and (max-width: 499px) {
  .feature-title {
    font-size: 20px;
  }
  .feature-description {
    font-size: 15px;
  }
}

@media screen and (min-width: 500px) {
  .feature-title {
    font-size: 26px;
  }
  .feature-description {
    font-size: 18px;
  }
}

@media screen and (min-width: 700px) {
  .feature-title {
    font-size: 28px;
  }
  .feature-description {
    font-size: 20px;
  }
}

@media screen and (min-width: 900px) {
  .feature-title {
    font-size: 32px;
  }
  .feature-description {
    font-size: 24px;
  }
}


html .feature {
  background-color: var(--byeol-white2);
}
html.dark-mode .feature {
  background-color: var(--byeol-handheld-frame-bump-dark);
}