CodePen Embed - CSS Art - School Building

<!-- Inspiration
https://graphicriver.net/item/school-building-flat-style-vector-illustration/17365630?ref=gvector -->

<!-- My Blog: https://albertwalicki.com/ -->

<div class="body">
  <div class="roof">
    <div class="chimney chimney1"></div>
    <div class="chimney chimney2"></div>
    <div class="chimney chimney3"></div>
    <div class="chimney chimney4"></div>
  </div>
  <div class="base">
    <div class="section section1">
      <div class="floor floor1">
        <div class="miniTower">

        </div>
        <div class="windowSmall windowSmall1"></div>
        <div class="window"></div>
        <div class="windowSmall windowSmall2"></div>
      </div>
      <div class="floor floor2">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>
      <div class="floor floor3">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>
    </div>
    <div class="section section2">
      <div class="floor floor1">
        <div class="windowSmall"></div>
        <div class="windowPlaceholder"></div>
        <div class="windowSmall"></div>
      </div>
      <div class="floor floor2">
        <div class="window"></div>
        <div class="windowWrapper">
          <div class="centerWindow">
            <span class="v"></span>
            <span class="h h1"></span>
            <span class="h h2"></span>
            <span class="h h3"></span>
          </div>
        </div>
        <div class="window"></div>
      </div>
      <div class="floor floor3">
        <div class="window"></div>
        <div class="doors">
          <span></span>
        </div>
        <div class="window"></div>
      </div>
    </div>
    <div class="section section3">
      <div class="floor floor1">
        <div class="miniTower">

        </div>
        <div class="windowSmall windowSmall1"></div>
        <div class="window"></div>
        <div class="windowSmall windowSmall2"></div>
      </div>
      <div class="floor floor2">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>
      <div class="floor floor3">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>
    </div>
  </div>
  <div class="front">
    <div class="mainTower">
      <div class="windowSmall"></div>
      <div class="towerRoof">
        <span class="mast"></span>
        <span class="flag"></span>
      </div>
    </div>
    <div class="triangle">
      <div class="tr1"></div>
      <div class="tr2"></div>
      <div class="tr3"></div>
      <div class="clock">
        <span class="clockHand1"></span>
        <span class="clockHand2"></span>
      </div>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="column">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="column">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
    <div class="column">
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="tower tower1">
    <div class="towerBase">
      <div class="floor floor1">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
      <div class="floor floor2">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
      <div class="floor floor3">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
    </div>
    <div class="towerRoof">
      <span class="spike"></span>
      <span class="window"></span>
    </div>
  </div>
  <div class="tower tower2">
    <div class="towerBase">
      <div class="floor floor1">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
      <div class="floor floor2">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
      <div class="floor floor3">
        <div class="towerWindow">
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
          <span class="window">
            <span></span>
            <span></span>
          </span>
        </div>
      </div>
    </div>
    <div class="towerRoof">
      <span class="spike"></span>
      <span class="window"></span>
    </div>
  </div>
  <div class="shadowWrapper">
    <div class="shadow1"></div>
    <div class="shadow2"></div>
  </div>
</div>
<div class="ground">
  <div class="path"></div>
  <div class="tree tree1">
    <div class="treeBody">
      <div class="top"></div>
      <div class="mid"></div>
      <div class="bottom"></div>
    </div>
    <div class="trunk"></div>
  </div>
  <div class="tree tree2">
    <div class="treeBody">
      <div class="top"></div>
      <div class="mid"></div>
      <div class="bottom"></div>
    </div>
    <div class="trunk"></div>
  </div>
</div>

$bg: #80cec1;

$brick1: #ffd04c;
$brick2: #fdb22a;
$brick3: #fdc147;
$brick4: #ffb32a;
$brick5: #f5a21c;

$roof: #545454;
$decorations: #fff;
$flag: #fc6645;
$windowFrame: #fff5cf;

$size: 1.3vmin;
$size00675: calc(0.0675 * #{$size});
$size0125: calc(0.125 * #{$size});
$size025: calc(0.25 * #{$size});
$size05: calc(0.5 * #{$size});
$size075: calc(0.75 * #{$size});
$size2: calc(2 * #{$size});
$size3: calc(3 * #{$size});
$size4: calc(4 * #{$size});
$size5: calc(5 * #{$size});

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  height: 100vh;
  background: $bg;
}

.body {
  position: relative;
  z-index: 1;
  width: calc(72 * #{$size});
  height: calc(35 * #{$size});
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

.base {
  width: 100%;
  height: calc(19 * #{$size});
  background: $brick1;
}

.roof {
  border-bottom: calc(6 * #{$size}) solid $roof;
  border-left: calc(4 * #{$size}) solid transparent;
  border-right: calc(4 * #{$size}) solid transparent;
  height: 0;
  width: calc(100% - 10 * #{$size});
  position: relative;
  display: flex;
  justify-content: space-around;
  .chimney {
    position: absolute;
    width: $size2;
    height: calc(2.5 * #{$size});
    background: lighten($roof, 10);
    bottom: 0;
    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: calc(-0.25 * #{$size});
      background: $roof;
      width: calc(2.5 * #{$size});
      height: $size05;
    }
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(-0.25 * #{$size});
      background: lighten($roof, 15);
      width: calc(2.5 * #{$size});
      height: $size05;
    }
  }
  .chimney1 {
    left: calc(7 * #{$size});
  }
  .chimney2 {
    left: calc(20 * #{$size});
  }
  .chimney3 {
    right: calc(20 * #{$size});
  }
  .chimney4 {
    right: calc(7 * #{$size});
  }
}

.tower {
  width: calc(9 * #{$size});
  height: calc(22 * #{$size});
  background: $brick3;
  position: absolute;
  bottom: 0;
  z-index: 1;
  &.tower1 {
    left: 0;
  }

  &.tower2 {
    right: 0;
  }
  .towerRoof {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(5 * #{$size}) calc(5 * #{$size}) calc(5 * #{$size});
    border-color: transparent transparent lighten($roof, 10) transparent;
    position: absolute;
    top: calc(-5 * #{$size});
    left: calc(-0.5 * #{$size});
    .spike {
      position: absolute;
      left: calc(-0.25 * #{$size});
      bottom: calc(-0.25 * #{$size});
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 $size025 calc(1.5 * #{$size}) $size025;
      border-color: transparent transparent lighten($roof, 10) transparent;
    }
    .window {
      position: absolute;
      bottom: calc(-4 * #{$size});
      left: calc(-0.75 * #{$size});
      width: calc(1.5 * #{$size});
      height: calc(2 * #{$size});
      background: darken($roof, 5);
      border: $size025 solid $windowFrame;
      opacity: 0.8;
      &:before {
        content: "";
        position: absolute;
        height: $size025;
        width: 100%;
        background: $windowFrame;
        left: 0;
        top: calc(0.625 * #{$size});
      }
      &:after {
        content: "";
        position: absolute;
        width: $size025;
        height: 100%;
        background: $windowFrame;
        left: calc(0.375 * #{$size});
        top: 0;
      }
    }
  }
}

.towerBase {
  position: absolute;
  height: 100%;
  width: 100%;

  .floor {
    height: calc(7.3 * #{$size});
    width: 100%;
    position: relative;
  }
  .floor1 {
    &:before {
      content: "";
      position: absolute;
      height: $size05;
      width: 100%;
      background: $brick5;
    }
  }
  .floor2 {
    &:before {
      content: "";
      position: absolute;
      top: calc(-0.5 * #{$size});
      height: $size075;
      width: 100%;
      background: $brick5;
    }
  }
  .floor3 {
    &:before {
      content: "";
      position: absolute;
      top: calc(-0.5 * #{$size});
      height: $size075;
      width: 100%;
      background: $brick5;
    }
  }
  .towerWindow {
    position: absolute;
    top: calc(1 * #{$size});
    left: calc(2 * #{$size});
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(5 * #{$size});
    height: calc(5 * #{$size});
    border: $size05 solid $windowFrame;
    &:before {
      content: "";
      position: absolute;
      width: calc(4.8 * #{$size});
      height: calc(4.8 * #{$size});
      border: 5px dotted $windowFrame;
      border-top: none;
      border-bottom: none;
    }
    .window {
      width: 50%;
      height: 50%;
      display: flex;
      background: $roof;
      &:nth-of-type(1) {
        border: $size025 solid $windowFrame;
        border-top: none;
        border-left: none;
      }
      &:nth-of-type(2) {
        border: $size025 solid $windowFrame;
        border-top: none;
        border-right: none;
      }
      &:nth-of-type(3) {
        border: $size025 solid $windowFrame;
        border-bottom: none;
        border-left: none;
      }
      &:nth-of-type(4) {
        border: $size025 solid $windowFrame;
        border-bottom: none;
        border-right: none;
      }
      span {
        width: 50%;
        height: 100%;
        display: block;
        position: relative;
        &:nth-of-type(1) {
          border-right: $size0125 solid $windowFrame;
        }
        &:nth-of-type(2) {
          border-left: $size0125 solid $windowFrame;
        }
        &:before {
          content: "";
          position: absolute;
          height: $size00675;
          width: 100%;
          background: $windowFrame;
          left: 0;
          top: calc(0.825 * #{$size});
        }
      }
    }
  }
}

.base {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 calc(9 * #{$size});
  &:before {
    content: "";
    top: calc(-0.6 * #{$size});
    left: 0;
    position: absolute;
    width: 100%;
    height: calc(1.2 * #{$size});
    background: linear-gradient(#fff 60%, rgba(255, 255, 255, 0.5) 60%);
  }
  .section {
    height: 100%;
    background: $brick4;
    &.section1,
    &.section3 {
      width: calc(16 * #{$size});
    }
    &.section2 {
      width: calc(100% - (2 * (16 * #{$size})));
    }
    .floor1 {
      height: calc(100% - 2 * (7.3 * #{$size}));
      width: 100%;
    }
    .floor2 {
      height: calc(7.3 * #{$size});
      width: 100%;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        top: calc(-0.5 * #{$size});
        height: $size075;
        width: 100%;
        background: $brick5;
      }
    }
    .floor3 {
      height: calc(7.3 * #{$size});
      width: 100%;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        top: calc(-0.5 * #{$size});
        height: $size075;
        width: 100%;
        background: $brick5;
      }
    }
    .floor {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .window {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: calc(2.5 * #{$size});
        height: calc(5 * #{$size});
        border: $size05 solid $windowFrame;
        position: relative;
        background: $roof;
        &:before {
          content: "";
          position: absolute;
          height: 100%;
          width: $size025;
          background: $windowFrame;
          left: calc(0.625 * #{$size});
          top: 0;
        }
        &:after {
          content: "";
          position: absolute;
          height: $size025;
          width: 100%;
          background: $windowFrame;
          left: 0;
          top: $size2;
        }
      }
    }
    &.section1,
    &.section3 {
      .floor1 {
        position: relative;
        .window {
          top: calc(-1.5 * #{$size});
        }
      }
      .windowSmall {
        position: absolute;
      }
    }

    .windowSmall {
      width: calc(1.5 * #{$size});
      height: calc(2 * #{$size});
      background: darken($roof, 5);
      border: $size025 solid $windowFrame;
      opacity: 0.8;
      &:before {
        content: "";
        position: absolute;
        height: $size025;
        width: 100%;
        background: $windowFrame;
        left: 0;
        top: calc(0.625 * #{$size});
      }
      &:after {
        content: "";
        position: absolute;
        width: $size025;
        height: 100%;
        background: $windowFrame;
        left: calc(0.375 * #{$size});
        top: 0;
      }
      &.windowSmall1 {
        bottom: calc(1.2 * #{$size});
        left: calc(1.8 * #{$size});
      }
      &.windowSmall2 {
        bottom: calc(1.2 * #{$size});
        right: calc(1.8 * #{$size});
      }
    }

    &.section2 {
      .windowSmall {
        position: relative;
      }
      .windowPlaceholder,
      .windowWrapper {
        width: calc(4.5 * #{$size});
      }
      .centerWindow {
        top: calc(-2 * #{$size});
        left: calc(0.25 * #{$size});
        width: calc(4 * #{$size});
        height: calc(9 * #{$size});
        border: $size05 solid $windowFrame;
        position: relative;
        background: $roof;
        border-top-right-radius: $size3;
        border-top-left-radius: $size3;
        .v {
          position: absolute;
          top: 0;
          left: calc(1.4 * #{$size});
          width: $size025;
          height: 100%;
          background: $windowFrame;
        }
        .h {
          position: absolute;
          left: 0;
          width: 100%;
          height: $size025;
          background: $windowFrame;
          &.h1 {
            top: $size2;
          }
          &.h2 {
            top: $size4;
          }
          &.h3 {
            bottom: $size2;
          }
        }
      }
      .doors {
        position: relative;
        top: calc(0.6 * #{$size});
        width: calc(4.5 * #{$size});
        height: calc(6 * #{$size});
        &:before {
          content: "";
          position: absolute;
          top: calc(-0.5 * #{$size});
          left: calc(-0.5 * #{$size});
          z-index: 0;
          background: #fff;
          width: calc(5.5 * #{$size});
          height: calc(6.5 * #{$size});
          border-top-right-radius: $size3;
          border-top-left-radius: $size3;
        }
        &:after {
          content: "";
          position: absolute;
          z-index: 1;
          background: lighten($brick1, 15);
          width: calc(4.5 * #{$size});
          height: calc(6 * #{$size});
          border-top-right-radius: $size3;
          border-top-left-radius: $size3;
        }
        span {
          position: absolute;
          left: 50%;
          top: 0;
          width: $size0125;
          height: 100%;
          background: $roof;
          z-index: 2;
          top: 0;
          &:after {
            content: "";
            position: absolute;
            width: $size05;
            height: $size05;
            border-radius: 50%;
            left: $size;
            top: $size3;
            background: $roof;
          }
          &:before {
            content: "";
            position: absolute;
            width: $size05;
            height: $size05;
            border-radius: 50%;
            right: $size;
            top: $size3;
            background: $roof;
          }
        }
      }
    }
  }
  .miniTower {
    position: absolute;
    top: calc(-2.5 * #{$size});
    left: calc(5.5 * #{$size});
    width: calc(5 * #{$size});
    height: calc(6 * #{$size});
    background: $brick2;
    &:before {
      content: "";
      position: absolute;
      top: calc(-2.5 * #{$size});
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 calc(2.5 * #{$size}) calc(2.5 * #{$size})
        calc(2.5 * #{$size});
      border-color: transparent transparent $brick2 transparent;
      z-index: 3;
    }
    &:after {
      content: "";
      position: absolute;
      top: calc(-3 * #{$size});
      left: calc(-0.5 * #{$size});
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 calc(3 * #{$size}) calc(3 * #{$size}) calc(3 * #{$size});
      border-color: transparent transparent lighten($roof, 10) transparent;
      z-index: 2;
    }
  }
}

.front {
  .triangle {
    position: absolute;
    top: calc(8.5 * #{$size});
    left: calc(50% - 10 *#{$size});
    .tr1 {
      position: absolute;
      top: calc(-0.5 * #{$size});
      left: calc(-2 * #{$size});
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 calc(12 * #{$size}) calc(7 * #{$size}) calc(12 * #{$size});
      border-color: transparent transparent #fff transparent;
      z-index: 1;
    }
    .tr2 {
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 calc(10 * #{$size}) calc(6 * #{$size}) calc(10 * #{$size});
      border-color: transparent transparent darken($brick1, 10) transparent;
      z-index: 2;
    }
    .tr3 {
      position: absolute;
      top: calc(1 * #{$size});
      left: calc(2 * #{$size});
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 calc(8 * #{$size}) calc(5 * #{$size}) calc(8 * #{$size});
      border-color: transparent transparent $brick1 transparent;
      z-index: 3;
    }
    .clock {
      width: $size3;
      height: $size3;
      border-radius: 50%;
      border: $size025 solid $roof;
      background: #fff;
      position: absolute;
      left: calc(8.5 * #{$size});
      top: $size2;
      z-index: 5;
      .clockHand1 {
        width: $size;
        height: $size025;
        background: $roof;
        position: absolute;
        top: calc(50% - 0.25 * #{$size});
        left: calc(50% - 0 * #{$size});
        transform-origin: left;
        transform: rotate(15deg);
      }
      .clockHand2 {
        width: $size;
        height: $size025;
        background: $roof;
        position: absolute;
        top: calc(50% - 0.25 * #{$size});
        left: calc(50% - 0 * #{$size});
        transform-origin: left;
        transform: rotate(135deg);
      }
    }
  }
  .mainTower {
    position: absolute;
    top: calc(4 * #{$size});
    left: calc(50% - 2.5 * #{$size});
    width: $size5;
    height: calc(6 * #{$size});
    background: $brick1;
    &:before {
      content: "";
      top: 0;
      left: calc(-0.5 * #{$size});
      position: absolute;
      width: calc(100% + #{$size});
      height: calc(0.8 * #{$size});
      background: linear-gradient(#fff 60%, rgba(255, 255, 255, 0.5) 60%);
    }
    .windowSmall {
      position: absolute;
      top: calc(1.5 * #{$size});
      left: calc(1.5 * #{$size});
      width: calc(1.5 * #{$size});
      height: calc(2 * #{$size});
      background: darken($roof, 5);
      border: $size025 solid $windowFrame;
      opacity: 0.8;
      &:before {
        content: "";
        position: absolute;
        height: $size025;
        width: 100%;
        background: $windowFrame;
        left: 0;
        top: calc(0.625 * #{$size});
      }
      &:after {
        content: "";
        position: absolute;
        width: $size025;
        height: 100%;
        background: $windowFrame;
        left: calc(0.375 * #{$size});
        top: 0;
      }
    }
  }
  .towerRoof {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(2.5 * #{$size}) calc(2 * #{$size}) calc(2.5 * #{$size});
    position: absolute;
    top: calc(-2 * #{$size});
    border-color: transparent transparent $roof transparent;
    .mast {
      position: absolute;
      width: $size0125;
      height: $size3;
      background: $roof;
      top: calc(-2 * #{$size});
      left: calc(-0.1 * #{$size});
    }
    .flag {
      width: $size2;
      height: $size;
      background: red;
      position: absolute;
      top: calc(-2 * #{$size});
      left: 0;
    }
  }
}

.columns {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0px;
  height: calc(20 * #{$size});
  width: calc(24 * #{$size});
  z-index: 5;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: $size05;
    top: 0;
    background: darken(#fff, 10);
  }
  .column {
    width: calc(2.5 * #{$size});
    height: 100%;
    background: linear-gradient(90deg, #fde1b7 40%, #fff0d7 40%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      width: calc(4 * #{$size});
      height: calc(1.5 * #{$size});
      background: #fff;
      position: relative;
      left: calc(-0.75 * #{$size});
      border-radius: $size;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        width: calc(4 * #{$size});
        height: calc(0.5 * #{$size});
        background: darken(#fff, 10);
      }
    }
    .bottom {
      width: calc(4 * #{$size});
      height: calc(1.5 * #{$size});
      background: #fff;
      position: relative;
      left: calc(-0.75 * #{$size});
      border-radius: $size;
      &:before {
        content: "";
        position: absolute;
        bottom: 0;
        width: calc(4 * #{$size});
        height: calc(0.5 * #{$size});
        background: darken(#fff, 10);
      }
    }
  }
}
.shadowWrapper {
  width: 100%;
  height: calc(19 * #{$size});
  position: absolute;
  overflow: hidden;
  pointer-events: none;

  .shadow1 {
    position: absolute;
    right: calc(-6 * #{$size});
    top: calc(6 * #{$size});
    height: calc(30 * #{$size});
    width: calc(34 * #{$size});
    background: rgba(0, 0, 0, 0.15);
    transform: rotate(-45deg);
  }
  .shadow2 {
    position: absolute;
    right: calc(-1 * #{$size});
    top: calc(-6 * #{$size});
    height: calc(16 * #{$size});
    width: calc(75 * #{$size});
    background: rgba(0, 0, 0, 0.15);
    transform: rotate(-45deg);
  }
}

.ground {
  height: $size4;
  width: 100%;
  background: linear-gradient(#aab32c 40%, $roof 40%);
  position: relative;
  z-index: 2;
  .path {
    width: $size5;
    height: $size3;
    background: $roof;
    margin: 0 auto;
  }
  .tree {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: calc(var(--tree-size) * 1.666);
    width: var(--tree-size);
    position: absolute;
    .treeBody {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
    }
    .trunk {
      height: calc(var(--tree-size) / 3);
      width: calc(var(--tree-size) / 7.5);
      background-color: #523b36;
    }

    &.tree1 {
      --tree-size: calc(6 * #{$size});
      top: calc(-9 * #{$size});
      left: calc(50% - 10 * #{$size});
      .top {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        left: calc((var(--tree-size) / 1.2) / 3);
        bottom: calc(var(--tree-size) / 4);
        border-radius: 50%;
        background: #26713b;
        z-index: 5;
      }
      .mid {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        right: calc((var(--tree-size) / 1.2) / 3);
        bottom: calc(var(--tree-size) / 4);
        border-radius: 50%;
        background: #1a4b27;
        z-index: 4;
      }
      .bottom {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        bottom: calc(var(--tree-size) / 1.5);
        border-radius: 50%;
        background: #32994e;
        z-index: 3;
      }
    }
    &.tree2 {
 --tree-size: calc(6 * #{$size});
      top: calc(-9 * #{$size});
      left: calc(50% + 9 * #{$size});
      .top {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        left: calc((var(--tree-size) / 1.2) / 3);
        bottom: calc(var(--tree-size) / 4);
        border-radius: 50%;
        background: #5aab61;
        z-index: 5;
      }
      .mid {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        right: calc((var(--tree-size) / 1.2) / 3);
        bottom: calc(var(--tree-size) / 4);
        border-radius: 50%;
        background: #30694b;
        z-index: 4;
      }
      .bottom {
        position: absolute;
        width: calc(var(--tree-size) / 1.2);
        height: calc(var(--tree-size) / 1.2);
        bottom: calc(var(--tree-size) / 1.5);
        border-radius: 50%;
        background: #1a4b27;
        z-index: 3;
      }
    }
  }
}

View Compiled

This Pen is owned by Albert on CodePen.

See more by @walickialbert on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.