the wood

✨ Jabont

<html>
  <head>
    <title>My House
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
/*         font-size:12px; */
        animation:ani 3s infinite alternate;
      }
      @keyframes ani{

from{font-size:1em}
        to{font-size:1.2em;}
      }
      .lumton{
        position:absolute;
        bottom:0%;
        left:calc((100% - 2em)/2);
        background:brown;
        width:2em;
        height:8em;
        border-radius:3em 0em;
        z-index:2
      }
      .poom{
        --w: 4em;
        background:hsl(80,100%,45%,80%);
        width:var(--w);
        height:4em;
        border-radius:100%;
        position:absolute;
      }
      .poom1{
        left:calc((100% - var(--w))/2);
        transform: scale(1.2);
        z-index:4;
      }
      .poom2{
        right:0;
        top:calc((100% - var(--w))/2);
        z-index:3;
      }
      .poom3{
        top:calc((100% - var(--w))/2);
        transform: scale(.9);
        
      }
      .tree{
        width:8em;
        height:10em;
        position:relative;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="tree">
      <div class="lumton">
      </div>
      <div class="poom poom1">
      </div>
      <div class="poom poom2">
      </div>
      <div class="poom poom3">
      </div>
    </div>
    
     <div class="tree" style="font-size:.9em;">
      <div class="lumton">
      </div>
      <div class="poom poom1">
      </div>
      <div class="poom poom2">
      </div>
      <div class="poom poom3">
      </div>
    </div>
    
     <div class="tree" style="font-size:1.5em;">
      <div class="lumton">
      </div>
      <div class="poom poom1">
      </div>
      <div class="poom poom2">
      </div>
      <div class="poom poom3">
      </div>
    </div>
    
     <div class="tree" style="font-size:1.3em;">
      <div class="lumton">
      </div>
      <div class="poom poom1">
      </div>
      <div class="poom poom2">
      </div>
      <div class="poom poom3">
      </div>
    </div>
  </body>
</html>