<div id="badge">
  <div id="frame">
    <div id="background">
      <svg id="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204 284">
        <circle class="outsideSun" cx="111.4203" cy="209.3872" r="83.027"/>
        <circle class="insideSun" cx="111.4203" cy="209.3872" r="56.8978"/>
      </svg>
      <div id="ground1"></div>
      <svg id="foothills" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.201 298.2029">
  <path class="hill" d="M178.8155,175.996S102.63,137.1352,66.911,136.6305,0,153.9847,0,153.9847V298.2029H302.201V188.1046c-38.2117,0-121.1137-43.3526-156.3047-28.12"/>
  <path class="hillBorder" d="M.1936,150.91c1.2979-.7407,32.1953-18.1216,68.21-17.6338,20.35.2866,52.8789,12.4087,77.7871,23.1338,22.1255-9,59.4507,2.5518,95.56,13.7271,23.4888,7.269,45.6748,14.1348,60.4507,14.1348v6.6113c-15.5591-.8691-40.0967-7.4248-62.4341-14.3374-29.7261-9.1987-62.9531-19.481-83.93-15.89,14.1,6.3369,24.147,11.42,25.2573,11.9844l-3.041,5.98c-.75-.3813-75.4307-38.1528-109.7441-38.6362-29.58-.4092-61.269,14.9325-68.1152,18.4793Zm305.3618,149.147"/>
</svg>
    </div>
    <div id="foreground">
      <div class="rotate">
        <svg id="prairie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204 284">
    <path class="wheat" d="M70.8,62.514a113.4391,113.4391,0,0,0-.7177-16.46c-1.2024-11.03-4.16-21.5793-7.2887-32.1835a.2978.2978,0,0,0-.576.1506,201.3514,201.3514,0,0,1,5.9484,30.85,108.388,108.388,0,0,1,.5143,15.2316c-.0142.4256-.0379.8512-.0645,1.2775C63.6919,72.1849,55.79,74.2787,59.5086,88.8915c-4.24-4.9109-10.106-5.3821-16.7953-10.204-3.168-6.0558-6.971-11.8725-9.47-18.1889C29.1,50.02,28.9417,38.4188,25.4952,27.7268c-.2287-.7094-1.343-.4273-1.1257.2948,3.2568,10.7879,3.4464,22.2514,7.1392,32.93a104.2728,104.2728,0,0,0,6.6532,14.086c1.8167,3.4608,3.6073,6.95,5.5478,10.3478,1.14,4.3993,1.7225,8.5977,3.72,11.4655,4.41,6.1382,11.6884,5.2572,16.8646,8.1484a29.4388,29.4388,0,0,0,.9362,5.7747c-4.8036-5.5637-11.6923-5.4253-19.5017-12.3721,4.7158,6.9676,4.0707,15.52,7.4228,20.3308,4.41,6.14,11.6881,5.2579,16.8642,8.149a29.4078,29.4078,0,0,0,.9364,5.7757c-4.8036-5.5637-11.6928-5.4257-19.5025-12.375,4.7169,6.97,4.0709,15.5228,7.423,20.3333,4.4107,6.1386,11.6884,5.2572,16.8648,8.1494a29.3947,29.3947,0,0,0,.9365,5.7741c-4.804-5.5631-11.6929-5.4257-19.5029-12.3728,4.7164,6.968,4.0706,15.5219,7.4231,20.3318,4.7332,6.5874,12.7693,5.09,17.9645,8.8463A48.9979,48.9979,0,0,0,80.0071,160.34c3.204-4.7989,9.6375-7.6412,10.4535-14.9459.5686-5.8356-4.1808-12.9783-3.479-21.3624-3.432,9.9469-9.5631,13.1762-10.9764,20.4822a39.0631,39.0631,0,0,0-1.7193-6.0569c3.204-4.799,9.6363-7.642,10.4535-14.9459.5688-5.8346-4.1814-12.9786-3.479-21.3624-3.4323,9.9475-9.5635,13.1768-10.9764,20.4822a39.0545,39.0545,0,0,0-1.72-6.0563c3.204-4.799,9.6366-7.641,10.453-14.9463.5688-5.8346-4.1812-12.9777-3.4787-21.3631-3.4323,9.9475-9.563,13.1788-10.9762,20.4831a38.9919,38.9919,0,0,0-1.72-6.0563c3.204-4.799,9.6369-7.6416,10.4535-14.9459.3724-3.8245-1.5342-8.2153-2.6984-13.144C70.6932,65.2171,70.7517,63.8427,70.8,62.514Z"/>
    <path class="wheat" d="M45.7145,51.2227c.1837,12.3865-6.4476,17.8835,10.5479,32.1934C55.8829,77.015,61.4649,71.04,58.4491,63.51c-1.7492-4.1949-6.68-7.5776-10.3713-12.4787C47.0019,46.48,46.1258,41.8787,45.18,37.3a62.45,62.45,0,0,0-3.5393-12.02c-1.9692-4.6344-4.4165-9.0641-5.2976-14.0709-.1183-.6794-1.1233-.3968-1.0252.2676a47.7286,47.7286,0,0,0,3.46,11.3552A75.1155,75.1155,0,0,1,43.3041,37.79C44.1421,42.0826,44.788,46.6867,45.7145,51.2227Z"/>
      <path class="wheat" d="M92.68,152.1127c-6.0339,8.8172-13.3914,8.9467-7.6977,25.6393-4.0216-7.9925-10.9255-2.81-18.73-9.7516,4.002,5.91,3.6367,9.3787,6.4817,13.4592,3.86,5.3734,10.3086,4.4076,14.7179,7.1566l13.2,56.303,4.0565-6.9289L88.0378,179.1c4.2187-2.0291,7.0526-4.3385,7.7921-10.9569C96.3138,163.1936,92.0856,159.225,92.68,152.1127Z"/>
      <path class="wheatHighlight" d="M77.9769,167.2533c-1.1329-.4861-2.265-.9517-3.3776-1.4341-1.7356-2.1447-3.7152-4.0377-5.2794-6.3365a.1919.1919,0,0,0-.3321.192,21.2,21.2,0,0,0,3.8727,5.3567,18.7981,18.7981,0,0,1-7.9654-6.2637c-.0993-.1467-.3426-.0074-.24.14,2.9094,4.189,8.0342,7.9171,13.1559,8.7358C78.0293,167.6793,78.2188,167.3571,77.9769,167.2533Z"/>
      <path class="wheatHighlight" d="M81.2642,155.5708c.75-.9784,1.5081-1.9393,2.2432-2.9048.464-2.7188,1.263-5.3388,1.5022-8.11a.192.192,0,0,1,.3838.0057,21.2042,21.2042,0,0,1-.7547,6.5662,18.7949,18.7949,0,0,0,3.8792-9.3607c.0154-.1761.2961-.1744.2778.004-.4864,5.0779-3.13,10.8367-7.1951,14.0578C81.4263,155.9676,81.1038,155.7787,81.2642,155.5708Z"/>
      <path class="wheatHighlight" d="M72.1609,145.01c-1.1324-.4858-2.265-.9517-3.3776-1.4341-1.736-2.1441-3.7155-4.0372-5.279-6.3371a.1924.1924,0,0,0-.3322.1935,21.194,21.194,0,0,0,3.8724,5.3557,18.8037,18.8037,0,0,1-7.9658-6.2631c-.0993-.1467-.3423-.008-.2393.1393,2.909,4.19,8.0339,7.9177,13.1559,8.7358C72.2131,145.4348,72.4028,145.1135,72.1609,145.01Z"/>
      <path class="wheatHighlight" d="M75.4482,133.3272c.75-.9785,1.5087-1.9389,2.2438-2.9044.4638-2.72,1.262-5.3386,1.5012-8.1093a.1925.1925,0,0,1,.3848.0055,21.2,21.2,0,0,1-.756,6.5655,18.7858,18.7858,0,0,0,3.88-9.3594c.0155-.1776.2955-.1747.2777.0041-.4865,5.077-3.1308,10.8364-7.1959,14.0565C75.61,133.7231,75.2881,133.5361,75.4482,133.3272Z"/>
      <path class="wheatHighlight" d="M66.3452,122.7671c-1.1328-.4877-2.2653-.9526-3.3779-1.435-1.7356-2.1447-3.7152-4.0377-5.2794-6.3365a.192.192,0,0,0-.3319.1929,21.2006,21.2006,0,0,0,3.8719,5.3554,18.7975,18.7975,0,0,1-7.9649-6.2634c-.1-.146-.3426-.0074-.2393.1392,2.9093,4.1906,8.0339,7.9178,13.1562,8.7368C66.3975,123.1906,66.5869,122.87,66.3452,122.7671Z"/>
      <path class="wheatHighlight" d="M69.6319,111.0842c.75-.98,1.5087-1.9389,2.2435-2.9053.4644-2.7194,1.2631-5.3389,1.5022-8.11a.1923.1923,0,0,1,.3844.0061,21.2,21.2,0,0,1-.7559,6.5654,18.788,18.788,0,0,0,3.88-9.36c.0151-.1771.2952-.1741.2772.0037-.4861,5.0789-3.13,10.8367-7.1957,14.0575C69.7945,111.4788,69.4721,111.2925,69.6319,111.0842Z"/>
      <path class="wheatHighlight" d="M60.529,100.5226c-1.1329-.4862-2.2646-.9524-3.3776-1.4341-1.736-2.1441-3.7154-4.0387-5.2794-6.3365a.192.192,0,0,0-.3319.1929A21.1809,21.1809,0,0,0,55.4124,98.3a18.7875,18.7875,0,0,1-7.9655-6.2622c-.0993-.1467-.3419-.0086-.239.1386,2.9093,4.1906,8.0341,7.9187,13.1552,8.737C60.5818,100.9479,60.7709,100.6264,60.529,100.5226Z"/>
      <path class="wheatHighlight" d="M63.8158,88.84c.7505-.9781,1.5086-1.9389,2.2443-2.904.4638-2.72,1.2621-5.3386,1.5018-8.109a.1919.1919,0,0,1,.3836.0048,21.2021,21.2021,0,0,1-.7554,6.5658,18.788,18.788,0,0,0,3.88-9.36c.0158-.1767.2949-.1751.2772.0037-.4858,5.0783-3.1306,10.8373-7.1955,14.0585C63.9789,89.2362,63.6562,89.0489,63.8158,88.84Z"/>
      <path class="wheatHighlight" d="M54.317,76.3582c.2334-1.21.4858-2.4082.7118-3.6-.7958-2.6418-1.25-5.3425-2.27-7.929a.1922.1922,0,0,1,.3466-.1658,21.2654,21.2654,0,0,1,2.2507,6.2134,18.7823,18.7823,0,0,0-.7-10.1083c-.0644-.1649.1859-.2872.25-.1192,1.8292,4.7608,2.0307,11.0948-.173,15.7911C54.639,76.64,54.2666,76.6161,54.317,76.3582Z"/>
      <path class="wheat" d="M159.7329,93.5472c2.917-7.2536,4.5835-14.7916,6.1621-22.42a.21.21,0,0,0-.4077-.0973,141.9555,141.9555,0,0,1-6.5519,21.1463,75.1014,75.1014,0,0,1-3.7791,7.9133c-7.5373,5.3306-13.6518,3.297-15.4822,19.5231,3.7169-2.8059,9.5742-1.8375,12.9113-6.6912,1.77-2.6545,1.88-6.8006,3.22-10.87A85.3163,85.3163,0,0,0,159.7329,93.5472Z"/>
      <path class="wheat" d="M147.1025,99.5522c.2263-3.4469-2.1085-7.435-2.83-12.074.7942-2.91,1.6907-5.7945,2.5448-8.686a44.057,44.057,0,0,0,1.7937-8.645c.3163-3.5342.2666-7.1,1.3825-10.5042.1514-.461-.5668-.6188-.7268-.1738a33.6184,33.6184,0,0,0-1.6208,8.2059,52.986,52.986,0,0,1-2.1572,10.7991c-.9842,3.198-2.23,6.55-3.2006,9.9536-3.8674,7.2807-9.2011,9.1919-3.03,23.3688C141.0763,107.5093,146.6348,105.4235,147.1025,99.5522Z"/>
      <path class="wheat" d="M131.0958,100.9218a91.8,91.8,0,0,1,.1705-11.9016c.9067-7.8873,4.6614-15.1494,6.0717-22.9385.0945-.5162-.6924-.7112-.7968-.1906-1.5606,7.7854-5.25,14.9728-6.5027,22.8348a73.42,73.42,0,0,0-.5453,10.9629c-.0174,2.2559-.0508,4.5176-.0208,6.776-.7589,2.983-1.6866,5.6795-1.4066,8.0515.7761,5.8394,6.4354,7.6308,8.4767,11.8161C142.49,110.4413,135.3759,110.0285,131.0958,100.9218Z"/>
      <path class="wheat" d="M118.79,146.873c.6352,6.0779-2.707,11.335-2.207,15.5624.7761,5.84,6.4353,7.6315,8.4762,11.8164C131.4077,157.29,122.8744,157.9633,118.79,146.873Z"/>
      <path class="wheatHighlight" d="M119.6284,150.3825c.472,4.5236-2.0155,8.4359-1.6431,11.5828.5773,4.346,4.7889,5.6795,6.3083,8.7941,1.1112-3.22-3.5627-6.253-4.2639-8.4914C118.9541,158.833,121.4679,155.38,119.6284,150.3825Z"/>
      <path class="wheat" d="M146.1884,145.9679c-3.32,5.1291-2.7234,11.3307-5.0859,14.8729-3.3373,4.8533-9.1952,3.8859-12.9115,6.6908C130.22,149.5349,137.5226,154.0029,146.1884,145.9679Z"/>
      <path class="wheat" d="M122.6179,130.9c.6354,6.0772-2.7073,11.3346-2.2075,15.5627.7763,5.84,6.4353,7.6315,8.4766,11.8162C135.2351,141.3161,126.7021,141.99,122.6179,130.9Z"/>
      <path class="wheat" d="M150.0161,129.9947c-3.32,5.1291-2.7226,11.33-5.0859,14.8729-3.3377,4.8536-9.1947,3.885-12.9117,6.6915C134.0481,133.5617,141.35,138.0293,150.0161,129.9947Z"/>
      <path class="wheat" d="M126.4456,114.9268c.6358,6.077-2.7072,11.3346-2.207,15.5625.7759,5.84,6.4353,7.6315,8.4762,11.8164C139.0628,125.343,130.53,126.017,126.4456,114.9268Z"/>
      <path class="wheat" d="M153.8438,114.0216c-3.32,5.1291-2.7228,11.33-5.0862,14.8726-3.3376,4.8546-9.1944,3.8854-12.9113,6.6912C137.8758,117.5886,145.1778,122.0562,153.8438,114.0216Z"/>
      <path class="wheat" d="M138.6525,165.6672c-6.6785,3.4746-11.2936,1.1109-13.3,13.3757.1549-6.3025-5.8561-5.3757-8.3992-12.2817.523,5.0017-.8557,7.0361-.4448,10.5165.6145,4.6211,4.942,6.1632,6.7687,9.3369l-12.9129,55.6411,4.8234-2.9586,11.6147-58.4016c3.2949.14,5.8231-.3532,8.4824-4.22C137.2282,173.76,135.92,169.8892,138.6525,165.6672Z"/>
      <path class="wheatHighlight" d="M143.5407,149.04c-2.4713,3.818-2.0267,8.4336-3.7852,11.07-2.4848,3.6125-6.844,2.8922-9.61,4.98.47-3.3742,6.0112-3.9587,7.65-5.6367C140.3117,156.8779,139.636,152.6607,143.5407,149.04Z"/>
      <path class="wheatHighlight" d="M123.4863,134.2835c.472,4.5236-2.0159,8.4362-1.6431,11.5828.5773,4.346,4.7889,5.6795,6.3083,8.7941,1.1114-3.221-3.5632-6.2527-4.2643-8.4911C122.8124,142.7337,125.3261,139.2808,123.4863,134.2835Z"/>
      <path class="wheatHighlight" d="M147.399,132.94c-2.4713,3.818-2.0275,8.4341-3.7854,11.0691-2.4845,3.613-6.8437,2.8926-9.61,4.9805.4706-3.3745,6.0114-3.9595,7.65-5.6367C144.17,140.7782,143.494,136.561,147.399,132.94Z"/>
      <path class="wheatHighlight" d="M127.3446,118.1842c.472,4.5236-2.0159,8.4362-1.6434,11.5824.5771,4.3466,4.7887,5.68,6.3081,8.7948,1.111-3.2207-3.5627-6.253-4.2638-8.4914C126.67,126.635,129.1836,123.182,127.3446,118.1842Z"/>
      <path class="wheatHighlight" d="M151.2562,116.8411c-2.4711,3.8183-2.0267,8.4336-3.7852,11.07-2.4837,3.6125-6.8432,2.8917-9.61,4.98.47-3.3736,6.0108-3.9585,7.6507-5.6362C148.0272,124.6795,147.3514,120.4622,151.2562,116.8411Z"/>
      <path class="wheatHighlight" d="M131.202,102.0855c.472,4.5236-2.0159,8.4362-1.6425,11.5819.5763,4.3471,4.7879,5.6807,6.3077,8.795,1.1114-3.221-3.5625-6.2537-4.2637-8.4921C130.5279,110.5353,133.0416,107.0824,131.202,102.0855Z"/>
      <path class="wheatHighlight" d="M155.1145,100.7419c-2.4711,3.8184-2.0267,8.4336-3.7852,11.07-2.4847,3.6126-6.844,2.8922-9.6105,4.98.4705-3.3745,6.0116-3.959,7.6508-5.6362C151.8855,108.58,151.21,104.3629,155.1145,100.7419Z"/>
      <path class="wheatHighlight" d="M143.0888,88.1218c-.28,4.5388,2.3711,8.3425,2.1318,11.5023-.3915,4.3665-4.5438,5.8764-5.93,9.0535-1.2454-3.1707,3.2958-6.3983,3.9015-8.6648C144.12,96.5354,141.4624,93.1919,143.0888,88.1218Z"/>
        <circle class="wheatHighlight" cx="122.7675" cy="161.1949" r="1.1905" transform="translate(-62.5865 243.0457) rotate(-76.5326)"/>
        <circle class="wheatHighlight" cx="126.6951" cy="144.8051" r="1.1901" transform="translate(-43.6611 234.2418) rotate(-76.5156)"/>
        <circle class="wheatHighlight" cx="130.6225" cy="128.415" r="1.1907" transform="translate(-24.6968 225.5158) rotate(-76.5241)"/>
        <circle class="wheatHighlight" cx="134.55" cy="112.0252" r="1.1903" transform="translate(-5.7771 216.7231) rotate(-76.5071)"/>
        <circle class="wheatHighlight" cx="135.5088" cy="157.2255" r="1.1905" transform="translate(-48.9806 252.3368) rotate(-76.5156)"/>
        <circle class="wheatHighlight" cx="139.4365" cy="140.8356" r="1.1906" transform="translate(-30.0168 243.6109) rotate(-76.5233)"/>
        <circle class="wheatHighlight" cx="143.364" cy="124.4456" r="1.1901" transform="translate(-11.0808 234.8391) rotate(-76.5156)"/>
        <circle class="wheatHighlight" cx="147.2915" cy="108.0557" r="1.1905" transform="translate(7.9041 226.1319) rotate(-76.5326)"/>
        <circle class="wheatHighlight" cx="140.3478" cy="98.8538" r="1.1901" transform="translate(11.4926 212.2818) rotate(-76.5156)"/>
</svg>
      </div>
      <div id="ground2"></div>
    </div>
    <div id="titles">
      <h1><span class="top">- For the Love of the -</span><span class="bottom">Prairies</span></h1>
    </div>
  </div>
</div>

$c1: #e04097;
$c2: #ec6890;
$fg: #f5e08b;

* {
  margin: 0;
  position: relative;
  animation-fill-mode: forwards;
}

html,
body {
  font-family: 'Open Sans Condensed', sans-serif;
  height: 100%;
  background-color: white;
}

#badge {
  width: 220px;
  height: 300px;
  top: calc(50% - 160px);
  margin: 0 auto;
  overflow: hidden;
}

#frame {
  height: 100%;
  background-color: #f2adb1;
  border: 8px solid $c1;
  box-sizing: border-box;
  border-radius: 20px;
}

#foreground,
#background {
  position: absolute;
  z-index: 2;
  width: 204px;
  height: 284px;
  bottom: 0px;
  border-radius: 12px;
  overflow: hidden;
}

#titles {
  position: absolute;
  z-index: 3;
  bottom: 25px;
  text-align: center;
  text-transform: uppercase;
  width: 205px;
}

/* ~~ Text Styles ~~ */
h1 span {
  width: 100%;
  display: block;
}
h1 .bottom {
  margin: 0;
  background-color: $c1; 
  color: white;
  animation-name: enterLeft;
  animation-duration: 2s;
  animation-delay: 3s;
  left: -100%;
}

h1 .top {
  display: inline-block;
  background-color: $c2;
  font-weight: 300;
  color: white;
  font-size: .7em;
  animation-name: enterRight;
  animation-duration: 2s;
  animation-delay: 3s;
  right: -110%;
}

/* ~~ Background Styles ~~ */

#ground1, #ground2 {
  background-color: $fg;
  border-top: 8px solid white;
  position: absolute;
  width: 204px;
  height: 110px;
  bottom: 0;
  z-index: 2;
}
#ground2 {
  border: none;
  height: 30px;
}
.insideSun {
  fill: $c1;
}
.outsideSun {
  fill: $c2;
}
#sun { 
  width: 90%;
  top: 110%;
  animation-name: riseUp;
  animation-duration: 5s;
  animation-delay: 0s;
}


/* ~~ FOREGROUND STYLES ~~ */

/* ~~~ Hill Style ~~~ */

#foothills {
  position: absolute;
  z-index: 2;
  bottom: 3px;
  width: 302px;
  animation-name: enterLeft;
  animation-duration: 5s;
  animation-delay: 1s;
  left: -110%;
}
.hill {
  fill: $fg;
}
.hillBorder{
  fill: #fff;
}

/* ~~~ Wheat Style ~~~ */
#prairie {
  position: absolute;
  z-index: 2;
  animation-name: riseUp;
  animation-duration: 2s;
  animation-delay: 4s;
  top: 110%;
  margin-top: 40px;
}
.wheatHighlight {
  fill: #fff;
}
.wheat {
  fill: #ec9f59;
}

/* ~~~ Mountain Style ~~~ 
#mountain { 
}
.mountain {
  fill: #fff;
}
.mountainBorder {
  fill: #333;
}
*/


/* ~~~~ ANIMATIONS ~~~~~ */

.rotate {
  animation-name: rotate;
  animation-duration: 6s;
  animation-delay: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: 50% 150%;
  width: 204px;
  height: 284px;
}

@keyframes enterLeft {
  from {
    left: -110%;
  }
  to {
    left: 0;
  }
}

@keyframes enterRight {
  from {
    right: -110%;
  }
  to {
    right: 0;
  }
}

@keyframes riseUp {
  from {
    top: 110%;
  }
  to {
    top: -60px;
  }
}

@keyframes dropIn {
  from {
    top: -110%;
  }
  to {
    top: 0;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(0.9, 0.9);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(1deg);
  }
  75% {
    -webkit-transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}