@charset "UTF-8";
body { background-color:#333; margin:0; padding:0; font-family:微軟正黑體; }
*, *::before, *::after { position:relative; margin:0; padding:0; font-family:微軟正黑體; list-style:none; text-decoration:none; box-sizing:border-box; transition:0.2s linear; }

.content { display:flex; justify-content:center; align-items:center; height:100vh; padding:20px; overflow:hidden; }

.pizza { display:flex; justify-content:center; background-color:#fff;  width:90vh; height:90vh; max-width:60vw; max-height:60vw; transition:unset; border-radius:50%; }
.pizza:before { position:absolute; top:0; left:0; content:''; display:block; width:100%; height:100%; box-shadow:0 0 0 1.2vw #48b3db inset; border-radius:50%; mix-blend-mode:multiply; z-index:10; }

.piece { position:absolute; width:45vh; height:45vh; max-width:30vw; max-height:30vw; transform-origin:center bottom; }
.piece svg { position:relative; fill:#fff9dd; width:100%; height:100%; }
.piece:nth-of-type(2n) svg { fill:#60ccb5; }
.piece:nth-of-type(2) { transform:rotate(45deg); } 
.piece:nth-of-type(3) { transform:rotate(90deg); } 
.piece:nth-of-type(4) { transform:rotate(135deg); } 
.piece:nth-of-type(5) { transform:rotate(180deg); } 
.piece:nth-of-type(6) { transform:rotate(225deg); } 
.piece:nth-of-type(7) { transform:rotate(270deg); } 
.piece:nth-of-type(8) { transform:rotate(315deg); } 

.piece.select { fill:#f00; }

.piece span { position:absolute; top:1.2em; left:50%; display:inline-block; color:#60ccb5; font-size:24px; font-weight:bold; letter-spacing:0.2em; writing-mode:vertical-lr; transform:translateX(-50%); }
.piece:nth-of-type(2n) span { color:#fff9dd; }

.arrow { position:absolute; display:flex; justify-content:center; align-items:center; background-color:#f1fffb; width:20vh; height:20vh; max-width:12vw; max-height:12vw; border-radius:50%; box-shadow:0 0 8px #0009, 0 0.4vw 2vw 1.6vw #8bd8d0 inset; cursor:pointer; z-index:100; }
.arrow:hover { filter:brightness(1.1); }

.arrow:before, .arrow:after { position:absolute; content:''; top:-20px; left:50%; display:block; width:0; height:0;
border-style:solid;
border-width:0 10px 24px 10px;
border-color:transparent transparent #8bd8d0 transparent; transform:translateX(-50%); }
.arrow:before { border-width:0 6px 18px 6px; border-color:transparent transparent #0009 transparent; filter:blur(4px); }

.arrow span { color:#056023; font-size:16px; font-weight:bold; }

.result { position:absolute; bottom:-50vh; display:block; background-color:#fff; width:90vh; max-width:60vw; padding:12px; font-size:20px; font-weight:bold; text-align:center; box-shadow:0 0 12px #0003; border-radius:8px; transition:0.8s ease-in; }
.result.active { bottom:20px; transition:0.4s ease; }
.result span { margin:0 4px; color:#60ccb5; }

.hidden { display:none; }

/* RWD */
@media screen and (max-width:1024px){
  .piece span { font-size:18px; }
}
@media screen and (max-width:640px){
  .piece span { font-size:16px; }
  .arrow span { font-size:14px; }
  .result { font-size:16px; }
}
@media screen and (max-width:480px){
  .piece span { font-size:12px; }
  .arrow span { font-size:12px; }
  .result { font-size:14px; }
}