CSS Battle #90 – Eclipse

[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 {characters}</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 {characters}

your cssbattles code here!

[meg-gutshall]

First attempt – 609.63 {391}

<p></p>
<p m></p>
<p h></p>
<style>
  * {
    background: var(--b, #F3AC3C);
    margin: 0;
    border-radius: 50%;
    position: relative;
  }
  p {
    width: 400px;
    height: 400px;
    --b: #998235;
    top: -250px;
  }
  [m] {
    width: 200px;
    height: 200px;
    --b: #1A4341;
    border: 25px solid #F3AC3C;
    left: 75;
    top: -375;
  }
  [h] {
    top: -500px;
  }
</style>

Minified – 647.3 {224}

<p h><p m><p><style>*{background:var(--b,#F3AC3C);margin:0;border-radius:50%;position:fixed}p{width:400;height:400;--b:#998235;top:150}[m]{width:200;height:200;--b:#1A4341;border:25px solid#F3AC3C;left:75;top:25}[h]{top:-250

[Narigo]

Gradients! – 634.87 {256}

<style>
  body {
    --b:radial-gradient(circle,#998235 200px,#0000 0) 100% 150px / 100% 400px;
    background:
      var(--b) no-repeat,
      radial-gradient(circle,#1A4341 100px,#F3AC3C 0 125px,#0000 0),
      var(--b),
      #F3AC3C
    ;
  }
</style>

[michaella23]

My solution – 612.82 {361}

<div id="one">
</div><div id="two"></div>
<div id="thr"></div>

<style>
body {margin: 0; background:#F3AC3C; position: relative}
#one,#thr {width: 400; height: 400; border-radius: 50%; background:#998235}
#one {margin-top: -250}
#two {position: absolute; width: 200; height: 200; background: #1A4341 ;border-radius: 50%; top: 275; left: 75; border: 25px solid#F3AC3C}
#thr{position: absolute
</style>