* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
width: 100%;
height: 100vh;
}

svg {
      position: absolute; 
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: fill .05s ease forwards 350ms;
      /* height: 600px;
      width: 100%; */
}

@media screen and (max-width: 301px) {
      svg {
            height: 200px;
            width: 100%;
      }
}

@media only screen and (min-width: 301px) and (max-width: 600px) {
      svg {
            height: 300px;
            width: 100%;
      }
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
      svg {
            height: 400px;
            width: 100%;
      }
}

@media only screen and (min-width: 801px) and (max-width: 960px) {
      svg {
            height: 500px;
            width: 100%;
      }
}

@media only screen and (min-width: 961px) {
      svg {
            height: 500px;
            width: 100%;
      }
}

/* sparkle upper left  */
svg path:nth-child(1) {
      fill: rgb(160, 220, 250);
      stroke: rgb(39, 0, 168);
      stroke-width: 1px;
      stroke-dasharray: 25;
      stroke-dashoffset: 50;
      animation: dash 2s linear infinite, sparkle 1000ms alternate infinite;
}

/* sparkle lower right  */
svg path:nth-child(2) {
      fill: rgb(250, 160, 244);
      stroke: rgba(60, 18, 199, 0.623);
      stroke-width: 1px;
      stroke-dasharray: 25;
      stroke-dashoffset: 75;
      animation: sparkle 800ms ease alternate infinite, dash 3s linear infinite;
}

/* mint sprig  */
svg path:nth-child(3) {
      fill: rgb(51, 229, 119);
      stroke: rgba(12, 100, 41, 0.375);
      stroke-width: 1px;
      stroke-dasharray: 55;
      stroke-dashoffset: 125;
      animation: dash 8s linear infinite,
      color-change-mint 5000ms ease alternate infinite;
}

/* trying out various display options via CSS  */
svg path:nth-child(4) {
      display: none;
}

/* orange  */
svg path:nth-child(5) {
      fill: rgb(255, 157, 0);
}

/* orange-rind  */
svg path:nth-child(6) {
      fill: orangered;
}

/* cinnamon stix  */
svg path:nth-child(7) {
      display: none;
}

/* cocoa  */
svg path:nth-child(8) {
      fill: rgb(175, 96, 5);
}

/* base of cup  */
svg path:nth-child(9) {
      fill: rgb(138, 255, 112);
}

/* steam  */
svg path:nth-child(10) {
      fill: rgb(72, 164, 210);
      animation: steam 3000ms ease alternate infinite;
}

/* steam  */
svg path:nth-child(11) {
      fill: rgb(148, 73, 171);
      animation: steam 4000ms ease alternate infinite;
}

/* steam  */
svg path:nth-child(12) {
      fill: rgb(127, 90, 205);
      animation: steam 5000ms ease alternate infinite,
      dip 5000ms ease alternate infinite;
}

/* bowl of cup  */
svg path:nth-child(13) {
      animation: color-change-cup 5000ms ease alternate infinite;
}



/* ANIMATION  */

@keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
}

@keyframes sparkle {
      0% { opacity: .5; }
      10% { opacity: .55; }
      20% { opacity: .6; }
      30% { opacity: .65; }
      40% { opacity: .7; }
      50% { opacity: .75; }
      60% { opacity: .8; }
      70% { opacity: .85; }
      90% { opacity: .9; }
      100% { opacity: 1; }
} 

@keyframes steam {
      0% { opacity: .65; }
      10% { opacity: .6; }
      20% { opacity: .55; }
      30% { opacity: .5; }
      40% { opacity: .45; }
      50% { opacity: .4; }
      60% { opacity: .35; }
      70% { opacity: .3; }
      80% { opacity: .2; }
      90% { opacity: .15; }
      100% { opacity: .1; }
} 

@keyframes color-change-cup {
      0% { fill:rgb(71, 71, 255); }
      100% { fill:rgb(249, 21, 97); }
}

@keyframes color-change-mint {
      0% { fill:rgb(71, 255, 157); }
      100% { fill:rgb(4, 159, 89); }
}

@keyframes dip {
      0% { transform: translateY(0px); }
      100% { transform: translateY(50px); }
}