body {
  background: #3366cc url("https://images.freecreatives.com/wp-content/uploads/2016/02/Blue-Pattern-Background-For-Free-Download.jpg") repeat fixed center;
}

div {
  width: 100px;
  height: 100px;
}
div .bottom {
  display: none;
}

.top {
  z-index: 1000;
  width: 80%;
  height: 20%;
  margin: auto;
  background-color: transparent;
  position: relative;
}
.top .ear-left {
  background-color: #cb5a34;
  width: 200px;
  height: 230px;
  border-radius: 50%;
  border: black solid 15px;
  transform: rotate(-45deg);
  position: relative;
  top: 90px;
}
.top .ear-left_inner {
  background-color: #ffb366;
  width: 130px;
  height: 160px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 25px;
}
.top .ear-right {
  background-color: #cb5a34;
  width: 200px;
  height: 230px;
  border-radius: 50%;
  border: black solid 15px;
  transform: rotate(45deg);
  position: relative;
  top: -255px;
  left: 420px;
}
.top .ear-right_inner {
  background-color: #ffb366;
  width: 130px;
  height: 160px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 25px;
}
.top .face {
  background-color: #cb5a34;
  border: black solid 15px;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  border-bottom-left-radius: 60%;
  border-bottom-right-radius: 60%;
  width: 500px;
  height: 450px;
  position: relative;
  top: -450px;
  left: 90px;
  transform: rotate(-10deg);
}
.top .face .flap-left {
  width: 80px;
  height: 60px;
  background-color: #cb5a34;
  border-radius: 50%;
  border-left: black solid 15px;
  position: absolute;
  top: 45px;
  left: 10px;
  transform: rotate(-10deg);
}
.top .face .flap-right {
  width: 80px;
  height: 60px;
  background-color: #cb5a34;
  border-radius: 50%;
  border-right: black solid 15px;
  position: absolute;
  top: 25px;
  left: 360px;
  transform: rotate(5deg);
}
.top .face .eye {
  width: 280px;
  height: 70px;
  position: relative;
  top: 170px;
  left: 110px;
}
.top .face .eye_left {
  background-color: black;
  width: 70px;
  height: 100%;
  border-radius: 50%;
  float: left;
}
.top .face .eye_right {
  background-color: black;
  width: 70px;
  height: 100%;
  border-radius: 50%;
  float: right;
}
.top .face .eye .pupil {
  background-color: white;
  width: 12px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
}
.top .face .eye .pLeft {
  top: 10px;
  left: 40px;
}
.top .face .eye .pRight {
  top: 10px;
  left: 250px;
}
.top .face .mouth {
  background-color: #ffb366;
  width: 250px;
  height: 190px;
  border-radius: 50%;
  position: relative;
  top: 180px;
  left: 130px;
}
.top .face .mouth .nose {
  display: block;
  width: 170px;
  height: 170px;
  background-color: black;
  position: absolute;
  top: -65px;
  left: calc(20% - 10px);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 20%;
}
.top .face .mouth .nose-top {
  background-color: black;
  width: 170px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: calc(20% - 10px);
}
.top .face .mouth .nose-top_inner {
  background-color: white;
  width: 70px;
  height: 20px;
  border-radius: 50%;
  transform: rotate(5deg);
  position: absolute;
  left: 75px;
  top: 10px;
}

.bottom {
  width: 80%;
  height: auto;
  margin: auto;
  position: relative;
  top: -500px;
}
.bottom .bearBod {
  background-color: #cb5a34;
  border: black solid 15px;
  width: 480px;
  height: 500px;
  border-radius: 40%;
  position: relative;
  left: 150px;
}
.bottom .bearBod hr {
  width: 400px;
  height: 15px;
  border: none;
  background-color: black;
  transform: rotate(11deg);
  position: relative;
  top: 18px;
  left: -5px;
}
.bottom .bearBod .leg-left {
  background-color: #cb5a34;
  width: 350px;
  height: 250px;
  clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
  border: black solid 15px;
  transform: scaleX(-1);
  position: absolute;
  left: -200px;
}
.bottom .bearBod .leg-right {
  background-color: #cb5a34;
  width: 350px;
  height: 250px;
  clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
  border: black solid 15px;
  position: absolute;
  top: 200px;
  left: 280px;
}
.bottom .bearBod .foot-left {
  background-color: #cb5a34;
  width: 200px;
  height: 250px;
  border: black solid 15px;
  border-radius: 40%;
  position: relative;
  left: -285px;
}
.bottom .bearBod .foot-right {
  background-color: #cb5a34;
  width: 200px;
  height: 250px;
  border: black solid 15px;
  border-radius: 40%;
  position: relative;
  top: -280px;
  left: 515px;
}
.bottom .bearBod .toes1 {
  background-color: #ffb366;
  width: 35px;
  height: 45px;
  border-radius: 50%;
  position: relative;
  top: 25px;
  left: 30px;
}
.bottom .bearBod .toes2 {
  background-color: #ffb366;
  width: 35px;
  height: 45px;
  border-radius: 50%;
  position: relative;
  top: -35px;
  left: 85px;
}
.bottom .bearBod .toes3 {
  background-color: #ffb366;
  width: 35px;
  height: 45px;
  border-radius: 50%;
  position: relative;
  top: -65px;
  left: 140px;
}
.bottom .bearBod .paw {
  background-color: #ffb366;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  top: -30px;
  left: 20px;
}
.bottom .bearBod-copy {
  background-color: #cb5a34;
  width: 480px;
  height: 500px;
  border-radius: 40%;
  position: relative;
  top: -510px;
  left: 165px;
}
.bottom .bearBod-copy .arm-left {
  background-color: #cb5a34;
  width: 125px;
  height: 420px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 30%;
  border-left: black solid 15px;
  border-bottom: black solid 15px;
  position: absolute;
  top: 120px;
  left: 50px;
  transform: rotate(-23deg);
}
.bottom .bearBod-copy .arm-right {
  background-color: #cb5a34;
  width: 125px;
  height: 420px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 30%;
  border-left: black solid 15px;
  border-bottom: black solid 15px;
  position: absolute;
  top: 120px;
  left: 295px;
  transform: scaleX(-1) rotate(-23deg);
}
.bottom .bearBod-copy .body-inner {
  display: block;
  width: 170px;
  height: 170px;
  background-color: #ffb366;
  position: absolute;
  top: 80px;
  left: 157px;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 20%;
}
.bottom .bearBod-copy .body-top {
  background-color: #ffb366;
  width: 170px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 135px;
  left: 157px;
}
.bottom .bearBod-copy .body-line {
  background-color: #ffb366;
  width: 25px;
  height: 220px;
  border-left: black solid 15px;
  border-right: black solid 15px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  position: absolute;
  top: 260px;
  left: 215px;
}
.bottom .bearBod-copy .body-line .line-end {
  background-color: black;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: -7px;
  left: -15px;
}
.bottom .bearBod-copy .body-line .move {
  top: -22px;
  left: 25px;
}
.bottom .bearBod-copy .black {
  background-color: black;
  width: 15px;
  height: 35px;
  position: relative;
  top: 465px;
  left: 235px;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
}