*,
      *:before,
      *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 100%;
        font-weight: normal;
        background-color: MediumTurquoise;
      }



      .lemon {
        position: absolute;
        left: 50%;
        top:30%;
        transform: translate(-50%, -50%);
        transform: rotate(30deg);
        width: 200px;
        height: 310px;
        background-color: transparent;
      }

      .stem {
        position: absolute;
        z-index: 999;
        width: 30px;
        height: 10px;
        border-radius: 40%;
        transform: translateX(-50%);
        background-color: darkgoldenrod;
      }

      .kernelupper {
        z-index: 888;
        position: absolute;
        top: 5px;
        width: 100px;
        height: 40px;
        border-radius: 48%;
        transform: translateX(-50%); 
        background-color: #fff44f;
      }

      .kernel {
        z-index: 333;
        position: absolute;
        top: 13px;
        width: 200px;
        height: 260px;
        border-radius: 50%;
        transform: translateX(-50%); 
        background-color: #fff44f;
        
      }
/*
      .shade {
        z-index: 444;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: #fff44f;
      }
      */

      .dots {
        z-index: 555;
        position: absolute;
        top: 0px;
        width: 100px;
        height: 260px;
        border-radius: 100% / 50%;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        background-image: radial-gradient(gold 7%, transparent 5%), radial-gradient(goldenrod 7%, transparent 5%) ;
        background-position: 0 0, 20px 20px;
        background-size: 40px 40px;
        background-color: #fff44f;

      }

      .kernelbelow {
        z-index: -1;
        position: absolute;
        bottom: 5px;
        width: 100px;
        height: 300px;
        border-radius: 50%;
        transform: translateX(-50%); 
        background-color: #fff44f;
      }

     #a {
        position: absolute;
        left: 25%;
        top: 30%;
      }

     #c {
        position: absolute;
        left: 75%;
        top: 30%;
      }


      #d {
        position: absolute;
        left: 25%;
        top: 70%;
      }

      #e {
        position: absolute;

        top: 70%;
      }

      #f {
        position: absolute;
        left: 75%;
        top: 70%;
      }


@media screen and (max-width: 800px) {
       #a {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: rotate(30deg);
       }
       #b, #c, #d, #e, #f  {
        display: none;
         }

        }