html, body, div {
  margin: 0;
  padding: 0;
}

.frame {
  text-align: center;
  position: relative;
  min-height: 400px;

}
.frame div {
  position: absolute;
  left: 50%;
  top: 50%;
}

.tv {
  /* width: 200px;
  height: 160px;
  transform: translate(-50%, -50%);
  background-origin: content-box;
  border-radius: 25% 25% 25% 25% / 40% 40% 40% 40%;
  box-shadow: 0 0 0 1px black, 0 0 0 8px #f6f8ed;
  background:
  linear-gradient(170deg, transparent 60px, #999 10px) 26px center/112px 104px no-repeat,
  radial-gradient(ellipse at center top, #999 56px, transparent 56px) 26px 132px/112px 10px no-repeat,
  linear-gradient( #a3aeb0, #a3aeb0) 26px center/112px 104px no-repeat,
  radial-gradient(ellipse at center bottom, #a3aeb0 56px, transparent 56px) 26px 18px/112px 10px no-repeat,
  radial-gradient(ellipse at center right, #a3aeb0 10px, transparent 10px) 16px 28px/10px 104px no-repeat,
  radial-gradient(ellipse at center left, #a3aeb0 10px, transparent 10px) 138px 28px/10px 104px no-repeat,

  radial-gradient(circle, white 10px, transparent 10px) 160px 90px/20px 20px no-repeat,
  radial-gradient(circle, white 10px, transparent 10px) 160px 120px/20px 20px no-repeat,
  #5a595f; */
  width: 200px;
  height: 160px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#5a595f, #5a595f) no-repeat content-box,
    linear-gradient(white, white) no-repeat padding-box
  ;
  border-radius: 25% 25% 25% 25% / 40% 40% 40% 40%;
  padding: 8px 8px 8px 8px;
}

.tv::before {
  content: '';
  display: block;
  position: absolute;
  width: 200px;
  height: 260px;
  top: -50px;
  background:
    linear-gradient(170deg, transparent 60px, #999 10px) 26px center/112px 104px no-repeat,
    radial-gradient(ellipse at center top, #a3aeb0 56px, transparent 56px) 26px 190px/112px 10px no-repeat,
    linear-gradient( #a3aeb0, #a3aeb0) 26px 86px/112px 104px no-repeat,
    radial-gradient(ellipse at center bottom, #a3aeb0 56px, transparent 56px) 26px 76px/112px 10px no-repeat,
    radial-gradient(ellipse at center right, #a3aeb0 10px, transparent 10px) 16px 86px/10px 104px no-repeat,
    radial-gradient(ellipse at center left, #a3aeb0 10px, transparent 10px) 138px 86px/10px 104px no-repeat,

    linear-gradient(50deg, transparent 9px, #a3aeb0 9px, #a3aeb0 10px, transparent 10px) 162px 154px/15px 15px no-repeat,
    linear-gradient(50deg, transparent 9px, #a3aeb0 9px, #a3aeb0 10px, transparent 10px) 166px 150px/15px 15px no-repeat,
    radial-gradient(circle, white 10px, transparent 10px) 160px 150px/20px 20px no-repeat,
    linear-gradient(120deg, transparent 9px, #a3aeb0 9px, #a3aeb0 10px, transparent 10px) 162px 182px/15px 15px no-repeat,
    linear-gradient(120deg, transparent 9px, #a3aeb0 9px, #a3aeb0 10px, transparent 10px) 166px 185px/15px 15px no-repeat,
    radial-gradient(circle, white 10px, transparent 10px) 160px 180px/20px 20px no-repeat,

    radial-gradient(ellipse at center bottom, white 10px, transparent 10px) center 40px/30px 10px no-repeat,
    radial-gradient(circle, white 4px, transparent 4px) 82px 5px/8px 8px no-repeat,
    linear-gradient(70deg, transparent 12px, white 12px, white 15px, transparent 15px) 85px 5px/20px 40px no-repeat,
    radial-gradient(circle, white 4px, transparent 4px) 107px 0px/8px 8px no-repeat,
    linear-gradient(105deg, transparent 15px, white 15px, white 18px, transparent 18px) 95px 0px/20px 48px no-repeat,

    linear-gradient(110deg, transparent 10px, #a3aeb0 10px, #a3aeb0 16px, transparent 16px) 40px 226px/20px 20px no-repeat,
    linear-gradient(120deg, transparent 15px, #a3aeb0 15px, #a3aeb0 21px, transparent 21px) 38px 226px/25px 20px no-repeat,
    linear-gradient(60deg, transparent 15px, #a3aeb0 15px, #a3aeb0 21px, transparent 21px) 133px 226px/25px 20px no-repeat,
    linear-gradient(70deg, transparent 10px, #a3aeb0 10px, #a3aeb0 16px, transparent 16px) 140px 226px/20px 20px no-repeat
  ;
}

.tv::after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 48px;
  left: 164px;
  top: 40px;
  background:
    radial-gradient(circle at center, black 2px, transparent 2px) center/6px 6px space
  ;
}

/* 法国军人头 */
/* width: 200px;
  height: 160px;
  transform: translate(-50%, -50%);
  background:
   linear-gradient(#5a595f, #5a595f) no-repeat content-box,
   linear-gradient(white, white) no-repeat padding-box
   ;
  border-radius: 25% 25% 25% 25% / 40% 40% 40% 40%;
  padding: 8px 8px 8px 8px;
  border-top: 200px solid black; */
.sunrise {
  width: 400px;
  height: 300px;
  margin-top: -150px;
  margin-left: -200px;
  background:
    radial-gradient(circle at center 80%, #e5f73a,  #e5f73a 145px, transparent 150px, transparent) center -70px/300px 280px no-repeat,
    linear-gradient(to right, #e5f73a 8%, transparent 10%, transparent 18%, #e5f73a 23%, #e5f73a 32%, transparent 34%, transparent 38%, #e5f73a 40%, #e5f73a 100%) 30px 250px/120px 2px no-repeat,
    linear-gradient(to right, #e5f73a 65%, transparent 67%, transparent 72%, #e5f73a 74%, #e5f73a 79%, transparent 81%, transparent 85%, #e5f73a 87%, #e5f73a 100%) 260px 240px/120px 2px no-repeat,
    linear-gradient(to right, #e5f73a 60%, transparent 62%, transparent 67%, #e5f73a 69%, #e5f73a 79%, transparent 80%) 200px 280px/100px 2px no-repeat
    ;
}

#panda {
  background-color: #00cafb;
}

.panda {
  width: 200px;
  height: 170px;
  margin-top: -100px;
  margin-left: -100px;
  border-radius: 75% 75% 50% 50% / 100% 100% 50% 50%;
  box-shadow: inset 0 0 50px 10px #ccc;
  background-color: white;
  background-image:
    radial-gradient(circle, white 10%, transparent),
    radial-gradient(circle, white 10%, transparent),
    radial-gradient(ellipse, #000 60%, transparent 65%),
    radial-gradient(ellipse, #000 60%, transparent 65%),
    radial-gradient(ellipse at center bottom , #333 70%, transparent 25%),
    radial-gradient(ellipse, #333 70%, transparent 25%),
    radial-gradient(ellipse at center bottom , #333 70%, transparent 25%),
    radial-gradient(ellipse, #333 70%, transparent 25%);
  background-size: 6px 6px, 6px 6px, 10px 18px, 10px 18px, 40px 25px, 40px 35px, 40px 25px, 40px 35px;
  background-position: 82px 91px, 122px 91px, 80px 90px, 120px 90px, 60px 80px, 60px 88px, 110px 80px, 110px 88px;
  background-repeat: no-repeat;
}

.panda::before {
  display: block;
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: tomato;
  background-image: radial-gradient();
}

.fishbowl {
  width: 200px;
  height: 230px;
  margin-top: -100px;
  margin-left: -100px;
  background:
  radial-gradient(circle at left center,white 11px, black 11px, black 13px, transparent 13px) 180px 9px/13px 26px no-repeat,
  radial-gradient(circle at right center,white 11px, black 11px, black 13px, transparent 13px) 7px 9px/13px 26px no-repeat,
  linear-gradient(black 2px, white 2px, white 24px, black 24px) center 9px/160px 26px no-repeat;
  ;
}

.fishbowl::after {
  content: '';
  position: absolute;
  top: 15px;
  display: block;
  width: 200px;
  height: 200px;
  background:
    radial-gradient(circle at center 80px, transparent 98px, black 98px, black 100px, transparent 100px) center 20px/200px 200px no-repeat,
    radial-gradient(circle at center bottom, #E8E9E8 3px, black 3px, black 5px, transparent 5px ) 58px 170px/10px 5px no-repeat,
    radial-gradient(circle at center bottom, #E8E9E8 6px, black 6px, black 8px, transparent 8px ) 64px 165px/16px 8px no-repeat,
    radial-gradient(at 24px 25px, #E8E9E8 24px, black 24px, black 26px, transparent 26px) 131px 142px/60px 25px no-repeat,
    radial-gradient(at 18px 22px, #E8E9E8 20px, black 20px, black 22px, transparent 22px) 92px 143px/40px 20px no-repeat,
    radial-gradient(circle at 12px 25px, #E8E9E8 20px, black 20px, black 22px, transparent 22px) 68px 147px/24px 25px no-repeat,
    radial-gradient(circle at 15px 25px, #E8E9E8 20px, black 20px, black 22px, transparent 22px) 46px 150px/22px 25px no-repeat,
    radial-gradient(circle at 10px 25px, #E8E9E8 22px, black 22px, black 24px, transparent 24px) 18px 150px/28px 25px no-repeat,
    radial-gradient(circle at 25px -4px, white 10px, transparent 10px ) 38px 86px/36px 18px repeat-x,
    radial-gradient(circle at 9px bottom, #8AFBFD 9px, transparent 9px ) left 70px/36px 18px repeat-x,
    radial-gradient(circle at 25px -4px, #8AFBFD 10px, transparent 10px ) 38px 105px/36px 18px repeat-x,
    radial-gradient(#FDD336 18px, black 18px, black 20px, transparent 20px) 15px 134px/60px 45px no-repeat,
    radial-gradient(white 8px, black 8px, black 10px, transparent 10px) 75px 142px/30px 15px no-repeat,
    radial-gradient(#FDD336 10px, black 10px, black 12px, transparent 12px) 120px 148px/30px 18px no-repeat,
    radial-gradient(circle at center, white 10px, black 10px, black 12px, transparent 12px ) 120px 183px/24px 24px no-repeat,
    linear-gradient(to top, #E8E9E8 40px, transparent 40px) no-repeat,
    radial-gradient(circle at 9px bottom, #59DDFE 9px, transparent 9px ) left 90px/36px 18px repeat-x,
    radial-gradient(circle at center top, #59DDFE 100px, transparent 100px) center 105px/200px 100px no-repeat,
    radial-gradient(circle at center 20px, #8AFBFD 100px, transparent 100px) center 86px/200px 138px no-repeat,
    linear-gradient(to bottom, transparent 20px, white 20px)
  ;
  border-radius: 50%;
}

.fishbowl::before {
  position: absolute;
  display: block;
  content: '';
  bottom: 0px;
  left: 0;
  right: 0;
  width: 180px;
  height: 30px;
  margin:0 auto;
  border-radius: 50%;
  background-color: #BFC1C1;
}

.woman-1 {
  z-index: 100;
  transform: scale(3);
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background:
  radial-gradient(circle, black 2px, transparent 2px) 40px 62px/4px 4px no-repeat,
  radial-gradient(circle, black 2px, transparent 2px) 56px 62px/4px 4px no-repeat,
  radial-gradient(circle at center top, #fa7d66 5px, transparent 5px) center 72px/10px 5px no-repeat,
  radial-gradient(at center top, #fef4d9 20px, transparent 20px) center 55px/40px 25px no-repeat,
  radial-gradient(circle at center top, #fef4d9 4px, transparent 4px) center 86px/8px 4px no-repeat,
  linear-gradient( to top, #fef4d9, #fef4d9) center 75px/8px 12px no-repeat,
  radial-gradient(40px 25px at center 100px, #fd7c66 20px, transparent 20px) center no-repeat,
  radial-gradient(circle at center bottom, #6e3d2e 25px, transparent 25px) center 28px/50px 25px no-repeat,
  linear-gradient(to top, #6e3d2e,#6e3d2e 100px) center 53px/50px 50px no-repeat,
  #fcf0a6;
  border-radius: 50%;
}

@media all and (min-width: 650px) and (max-width:959px) {
  .frame {
    float:left;
    width: 100%;
  }
}

@media (min-width: 960px) {
  .frame {
    float: left;
    width: 50%;
  }
}