body {
  margin: 0;
}

#workspace {
  height: 100vh;
  width: 100vw;
  background-color: #b8e7fd;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#workspace h1 {
  font-family: "Lobster", cursive;
  font-size: 8rem;
  text-align: center;
}
@media screen and (min-width: 380px) {
  #workspace h1 {
    font-size: 10rem;
  }
}

.bee {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: 0.3s;
  display: none;
}
.bee-head {
  background: rgb(240, 250, 105);
  height: 20px;
  width: 20px;
  border-radius: 100%;
}
.bee-body {
  background: rgb(240, 250, 105);
  background: linear-gradient(to bottom, #f0fa69 0%, #f0fa69 10%, #49491f 20%, #f0fa69 30%, #f0fa69 40%, #49491f 50%, #f0fa69 60%, #f0fa69 70%, #49491f 80%, #f0fa69 90%, #f0fa69 100%);
  height: 40px;
  width: 25px;
  position: relative;
  top: -7px;
  left: -3px;
  border-radius: 100%;
}
.bee-wing-right {
  background: #000;
  height: 15px;
  width: 35px;
  position: relative;
  right: -10px;
  top: 5px;
  opacity: 0.5;
  border-radius: 0 15px 5px 15px;
  transform: rotate(25deg);
}
.bee-wing-left {
  background: #000;
  height: 15px;
  width: 35px;
  position: relative;
  right: 20px;
  top: 20px;
  opacity: 0.5;
  border-radius: 15px 0 15px 5px;
  transform: rotate(-25deg);
}