CSS Battle #98 – Candle

[meg-gutshall]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[meg-gutshall]

First attempt – 600.39 {728}

<div class="flame"></div>
<div class="candle">
  <div class="candle-top">
    <div class="melt"></div>
  </div>
</div>
<style>
  * {
    background: var(--b, #14313E);
  }
  body {
    display: grid;
    place-content: center;
  }
  .flame {
    width: 30px;
    height: 50px;
    --b: #F3AC3C;
    border-radius: 50px 0 / 52px 0;
    margin-left: 40px;
    z-index: 1;
  }
  .candle {
    width: 80px;
    height: 130px;
    --b: #BA3E46;
    border-radius: 100% / 30px;
  }
  .candle-top {
    width: 80px;
    height: 30px;
    border-radius: 50%;
    --b: #F3695A;
  }
  .melt {
    width: 60px;
    height: 30px;
    border-radius: 50%;
    --b: #14313E;
    position: relative;
    left: 10px;
    top: -10px;
  }
</style>

Refactored – 601.68 {574}

<p c>
<p t>
<p m>
<p f>
<style>
  * {
    background: var(--b, #14313E);
    border-radius: var(--r, 50%);
    position: relative;
  }
  body {
    display: flex;
    flex-flow: column-reverse nowrap;
    place-items: center;
  }
  p {
    width: 80;
    height: 30;
    margin: 0;
  }
  [f] {
    width: 30;
    height: 50;
    --b: #F3AC3C;
    --r: 50px 0 / 52px 0;
    left: 15;
    top: 8;
  }
  [c] {
    height: 130;
    --b: #BA3E46;
    --r: 100% / 30px;
    top: -52;
  }
  [t] {
    --b: #F3695A;
    top: -22;
  }
  [m] {
    width: 60;
    top: -2;
  }
</style>

Minified – 612.94 {360}

<p c><p t><p m><p f><style>*{background:var(--b,#14313E);border-radius:var(--r,50%);position:relative}body{display:flex;flex-flow:column-reverse nowrap;place-items:center}p{width:80;height:30;margin:0}[f]{width:30;height:50;--b:#F3AC3C;--r:50px 0/52px 0;left:15;top:8}[c]{height:130;--b:#BA3E46;--r:100%/30px;top:-52}[t]{--b:#F3695A;top:-22}[m]{width:60;top:-2