<div class="frame">
    <div class="container">
      <div class="bird">
        <div class="bird__head">
          <div class="bird__beak"></div>
        </div>
        <div class="bird__body"></div>
        <div class="bird__tail"></div>
      </div>
    </div>
  </div>

:root {
  --main-bg: #dacfd4;
  --frame-bg: #c7c3c6;
  --frame-border: #d3d2d6;
  --circles-bg: #beb8bd;
  --bird-breast: #d5cac2;
  --bird-head-wing: #b0a096;
  --bird-tail: #a9a49a;
  --bird-dark: #48474b;
  --bird-light: #e6e4e7;

}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: 1px;
  color: #ffffff;
  background-color: var(--main-bg);
}

.frame {
  position: relative;
  width: 95vmin;
  height: 66vmin;
  background-color: var(--frame-bg);
  border: 2.5vmin solid var(--frame-border);
  border-radius: .5vmin;
  box-shadow: -6vmin 6vmin 10vmin 0 #46343c;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vmin;
  height: 45vmin;
  border-radius: 0 28vmin 0;
  background-color: rgba(0, 0, 0, .3);
  background: radial-gradient(38vmin circle at 30% center, var(--circles-bg) 50%, transparent 50%), radial-gradient(38vmin circle at 70% center, var(--circles-bg) 50%, transparent 50%);
  overflow: hidden;
}

.container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  display: block;
  width: 100%;
  height: 1vmin;
  background-color: var(--bird-dark);

}

.bird {
  width: 15vmin;
  height: 27vmin;
  margin-left: 15vmin;
  margin-top: 11vmin;
}

.bird__head {
  position: relative;
  display: flex;
  width: 7vmin;
  height: 3.6vmin;
  margin-left: auto;
  margin-right: 1vmin;
  background-color: var(--bird-head-wing);
  border-bottom: 2vmin solid var(--bird-light);
  border-left: 2vmin solid transparent;
}

.bird__head::before {
  content: "";
  position: absolute;
  top: -1.4vmin;
  left: -2vmin;
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 1.5vmin solid var(--bird-head-wing);
  border-left: 3.5vmin solid transparent;
  border-right: 3.5vmin solid transparent;
}

.bird__beak {
  position: relative;
  width: 4.5vmin;
  margin-left: auto;
  margin-right: -1vmin;
  border-bottom: 1vmin solid var(--bird-dark);
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid transparent;
  z-index: 2;
}

.bird__beak::after {
  content: "";
  position: absolute;
  bottom: -4vmin;
  right: 0;
  display: block;
  width: 0;
  height: 4vmin;
  border-right: 1.2vmin solid var(--bird-dark);
  border-bottom: 1.2vmin solid transparent;
}

.bird__body {
  position: relative;
  width: 10vmin;
  height: 14vmin;
  margin-left: auto;
  margin-right: 1vmin;
  background: linear-gradient(113deg, transparent 0, transparent 18%, var(--bird-head-wing) 18%, var(--bird-head-wing) 25%, var(--bird-dark) 25%, var(--bird-dark) 31%, var(--bird-breast) 31%, var(--bird-breast) 52%, transparent 52%);
}

.bird__body::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 28%;
  display: block;
  background-color: var(--bird-breast);
  background: linear-gradient(160deg, var(--bird-breast) 80%, transparent 80%);
}

.bird__tail {
  width: 1vmin;
  height: 9.5vmin;
  margin-left: 12%;
  background: linear-gradient(to bottom, var(--bird-tail) 60%, var(--bird-dark) 60%);
  transform: skewX(-22deg);
  box-shadow: 1vmin 0 0 0 var(--bird-light);
}

/* 
Inspired by Arman Borkhani's pure css landscapes
https://codepen.io/armanb

Illustration by Kristofer Haugvik
https://www.behance.net/gallery/24075785/Soer-Helgeland/modules/164778393
*/