$s: 7em*pi();
$p: 700px;  
$parts: 72; 
$int: 0.4;
$cake-color: hsla(15, 72%, 40%,1);
$candle-color: hsla(145, 82%, 80%,1);
$level-height: 4rem; 
$base-angle: 45deg;

$bbc: lighten(
    adjust-hue($cake-color, 60deg)
  ,40%);
body {
  background: $bbc;
}

.thankyou { 
  position: absolute;
  top: 100px;
  left: 400px;
  width: 400px;
  height: 400px;
  line-height: 2;
  font-size: 60px;
  color: darken($bbc,20%);
  text-align: center;
  text-shadow: 0 0 10px darken($bbc,60%);  

   font-family: 'Calligraffitti', cursive;
}
.pane {
  position: absolute;
  top: 100px;
  left: 50px;
  height: $s;
  width: $s;
  outline: 2px solid red;
  perspective: $p;
  perspective-origin: 50% 100%;
  filter: contrast(1.4);
  
  &, *, *:before, *:after {
    transform-style: preserve-3d;
    box-sizing: border-box;
    visibility: hidden;
    backface-visibility: hidden;
  }
  
  .base {
    position: absolute;
    bottom: 0;
    left: 0;
    height: $s;
    width: $s;
    
    transform: 
      translate3d(0,0,0)
      rotate3d(1,0,0,$base-angle)
      rotate3d(0,0,1,-90deg);

  }
  .layer {
    font-size: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    height: $s;
    width: $s;
    margin: $s/-2;
    transform: 
      rotate3d(0,1,0,90deg); 
    
    &:nth-child(2) {
      font-size: 0.75em;

      transform:
        translate3d(0,0,$level-height)
        rotate3d(0,1,0,90deg); 
    }
    &:nth-child(3) {
      font-size: 0.5em;

      transform:
        translate3d(0,0,$level-height*2)
        rotate3d(0,1,0,90deg); 
    }
    
    .top {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      border-radius: 100%;
      box-shadow: 
        0 0 195px 2px rgba(#fff,0.3) inset,
        0 0 35px 2px rgba(#fff,0.2) inset,
        0 0 65px 2px rgba($cake-color,0.8) inset,
        0 0 35px 2px rgba(#fff,0.3) inset; 
      background-color: $cake-color;
      background-image: 
        radial-gradient(ellipse at center,
          rgba(255,255,255,0.4),
          rgba(255,255,255,0.8));
      height: $s;
      width: $s;
      transform:
        rotate3d(0,1,0,90deg); 
      visibility: visible;
      backface-visibility: visible;

      .candle {
        $cs: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        height: $cs*2;
        width: $cs;
        margin: $cs*-1 $cs/-2;
        transform:
          rotate(90deg) 
          translatez($cs/-1)
          rotatex(-90deg);

        @for $i from 0 to 33 {
          &:nth-child(#{$i + 1}) {
           transform:
             rotate(360deg/33*$i) 
             translatez($cs/-1)
             rotatex(-90deg)
             translatez($s/2.3);
            
            .flame {
              animation-delay: $i%3*0.4s
            }
          }

        }
      
        .flame {
          position: absolute;
          left: $cs/-2;
          bottom: $cs*-2;
          height: $cs*2; 
          width: $cs;
          border-radius: 100% 0;
          visibility: visible; 
          backface-visibility: visible;
          background-size: 200% 300%; 
          //background-color: rgba(0,0,0,0.5);
          background-image: radial-gradient(
            ellipse at center,
             rgba(0,0,0,0), 
             rgba(0,0,255,0.2) 10%,  
             rgba(255,255,0,0.9)); 
          background-position: 50% $cs - 40px;
          background-repeat: no-repeat;
          transform: rotate(-20deg);
          box-shadow: 0 10px 20px 0 rgba(0,0,0,0.4);
          animation: flame 0.5s ease-in-out infinite alternate;
          
          @at-root {
            @keyframes flame {
              50% { 
                transform: 
                  rotatey(90deg) 
                  rotate(-20deg); 

                box-shadow: 0 5px 20px 0 rgba(0,0,0,0.4);
                background-position: 50% $cs - 50px;
              }
            }
          }
        }
        .side {
         visibility: visible;
         backface-visibility: visible;
         position: absolute;
          z-index: 3;
          top: 0;
          left: 0;
          width: $cs*pi()/16;
          bottom: 0;
          background: $candle-color;
                   background-image: 
        linear-gradient(to right,
          rgba(0,0,0,$int),
          rgba(255,255,255,$int),
          rgba(0,0,0,$int));
      background-size: $cs*pi()/2 100%;
          @for $i from 0 to 16 {
            &:nth-child(#{$i + 1}) {
              background-position: $cs*pi()/-16*$i + $cs*pi()/4 0;
              transform: rotatey(360deg/16*$i) translatez($cs/2);
            }
          }
        }
      }
    }
    
    .part {
      $w: $level-height;
      $h: ceil($s*pi()/$parts); 
      $bs: $s*pi();
      position: absolute; 
      top: 50%;
      left: 50%;
      margin: $h/-2 $w/-2;
      height: $h;
      width: $w;
      visibility: visible;
      overflow: hidden;
      box-shadow: 
        10px 0 5px -5px rgba($cake-color,0.4) inset;
      background-color: $cake-color;
      background-image: 
        linear-gradient(to bottom,
          rgba(0,0,0,$int),
          rgba(255,255,255,$int),
          rgba(0,0,0,$int));
      background-size: 100% $bs;
      backface-visibility: hidden;

      @for $i from 0 to $parts {
        &:nth-child(#{$i + 1}) {

          background-position: 0 $bs/$parts*$i;
          transform:
            translate3d($w/2,0,0)
            rotate3d(1,0,0,360deg/$parts*$i)
            translate3d(0,0,$s/2);
          
        }
      }
    
      &:before {
        content: '';
        position: absolute;
        z-index: 3;
        top: 0;
        left: $h/-2;
        height: $h;
        width: $h*2;
        border-radius: $h;
        box-shadow: 
           10px 0 10px -5px rgba(#fff,0.9) inset,
          -5px 0 10px 0 rgba($cake-color,0.9) inset,
          -10px 0 10px 0 rgba(#fff,0.9) inset;
        background: lighten($cake-color,25%);
        visibility: visible;
      }
      &:nth-child(2n):before {
       width: $h*4;
      }
      &:nth-child(3n):before {
       width: $h*3;
      }
      &:nth-child(4n):before {
       width: $h*4;
      }
      &:nth-child(5n):before {
       width: $h*3; 
      }
    }
  } 
}