body {
	background-image: url("https://bog-body.neocities.org/bookpage/desk.png");
	background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  font-family: courier;
  image-rendering: pixelated;
  font-size: 1vw;
}
span{
  color: #355acb;
  font-family: 'stamp';
  font-size: 1.2vw;
}
p{
  text-align: center;
}

/*back button*/
.home{
  display: block;
  position: absolute;
  top: 4.5vw;
  left: 3%;
  transform: translate(-50%, -40%);
  width: 3vw;
}
.home span {
			opacity: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: calc(1.5rem);
			font-family: courier;
			color: #D46A6A;
			line-height: 1;
			filter: drop-shadow(1px 1px 0 white)
				drop-shadow(-1px 1px 0 white) 
				drop-shadow(1px -1px 0 white) 
				drop-shadow(-1px -1px 0 white);
			text-transform: uppercase;
			z-index: 99;
			width: fit-content;
			height: fit-content;
			display: inline-block;
			position: absolute;
		}
.home:hover img {
			 transform: rotate(20deg);
		}
.home:hover span {
			opacity: 1;
    }
    
/*content*/
h1{
  position: absolute;
  left: 12vw;
  margin: 0;
  top: 2vh;
  font-size: 5.5vw;
  font-family: 'stamp';
  color: #3e1b13;
}

.count{
  position: absolute;
  left: 13vw;
  margin: 0;
  top: 12vh;
  font-size: 2vw;
  color: #3e1b13;
}

.count span{
  color: #022aa4;
  font-family: 'stamp';
  font-size: 2vw;
}

.recommend{
   position: absolute;
   left: 70vw;
   margin: 0;
   top: 3vh;
   width: 20vw;
}

.names{
  display: flex;
  width: 76%;
  justify-content: space-between;
  margin: 22vh auto 0 auto;
  position: relative;
  z-index: 999;
  font-family: 'stamp';
  font-size: 7vh;
  color: #cb5353;
}

.S{
  height: 75vh;
  width: 17.5vw;
  position: absolute;
  left: 4.7vw;
  margin: 0 auto;
  top: 20vh;
}
.stier{
  position: absolute;
  font-size: 1vw;
  left: 5.6vw;
  top: 34vh;
  width: 15.5vw;
  height: 57.5vh;
  overflow: auto;
}

.A{
  height: 75vh;
  width: 17.5vw;
  position: absolute;
  left: 23vw;
  margin: 0 auto;
  top: 20vh;
}
.atier{
  position: absolute;
  font-size: 1vw;
  left: 24.2vw;
  top: 34vh;
  width: 15.5vw;
  height: 57.5vh;
  overflow: auto;
}

.B{
  height: 75vh;
  width: 17.5vw;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 20vh;
}
.btier{
  position: absolute;
  font-size: 1vw;
  left: 42.4vw;
  top: 34vh;
  width: 15.5vw;
  height: 57.5vh;
  overflow: auto;
}

.C{
  height: 74.5vh;
  width: 17.4vw;
  position: absolute;
  left: 59.7vw;
  top: 20vh;
}
.ctier{
  position: absolute;
  font-size: 1vw;
  left: 60.5vw;
  top: 33.9vh;
  width: 15.5vw;
  height: 57.5vh;
  overflow: auto;
}

.D{
  height: 74.5vh;
  width: 17.4vw;
  position: absolute;
  left: 78vw;
  top: 20vh;
}
.dtier{
  position: absolute;
  font-size: 1vw;
  left: 78.8vw;
  top: 33.8vh;
  width: 15.5vw;
  height: 57.5vh;
  overflow: auto;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgb(53, 90, 203, 0.3);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

/*recommendation button*/
/* 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.2;
  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: 0.9vw;
    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))
    );
  }