html,
body {
  background-image: url("https://bog-body.neocities.org/bookpage/bookshelf.png");
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
p {
  padding: 20px;
}

#back{
  display: block;
  padding: 200px;
  background-image: url("https://bog-body.neocities.org/index/back.png");
  transition: transform .2s;
  position: absolute;
  left: -32%;
  top: -119%;
  scale: 25%;
  width: 50%;
  height: 200%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 5px auto;
}

.content {
  background-image: url("https://bog-body.neocities.org/bookpage/background.png");
  height: 766px;
  width: 1366px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 20px !important;
  margin: 0 auto;
}

#text{
  background-image: url("https://bog-body.neocities.org/bookpage/text.png");
  height: 410px;
  width: 1148px;
  margin-top: 277px;
  margin-left: 95.5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 99.8%;
  padding: 20px !important;
}

/* HTML: <div class="ribbon">Your text content</div> */

#result {
  --s: 1.8em; /* the ribbon size */
  --d: .4em;  /* the depth */
  --c: .8em;  /* the cutout part */
  
  padding: var(--d) calc(var(--s) + .5em) 0;
  line-height: 1.8;
  background:
    conic-gradient(from  45deg at left  var(--s) top var(--d),
     #0008 12.5%,#0000 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(from -45deg at right var(--s) top var(--d),
     #0004 62.5%,#0000 0 87.5%,#0008 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: #F5DEB3;
  position: relative;
  left: 30%;
  display: inline-block;
; /* the main color */
  width: fit-content;
}

@layer fantasy-btn, fantasy-presets;

@layer fantasy-presets {
  .fantasy-bone-n-coper {
    cursor: pointer;
    left: 30%;
    margin: .2%;

    --text-color: #aa9b79;

    --text-shadow: calc(1.5px * var(--scale) / 4.5)
      calc(-1.5px * var(--scale) / 4.5)
      calc(1.5px * var(--scale) / 4.5)
      #fffcf2,
      calc(-1.5px * var(--scale) / 4.5)
      calc(1.5px * var(--scale) / 4.5)
      calc(1.5px * var(--scale) / 4.5)
      #160500;

    --border-bg: linear-gradient(
      to bottom,
      #bdab8c,
      #aa9b79 49%,
      #735b41 51%,
      #766652
    );
    --inlay-hover-opacity: 0.75;
    --border-hover-opacity: 0.75;
    --border-focus-bg: repeating-conic-gradient(
      #bdab8c 0deg 30deg,
      #766652 30deg 60deg
    );

    --inlay-bg: radial-gradient(
      at center 150%,
      #fffcf2, transparent 35%
    ) 50% 0% / 150% 25% no-repeat,
    radial-gradient(
      at center -25%,
      #501608, transparent 35%
    ) 50% 100% / 150% 25% no-repeat,
    linear-gradient(
      to bottom,
      #2c201b,
      #895648 24%,
      #422419 26% 49%,
      #291208 49% 74%,
      #160500 76%,
      #1a0801
    );
  }
}

@layer fantasy-btn {
  [class*="fantasy-btn"] {
    isolation: isolate;
    position: relative;
    box-sizing: border-box;
    background: transparent;
    outline: none;
    border: none;
    --s: (var(--scale) / 4.5);
    font-size: calc(60px * var(--s));
    font-family: serif;
    min-width: calc(280px * var(--s));
    min-height: calc(200px * var(--s));
    padding-inline: calc(95px * var(--s));
    padding-block: calc(51px * var(--s));
  }
  .fantasy-btn-xs { --scale: 0.5; }
  .fantasy-btn-sm { --scale: 0.75; }
  .fantasy-btn, .fantasy-btn-md { --scale: 1; }
  .fantasy-btn-lg { --scale: 1.25; }
  .fantasy-btn-xl { --scale: 1.5; }
  .fantasy-btn-2xl { --scale: 2; }
  .fantasy-btn-3xl { --scale: 3; }
  
  [class*="fantasy-btn"] {
    --_text-base-color: var(--text-color);
    --_text-hover-color: var(--text-hover-color, var(--_text-base-color));
    --_text-focus-color: var(--text-focus-color, var(--_text-hover-color));
    --_text-active-color: var(--text-active-color, var(--_text-focus-color));
    --_text-state-color: var(--_text-base-color);
    color: var(--_text-state-color);
    --_text-base-shadow: var(--text-shadow);
    --_text-hover-shadow: var(--text-hover-shadow, var(--_text-base-shadow));
    --_text-focus-shadow: var(--text-focus-shadow, var(--_text-hover-shadow));
    --_text-active-shadow: var(--text-active-shadow, var(--_text-focus-shadow));
    --_text-state-shadow: var(--_text-base-shadow);
    text-shadow: var(--_text-state-shadow);

    --_outline-base-color: var(--outline-color, currentColor);
    --_outline-hover-color: var(--outline-hover-color, var(--_outline-base-color));
    --_outline-focus-color: var(--outline-focus-color, var(--_outline-hover-color));
    --_outline-active-color: var(--outline-active-color, var(--_outline-focus-color));
    --_outline-state-color: var(--_outline-base-color);

    --_outline-base-size: var(--outline-size, 0px);
    --_outline-hover-size: var(--outline-hover-size, calc(0px * var(--s)));
    --_outline-focus-size: var(--outline-focus-size, var(--_outline-hover-size));
    --_outline-active-size: var(--outline-active-size, var(--_outline-focus-size));
    --_outline-state-size: var(--_outline-base-size);

    --_outline-base-offset: var(--outline-offset, 0px);
    --_outline-hover-offset: var(--outline-hover-offset, calc(15px * var(--s)));
    --_outline-focus-offset: var(--outline-focus-offset,
      var(--_outline-hover-offset)
    );
    --_outline-active-offset: var(--outline-active-offset,
      var(--_outline-focus-offset)
    );
    --_outline-state-offset: var(--_outline-base-offset);
    
    --_outline-base-style: var(--outline-style, none);
    --_outline-hover-style: var(--outline-hover-style, var(--_outline-base-style));
    --_outline-focus-style: var(--outline-focus-style, solid);
    --_outline-active-style: var(--outline-active-style, var(--_outline-focus-style));
    --_outline-state-style: var(--_outline-base-style);
    
    outline: var(--_outline-state-size) var(--_outline-state-style) var(--_outline-state-color);
    outline-offset: var(--_outline-state-offset);
  }
  .fantasy-btn-xl,
  .fantasy-btn-2xl,
  .fantasy-btn-3xl {
    --_outline-hover-offset: var(--outline-hover-offset,
      calc(-68px * var(--s))
    );
  }
  [class*="fantasy-btn"]:hover {
    --_text-state-color: var(--_text-hover-color);
    --_text-state-shadow: var(--_text-hover-shadow);
    --_outline-state-size: var(--_outline-hover-size);
    --_outline-state-style: var(--_outline-hover-style);
    --_outline-state-color: var(--_outline-hover-color);
    --_outline-state-offset: var(--_outline-hover-offset);
  }
  [class*="fantasy-btn"]:focus {
    --_text-state-color: var(--_text-focus-color);
    --_text-state-shadow: var(--_text-focus-shadow);
    --_outline-state-size: var(--_outline-focus-size);
    --_outline-state-style: var(--_outline-focus-style);
    --_outline-state-color: var(--_outline-focus-color);
    --_outline-state-offset: var(--_outline-focus-offset);
  }
  [class*="fantasy-btn"]:active {
    --_text-state-color: var(--_text-active-color);
    --_text-state-shadow: var(--_text-active-shadow);
    --_outline-state-size: var(--_outline-active-size);
    --_outline-state-style: var(--_outline-active-style);
    --_outline-state-color: var(--_outline-active-color);
    --_outline-state-offset: var(--_outline-active-offset);
  }

  [class*="fantasy-btn"]::after {
    --_border-base-opacity: var(--border-opacity, 1);
    --_border-hover-opacity: var(--border-hover-opacity,
      var(--_border-base-opacity)
    );
    --_border-focus-opacity: var(--border-focus-opacity,
      var(--_border-hover-opacity)
    );
    --_border-active-opacity: var(--border-active-opacity,
      var(--_border-focus-opacity)
    );
    --_border-state-opacity: var(--_border-base-opacity);

    --_border-base-bg: var(--border-bg, currentColor);
    --_border-hover-bg: var(--border-hover-bg, var(--_border-base-bg));
    --_border-focus-bg: var(--border-focus-bg, var(--_border-hover-bg));
    --_border-active-bg: var(--border-active-bg, var(--_border-focus-bg));

    --_border-state-bg: var(--_border-base-bg);
  }
  [class*="fantasy-btn"]:hover::after {
    --_border-state-opacity: var(--_border-hover-opacity);
    --_border-state-bg: var(--_border-hover-bg);
  }
  [class*="fantasy-btn"]:focus::after {
    --_border-state-opacity: var(--_border-focus-opacity);
    --_border-state-bg: var(--_border-focus-bg);
  }
  [class*="fantasy-btn"]:active::after {
    --_border-state-opacity: var(--_border-active-opacity);
    --_border-state-bg: var(--_border-active-bg);
  }

  [class*="fantasy-btn"]::before {
    --_inlay-base-opacity: var(--inlay-opacity, 1);
    --_inlay-hover-opacity: var(--inlay-hover-opacity,
      var(--_inlay-base-opacity)
    );
    --_inlay-focus-opacity: var(--inlay-focus-opacity,
      var(--_inlay-hover-opacity)
    );
    --_inlay-active-opacity: var(--inlay-active-opacity,
      var(--_inlay-focus-opacity)
    );
    --_inlay-state-opacity: var(--_inlay-base-opacity);

    --_inlay-base-bg: var(--inlay-bg, #8888);
    --_inlay-hover-bg: var(--inlay-hover-bg, var(--_inlay-base-bg));
    --_inlay-focus-bg: var(--inlay-focus-bg, var(--_inlay-hover-bg));
    --_inlay-active-bg: var(--inlay-active-bg, var(--_inlay-focus-bg));

    --_inlay-state-bg: var(--_inlay-base-bg);
  }
  [class*="fantasy-btn"]:hover::before {
    --_inlay-state-opacity: var(--_inlay-hover-opacity);
    --_inlay-state-bg: var(--_inlay-hover-bg);
  }
  [class*="fantasy-btn"]:focus::before {
    --_inlay-state-opacity: var(--_inlay-focus-opacity);
    --_inlay-state-bg: var(--_inlay-focus-bg);
  }
  [class*="fantasy-btn"]:active::before {
    --_inlay-state-opacity: var(--_inlay-active-opacity);
    --_inlay-state-bg: var(--_inlay-active-bg);
  }

  [class*="fantasy-btn"]::before,
  [class*="fantasy-btn"]::after {
    content: "";
    position: absolute;
    inset: -5px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: -1;
  }

  [class*="fantasy-btn"]::before {
    background: var(--_inlay-state-bg);
    opacity: var(--_inlay-state-opacity);
    clip-path: polygon(
      calc(50px * var(--s)) calc(82px * var(--s)),
      calc(114px * var(--s)) calc(18px * var(--s)),
      calc(100% - 114px * var(--s)) calc(18px * var(--s)),
      calc(100% - 50px * var(--s)) calc(82px * var(--s)),
      calc(100% - 50px * var(--s)) calc(100% - 82px * var(--s)),
      calc(100% - 114px * var(--s)) calc(100% - 18px * var(--s)),
      calc(114px * var(--s)) calc(100% - 18px * var(--s)),
      calc(50px * var(--s)) calc(100% - 82px * var(--s))
    );
  }

  [class*="fantasy-btn"]::after {
    background: var(--_border-state-bg);
    opacity: var(--_border-state-opacity);
    clip-path: polygon(
      /* home */
      calc(37px * var(--s)) calc(44px * var(--s)),
      /* jump union point */
      calc(52px * var(--s)) calc(29px * var(--s)),
      calc(61px * var(--s)) calc(18px * var(--s)),
      calc(82.5px * var(--s)) calc(39.5px * var(--s)),
      calc(61px * var(--s)) calc(61px * var(--s)),
      0px 0px,
      calc(77px * var(--s)) 0px,
      calc(90px * var(--s)) calc(13px * var(--s)),
      calc(103px * var(--s)) 0px,

      calc(100% - 103px * var(--s)) 0px,
      calc(100% - 90px * var(--s)) calc(13px * var(--s)),
      calc(100% - 77px * var(--s)) 0px,
      100% 0px,
      calc(100% - 61px * var(--s)) calc(61px * var(--s)),
      calc(100% - 82.5px * var(--s)) calc(39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(18px * var(--s)),

      /*... -x union point, jump ...*/
      calc(100% - 52px * var(--s)) calc(29px * var(--s)),
      calc(100% - 37px * var(--s)) calc(44px * var(--s)),

      calc(100% - 24.5px * var(--s)) calc(56.5px * var(--s)),
      calc(100% - 32.5px * var(--s)) calc(64.5px * var(--s)),

      calc(100% - 32.5px * var(--s)) calc(100% - 64.5px * var(--s)),
      calc(100% - 24.5px * var(--s)) calc(100% - 56.5px * var(--s)),

      calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),
      calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),

      calc(100% - 61px * var(--s)) calc(100% - 18px * var(--s)),
      calc(100% - 82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 61px * var(--s)),
      100% 100%,

      calc(100% - 77px * var(--s)) 100%,
      calc(100% - 90px * var(--s)) calc(100% - 13px * var(--s)),
      calc(100% - 103px * var(--s)) 100%,

      calc(103px * var(--s)) 100%,
      calc(90px * var(--s)) calc(100% - 13px * var(--s)),
      calc(77px * var(--s)) 100%,

      0px 100%,
      calc(61px * var(--s)) calc(100% - 61px * var(--s)),
      calc(82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 18px * var(--s)),

      calc(52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(37px * var(--s)) calc(100% - 44px * var(--s)),

      calc(24.5px * var(--s)) calc(100% - 56.5px * var(--s)),
      calc(32.5px * var(--s)) calc(100% - 64.5px * var(--s)),

      calc(32.5px * var(--s)) calc(64.5px * var(--s)),
      calc(24.5px * var(--s)) calc(56.5px * var(--s)),

      /* first point in the path, time to CCW inner path */
      calc(37px * var(--s)) calc(44px * var(--s)),
      /* w = ~8 */
      calc(45px * var(--s)) calc(52px * var(--s)),
      calc(41px * var(--s)) calc(56px * var(--s)),
      calc(50px * var(--s)) calc(66px * var(--s)),
      calc(40.5px * var(--s)) calc(75.5px * var(--s)),

      calc(40.5px * var(--s)) calc(100% - 75.5px * var(--s)),
      calc(50px * var(--s)) calc(100% - 66px * var(--s)),
      calc(41px * var(--s)) calc(100% - 56px * var(--s)),
      calc(45px * var(--s)) calc(100% - 52px * var(--s)),

      calc(37px * var(--s)) calc(100% - 44px * var(--s)),

      calc(52px * var(--s)) calc(100% - 29px * var(--s)),
      calc(59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 35px * var(--s)),
      calc(65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(61px * var(--s)) calc(100% - 44px * var(--s)),
      calc(25px * var(--s)) calc(100% - 8px * var(--s)),
      calc(72.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(90px * var(--s)) calc(100% - 25.5px * var(--s)),
      calc(107.5px * var(--s)) calc(100% - 8px * var(--s)),

      calc(100% - 107.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 90px * var(--s)) calc(100% - 25.5px * var(--s)),
      calc(100% - 72.5px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 25px * var(--s)) calc(100% - 8px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 44px * var(--s)),
      calc(100% - 65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(100% - 35px * var(--s)),
      calc(100% - 59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
      calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),

      calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),

      calc(100% - 45px * var(--s)) calc(100% - 52px * var(--s)),
      calc(100% - 41px * var(--s)) calc(100% - 56px * var(--s)),
      calc(100% - 50px * var(--s)) calc(100% - 66px * var(--s)),
      calc(100% - 40.5px * var(--s)) calc(100% - 75.5px * var(--s)),

      calc(100% - 40.5px * var(--s)) calc(75.5px * var(--s)),
      calc(100% - 50px * var(--s)) calc(66px * var(--s)),
      calc(100% - 41px * var(--s)) calc(56px * var(--s)),
      calc(100% - 45px * var(--s)) calc(52px * var(--s)),

      calc(100% - 37px * var(--s)) calc(44px * var(--s)),

      calc(100% - 52px * var(--s)) calc(29px * var(--s)),
      calc(100% - 59.5px * var(--s)) calc(36.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(35px * var(--s)),
      calc(100% - 65.5px * var(--s)) calc(39.5px * var(--s)),
      calc(100% - 61px * var(--s)) calc(44px * var(--s)),
      calc(100% - 25px * var(--s)) calc(8px * var(--s)),
      calc(100% - 72.5px * var(--s)) calc(8px * var(--s)),
      calc(100% - 90px * var(--s)) calc(25.5px * var(--s)),
      calc(100% - 107.5px * var(--s)) calc(8px * var(--s)),

      calc(107.5px * var(--s)) calc(8px * var(--s)),
      calc(90px * var(--s)) calc(25.5px * var(--s)),
      calc(72.5px * var(--s)) calc(8px * var(--s)),
      calc(25px * var(--s)) calc(8px * var(--s)),
      calc(61px * var(--s)) calc(44px * var(--s)),
      calc(65.5px * var(--s)) calc(39.5px * var(--s)),
      calc(61px * var(--s)) calc(35px * var(--s)),
      calc(59.5px * var(--s)) calc(36.5px * var(--s)),
      /* union point */
      calc(52px * var(--s)) calc(29px * var(--s)),
      /* jump home */
      calc(37px * var(--s)) calc(44px * var(--s))
    );
  }