@keyframes wag {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  50% {
    transform: translate(4px, -10px) rotate(10deg);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}
section {
  min-height: 100vh;
  width: 100%;
  margin: auto;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
.row svg {
  display: block;
  width: 100%;
}

.lamprow {
  align-self: flex-start;
  margin-top: 0;
}

.tortoiserow {
  flex-grow: 1;
}

.controls-row {
  align-self: flex-end;
  margin-bottom: 0;
}

.heat-lamp.area {
  width: 30vw;
  margin: auto;
  display: flex;
  max-width: 400px;
}
.heat-lamp.area .cord {
  fill: brown;
}
.heat-lamp.area .lamp.top {
  fill: grey;
}
.heat-lamp.area .lamp.bulb {
  fill: white;
  stroke: grey;
  stroke-width: 0.2;
  transition: all 0s ease;
}
.heat-lamp.area .lamp.shade {
  fill: silver;
  filter: saturate(0.5);
  transition: all 0s ease;
}
.heat-lamp.area .ray {
  opacity: 0;
  fill: red;
  filter: drop-shadow(0px 10px 10px #ffd200);
}

.heatlamp {
  overflow: visible;
}

.heat-lamp.area.on .lamp.shade {
  fill: #ffdd40;
  filter: saturate(1);
  opacity: 0.8;
  filter: drop-shadow(0px 10px 10px #ffd200);
  transition: all 0.2s ease;
}
.heat-lamp.area.on .lamp.bulb {
  fill: orange;
  stroke: none;
  filter: drop-shadow(0px 0px 10px #ffd200);
  transition: all 0.2s ease;
}

.tortoise-area {
  display: flex;
  width: 95vw;
  max-width: 2000px;
  margin: auto;
}

.controls-area {
  padding-bottom: 50px;
}
.controls-area form {
  display: flex;
  flex-direction: row;
}
.controls-area .question {
  padding: 10px;
}

#tortoise {
  overflow: visible;
}
#tortoise .steam {
  fill: #999999;
  opacity: 0;
}
#tortoise .sweat {
  fill: #29abe2;
  opacity: 0;
}
#tortoise .steamcover {
  fill: none;
  stroke: white;
  stroke-width: 10px;
  transform: rotate(180deg);
  transform-origin: center;
  transform-box: fill-box;
}
#tortoise .platform {
  fill: url(https://www.17sucai.com/preview/2413762/2021-10-16/%E5%96%82%E4%B9%8C%E9%BE%9F/%E2%95%AC%E2%95%A3%E2%95%AC%E2%94%8C%E2%95%A3%CE%A9/feed-my-tortoise/style.css#plankgradient);
}
#tortoise .eye {
  fill: #FFFFFF;
}
#tortoise .tail, #tortoise .body, #tortoise .eyelid {
  fill: #006837;
}
#tortoise .tail {
  transform-origin: center right;
  transform-box: fill-box;
  animation: wag 0.5s ease infinite both;
}
#tortoise .eye {
  position: relative;
}
#tortoise .eyelid {
  height: 0;
}
#tortoise .body.smiling, #tortoise .body.sad, #tortoise .body.dancing {
  visibility: hidden;
}

#tortoise.sad .tail {
  animation: none;
}

#tortoise.happy .tail {
  animation: wag 0.2s ease infinite both;
}

.hat {
  fill: #1A1A1A;
}

.band {
  fill: #D80E0E;
}

#droparea {
  fill: none;
  stroke: none;
}

.leaf {
  fill: #8cc63f;
}

.eaten {
  visibility: hidden;
}

#droparealeaf {
  stroke: none;
  fill: none;
}

#hat, #leaf1, #watermelon {
  opacity: 0;
}

.flesh {
  fill: #d4145a;
}

.skin {
  fill: #39b54a;
  transform-origin: bottom center;
  transform-box: fill-box;
}

.tooth {
  fill: #fefff3;
  stroke: #cccccc;
  stroke-width: 0.25;
}

.teeth.top {
  transform: translatey(-6px);
  transform-box: fill-box;
  opacity: 0;
}

.teeth.bottom {
  transform: translatey(6px);
  transform-box: fill-box;
  opacity: 0;
}

.shelf {
  stroke: #603813;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.dropzoneshelf {
  fill: none;
}

#watermelon {
  transform: scale(0.8);
  transform-box: fill-box;
  transform-origin: center bottom;
}

#glitterball {
  opacity: 0;
}

.star {
  fill: url(https://www.17sucai.com/preview/2413762/2021-10-16/%E5%96%82%E4%B9%8C%E9%BE%9F/%E2%95%AC%E2%95%A3%E2%95%AC%E2%94%8C%E2%95%A3%CE%A9/feed-my-tortoise/style.css#starfill);
}