A CSS deer

This example renders a deer.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  (OK)
Sun is missing
Antennahouse  ERROR
Weasyprint  ERROR
PagedJS  OK
Typeset.sh  ERROR
no background
Vivliostyle  ERROR
BFO  ERROR
empty second page
OK OK with issues Error Unsupported

HTML input

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" href="../styles/a4.css">
  4.         <link rel="stylesheet" type="text/css" href="styles.css">
  5.     </head>
  6.     <body>
  7.     <div class="container">
  8.         <div id="sun"></div>
  9.         <section id="deer-wrapper">
  10.             <section id="deer">
  11.                 <div class="horns">
  12.                     <span class="horn-1"></span>
  13.                     <span class="horn-2"></span>
  14.                     <span class="horn-3"></span>
  15.                     <span class="horn-4"></span>
  16.                     <span class="horn-5"></span>
  17.                     <span class="horn-6"></span>
  18.                     <span class="horn-7"></span>
  19.                     <span class="horn-8"></span>
  20.                 </div>
  21.                 <div class="head">
  22.                     <span class="face">
  23.                         <span class="eye"></span>
  24.                         <span class="nose">
  25.                             <span class="detail-nose"></span>
  26.                         </span>
  27.                         <span class="detail"></span>
  28.                         <span class="detail-2"></span>
  29.                     </span>
  30.                     <span class="ears"></span>
  31.                 </div>
  32.  
  33.                 <div class="neck"></div>
  34.                 <div class="neck-hair">
  35.                     <span class="hair hair-1"></span>
  36.                     <span class="hair hair-2"></span>
  37.                     <span class="hair hair-3"></span>
  38.                 </div>
  39.  
  40.                 <div class="body">
  41.                     <div class="bottom"></div>
  42.                 </div>
  43.  
  44.                 <div class="loin"></div>
  45.                 <div class="tail"></div>
  46.  
  47.                 <div class="legs">
  48.                     <span class="leg leg-1"></span>
  49.                     <span class="leg leg-2"></span>
  50.                     <span class="leg leg-3">
  51.                         <span class="detail"></span>
  52.                     </span>
  53.                     <span class="leg leg-4">
  54.                         <span class="detail-1"></span>
  55.                         <span class="detail-2"></span>
  56.                     </span>
  57.                 </div>
  58.                 <div class="hooves">
  59.                     <span class="hoof hoof-1">
  60.                         <span class="claw"></span>
  61.                     </span>
  62.                     <span class="hoof hoof-2">
  63.                         <span class="claw"></span>
  64.                     </span>
  65.                     <span class="hoof hoof-3">
  66.                         <span class="claw"></span>
  67.                     </span>
  68.                     <span class="hoof hoof-4">
  69.                         <span class="claw"></span>
  70.                     </span>
  71.                 </div>
  72.  
  73.             </section>
  74.             <!--Grass-->
  75.             <div id="grass-container">
  76.                 <span class="grass grass-1 left"></span>
  77.                 <span class="grass grass-2 left"></span>
  78.                 <span class="grass grass-3 left"></span>
  79.                 <span class="grass grass-4 left"></span>
  80.  
  81.                 <span class="inside-grass">
  82.                     <span class="grass grass-1 left"></span>
  83.                     <span class="grass grass-2 left"></span>
  84.                     <span class="grass grass-3 left"></span>
  85.                 </span>
  86.  
  87.                 <span class="grass grass-1 right"></span>
  88.                 <span class="grass grass-2 right"></span>
  89.             </div>
  90.         </section>
  91.         <span class="floor-grass"></span>
  92.     </div>
  93. </body>
  94. </html>

Stylesheet

  1. * {
  2.     box-sizing: border-box;
  3. }
  4.  
  5. html {
  6.     height: 100%;
  7. }
  8.  
  9. body {
  10.     background: #F0E6DC;
  11.     background: radial-gradient(at 76% 28%,#FFE2B2 -37%,rgba(226, 157, 117, 0.77) 101%);;
  12.     height: 100%;
  13. }
  14.  
  15. /*Colors*/
  16. .floor-grass {
  17.     background: #e45b3b;
  18. }
  19.  
  20. .container {
  21.     height: 530px;
  22.     position: absolute;
  23.     overflow: hidden;
  24.     width: 100%;
  25.     bottom: 0;
  26. }
  27.  
  28. .container > .floor-grass {
  29.     position: absolute;
  30.     bottom: 0;
  31.     height: 5px;
  32.     display: block;
  33.     width: 100%;
  34.     border-bottom: 1px solid #e45b3b;
  35. }
  36.  
  37. #deer-wrapper {
  38.     height: 510px;
  39.     width: 763px;
  40.     position: absolute;
  41.     left: 50%;
  42.     bottom: 0;
  43.     transform: translate(-50%, 0);
  44. }
  45.  
  46.  
  47. #sun {
  48.     position: fixed;
  49.     right: 20%;
  50.     top: 20%;
  51.     height: 137px;
  52.     width: 137px;
  53.     background: #E4593A;
  54.     border-radius: 50%;
  55.     box-sizing: border-box;
  56.     padding: 5px;
  57.     border: 10px solid #E89880;
  58. }
  59.  
  60.  
  61. #deer .body {
  62.     position: absolute;
  63.     height: 116px;
  64.     width: 289px;
  65.     background: #C8906F;
  66.     top: 228px;
  67.     left: 266px;
  68.     border-top-right-radius: 78px;
  69. }
  70.  
  71. #deer .body:after {
  72.     content: "";
  73.     height: 61px;
  74.     position: absolute;
  75.     width: 139px;
  76.     background: #E1B49D;
  77.     bottom: 0;
  78.     left: 59px;
  79.     border-radius: 34px 34px 0 0;
  80. }
  81.  
  82. #deer .body:before {
  83.     content: "";
  84.     position: absolute;
  85.     /* top: 0; */
  86.     right: 0;
  87.     height: 0;
  88.     width: 0;
  89.     bottom: 0;
  90.     left: 197px;
  91.     border: solid;
  92.     border-width: 0 3px 13px 1px;
  93.     border-color: transparent transparent #E1B49D transparent;
  94.     z-index: 99;
  95. }
  96.  
  97. #deer .body .bottom {
  98.     position: absolute;
  99.     height: 128px;
  100.     width: 160px;
  101.     background: #C8906F;
  102.     right: -14px;
  103.     top: -12px;
  104.     border-radius: 50%;
  105. }
  106.  
  107. #deer .bottom:after {
  108.     content: "";
  109.     position: absolute;
  110.     height: 96px;
  111.     width: 108px;
  112.     background: #C8906F;
  113.     border-radius: 50%;
  114.     right: -1px;
  115.     top: 39px;
  116. }
  117.  
  118. #deer .bottom:before {
  119.     content: "";
  120.     position: absolute;
  121.     height: 122px;
  122.     width: 93px;
  123.     background: #C8906F;
  124.     border-radius: 50%;
  125.     right: -5px;
  126.     top: 20px;
  127.     z-index: 99;
  128.     transform: rotate(6deg);
  129. }
  130.  
  131. #deer .loin {
  132.     position: absolute;
  133.     top: 220px;
  134.     height: 8px;
  135.     width: 205px;
  136.     background: #B67E5D;
  137.     left: 266px;
  138.     z-index: -1;
  139.     border-top: 1px solid #AB7656;
  140. }
  141.  
  142. #deer .tail {
  143.     position: absolute;
  144.     top: 279px;
  145.     height: 44px;
  146.     width: 21px;
  147.     right: 180px;
  148.     background: #B67E5B;
  149.     border-radius: 0 0 0 100%;
  150.     transform: rotate(-42deg);
  151. }
  152.  
  153. #deer .legs .leg {
  154.     position: absolute;
  155. }
  156.  
  157. #deer .legs .leg-1,
  158. #deer .legs .leg-2 {
  159.     background: #c8906f;
  160. }
  161.  
  162. #deer .legs .leg-1 {
  163.     top: 335px;
  164.     width: 137px;
  165.     height: 32px;
  166.     left: 188px;
  167.     border-radius: 66px 0 69px 0;
  168. }
  169.  
  170.  
  171. #deer .legs .leg-2 {
  172.     top: 343px;
  173.     height: 89px;
  174.     width: 21px;
  175.     background: #98644C;
  176.     left: 291px;
  177.     border-bottom-right-radius: 21px;
  178.     z-index: -7;
  179. }
  180.  
  181. #deer .legs .leg-2:after {
  182.     content: "";
  183.     position: absolute;
  184.     height: 84px;
  185.     width: 20px;
  186.     background: #98644C;
  187.     right: -7px;
  188.     transform: rotate(10deg);
  189.     top: -8px;
  190.     border-bottom-right-radius: 6px;
  191. }
  192.  
  193. #deer .legs .leg-2:before {
  194.     content: "";
  195.     position: absolute;
  196.     height: 19px;
  197.     width: 24px;
  198.     right: -13px;
  199.     background: #98644C;
  200.     top: 56px;
  201.     border-bottom-right-radius: 100%;
  202.     z-index: -2;
  203. }
  204.  
  205. #deer .legs .leg-3 {
  206.     right: 295px;
  207.     top: 344px;
  208.     height: 72px;
  209.     width: 73px;
  210.     background: #98644C;
  211.     border-bottom-left-radius: 89%;
  212. }
  213.  
  214. #deer .legs .leg-3:after {
  215.     content: "";
  216.     position: absolute;
  217.     bottom: 0px;
  218.     height: 26px;
  219.     width: 27px;
  220.     background: #98644C;
  221.     z-index: -1;
  222.     left: 72px;
  223.     border-top-right-radius: 100%;
  224. }
  225.  
  226. #deer .legs .leg-3:before {
  227.     content: "";
  228.     background: #98644C;
  229.     width: 20px;
  230.     height: 20px;
  231.     position: absolute;
  232.     right: -30px;
  233.     top: 51px;
  234.     border-bottom-right-radius: 100%;
  235. }
  236.  
  237. #deer .legs .leg-3 .detail {
  238.     position: absolute;
  239.     right: -6px;
  240.     background: #98644C;
  241.     width: 20px;
  242.     height: 20px;
  243.     top: 39px;
  244.     transform: rotate(43deg);
  245. }
  246.  
  247. #deer .legs .leg-3 .detail:after {
  248.     content: "";
  249.     position: absolute;
  250.     right: 8px;
  251.     width: 19px;
  252.     height: 9px;
  253.     background: #98644C;
  254.     transform: rotate(20deg);
  255.     top: -3px;
  256. }
  257.  
  258. #deer .legs .leg-4 {
  259.     left: 467px;
  260.     top: 327px;
  261.     background: #C8906F;
  262.     width: 86px;
  263.     height: 71px;
  264.     z-index: 999999999;
  265.     /* border-bottom-left-radius: 94%; */
  266.     border-radius: 0 0 0 103% / 0 0 0 100%;
  267.     transform: rotate(-3deg);
  268. }
  269.  
  270. #deer .legs .leg-4:after {
  271.     content: "";
  272.     transform: rotate(3deg);
  273.     top: 38px;
  274.     right: -29px;
  275.     background: #C8906F;
  276.     width: 35px;
  277.     height: 34px;
  278.     position: absolute;
  279.     border-radius: 0 93% 0 5px;
  280. }
  281.  
  282. #deer .legs .leg-4:before {
  283.     content: "";
  284.     position: absolute;
  285.     height: 43px;
  286.     width: 58px;
  287.     right: -47px;
  288.     top: -4px;
  289.     transform: rotate(52deg);
  290.     border-radius: 50%;
  291.     border-bottom: 12px solid #C8906F;
  292.     z-index: 1000;
  293. }
  294.  
  295. #deer .legs .leg-4 .detail-1 {
  296.     position: absolute;
  297.     background: #C8906F;
  298.     height: 28px;
  299.     width: 10px;
  300.     right: -6px;
  301.     top: 21px;
  302.     transform: rotate(-30deg);
  303.     z-index: 100;
  304. }
  305.  
  306.  
  307. #deer .legs .leg-4 .detail-2 {
  308.     position: absolute;
  309.     background: #C8906F;
  310.     height: 20px;
  311.     width: 20px;
  312.     right: -35px;
  313.     top: 46px;
  314.     transform: rotate(3deg);
  315.     border-radius: 0 0 100% 0;
  316. }
  317.  
  318.  
  319. #deer .hooves .hoof {
  320.     position: absolute;
  321.     background: #7A564A;
  322. }
  323.  
  324. #deer .hooves .hoof-1 {
  325.     width: 28px;
  326.     height: 59px;
  327.     top: 366px;
  328.     left: 224px;
  329.     transform: skewX(48deg);
  330.     z-index: -3;
  331. }
  332.  
  333. #deer .hooves .hoof-1:after {
  334.     position: absolute;
  335.     left: 20px;
  336.     background: #7A564A;
  337.     height: 57px;
  338.     width: 9px;
  339.     top: 0;
  340.     content: "";
  341.     transform: rotate(8deg);
  342. }
  343.  
  344. #deer .hooves .hoof-1:before {
  345.      position: absolute;
  346.      content: "";
  347.      /* background: red; */
  348.      height: 0;
  349.      width: 0;
  350.      border-style: solid;
  351.      border-color: transparent #7A564B transparent transparent;
  352.      border-width: 10px 10px 10px 0px;
  353.      left: 25px;
  354.      transform: skew(-48deg);
  355.      top: 31px;
  356.  }
  357.  
  358. #deer .hooves .hoof-1 .claw {
  359.     position: absolute;
  360.     background: #3E2B25;
  361.     width: 15px;
  362.     height: 20px;
  363.     transform: skew(-48deg);
  364.     top: 39px;
  365.     left: 25px;
  366.     z-index: 100;
  367. }
  368.  
  369. #deer .hooves .hoof-1 .claw:after {
  370.     content: "";
  371.     height: 0;
  372.     width: 0;
  373.     border-style: solid;
  374.     border-color: transparent transparent transparent #3E2B25;
  375.     border-width: 20px 0 0 14px;
  376.     left: 14px;
  377.     position: absolute;
  378.     top: 0;
  379.     z-index: 100;
  380. }
  381.  
  382. #deer .hooves .hoof-2 {
  383.     height: 62px;
  384.     width: 16px;
  385.     top: 421px;
  386.     left: 291px;
  387.     z-index: -10;
  388.     border-radius: 10px 0 0 0;
  389. }
  390.  
  391. #deer .hooves .hoof-2:before {
  392.     content: "";
  393.     background: #7A564A;
  394.     position: absolute;
  395.     height: 69px;
  396.     width: 5px;
  397.     right: -2px;
  398.     transform: rotate(5deg);
  399.     top: -7px;
  400. }
  401.  
  402. #deer .hooves .hoof-2:after {
  403.     content: "";
  404.     /* background: red; */
  405.     position: absolute;
  406.     bottom: 0;
  407.     height: 0;
  408.     width: 0;
  409.     border-style: solid;
  410.     border-color: transparent transparent rgb(127, 85, 72) transparent;
  411.     border-width: 0 10px 10px 10px;
  412.     right: -9px;
  413. }
  414.  
  415. #deer .hooves .hoof-2 .claw,
  416. #deer .hooves .hoof-3 .claw,
  417. #deer .hooves .hoof-4 .claw {
  418.     position: absolute;
  419.     background: #3E2B25;
  420.     width: 17px;
  421.     height: 23px;
  422.     bottom: -23px;
  423.     right: -1px;
  424. }
  425.  
  426. #deer .hooves .hoof-2 .claw:before,
  427. #deer .hooves .hoof-3 .claw:before,
  428. #deer .hooves .hoof-4 .claw:before {
  429.     content: "";
  430.     height: 0;
  431.     width: 0;
  432.     border-style: solid;
  433.     border-color: transparent #3E2B25 transparent transparent;
  434.     border-width: 23px 11px 0 21px;
  435.     left: -31px;
  436.     position: absolute;
  437.     top: -1px;
  438. }
  439.  
  440. #deer .hooves .hoof-3 {
  441.     top: 400px;
  442.     left: 441px;
  443.     width: 18px;
  444.     height: 73px;
  445.     transform: skew(-25deg);
  446.     z-index: -3;
  447. }
  448.  
  449.  
  450. #deer .hooves .hoof-3:after {
  451.     content: "";
  452.     height: 75px;
  453.     width: 16px;
  454.     position: absolute;
  455.     background: #7A564A;
  456.     transform: rotate(8deg);
  457.     left: 8px;
  458.     top: 0;
  459. }
  460.  
  461. #deer .hooves .hoof-3:before {
  462.     content: "";
  463.     width: 0;
  464.     height: 0;
  465.     border-style: solid;
  466.     border-color: transparent transparent transparent #7A564A;
  467.     border-width: 22px 0 0 29px;
  468.     left: 0;
  469.     position: absolute;
  470.     bottom: -10px;
  471. }
  472. #deer .hooves .hoof-3 .claw {
  473.     transform: skew(25deg);
  474.     bottom: -33px;
  475.     right: -4px;
  476. }
  477.  
  478. #deer .hooves .hoof-4 {
  479.     left: 555px;
  480.     top: 396px;
  481.     height: 87px;
  482.     width: 16px;
  483. }
  484.  
  485. #deer .hooves .hoof-4:before {
  486.     content: "";
  487.     width: 10px;
  488.     height: 90px;
  489.     position: absolute;
  490.     left: -4px;
  491.     background: #7A564A;
  492.     transform: rotate(-4deg);
  493.     top: -3px;
  494. }
  495.  
  496. #deer .hooves .hoof-4:after {
  497.     content: "";
  498.     position: absolute;
  499.     width: 0;
  500.     height: 0;
  501.     border-style: solid;
  502.     border-color: transparent transparent transparent #7A564A;
  503.     border-width: 25px 0 0 26px;
  504.     left: 0;
  505.     bottom: -1px;
  506. }
  507.  
  508. #deer .hooves .hoof-4 .claw {
  509.     bottom: -23px;
  510.     right: 0;
  511. }
  512.  
  513.  
  514. #deer .neck {
  515.     position: absolute;
  516.     width: 126px;
  517.     height: 74px;
  518.     background: #C8906F;
  519.     border-radius: 333px 100px 100px 359px / 131px 50px 50px 172px;
  520.     top: 199px;
  521.     left: 189px;
  522.     transform: rotate(38deg);
  523.     z-index: 10;
  524. }
  525.  
  526. #deer .neck-hair {
  527.     position: absolute;
  528.     width: 159px;
  529.     height: 79px;
  530.     background: #B67E5D;
  531.     border-radius: 100px 126px / 50px 53px;
  532.     top: 156px;
  533.     left: 211px;
  534.     transform: rotate(56deg);
  535.     transform-origin: left;
  536.     z-index: -100;
  537. }
  538.  
  539. #deer .neck-hair .hair {
  540.     position: absolute;
  541.     height: 0;
  542.     width: 0;
  543.     border-style: solid;
  544.     border-color: transparent #B67E5D transparent transparent;
  545.     border-width: 14px 14px 14px 0;
  546.     transform: rotate(-13deg);
  547. }
  548.  
  549. #deer .head .ears {
  550.     position: absolute;
  551.     top: -1px;
  552.     left: -21px;
  553.     width: 54px;
  554.     background: #C8906F;
  555.     height: 22px;
  556.     border-top-left-radius: 100%;
  557.     transform: rotate(31deg);
  558.     z-index: -50;
  559. }
  560.  
  561. #deer .head .ears:after {
  562.     content: "";
  563.     width: 53px;
  564.     height: 15px;
  565.     background: #E1B49D;
  566.     position: absolute;
  567.     top: 7px;
  568.     left: -1px;
  569.     border-top-left-radius: 100%;
  570.     transform: rotate(2deg);
  571. }
  572.  
  573.  
  574. span.ears:before {
  575.     content: "";
  576.     width: 37px;
  577.     height: 9px;
  578.     background: #E1B49D;
  579.     position: absolute;
  580.     top: 20px;
  581.     left: -1px;
  582.     border-bottom-left-radius: 100%;
  583.     transform: rotate(0deg);
  584. }
  585.  
  586. #deer .neck-hair .hair-1 {
  587.     left: 40px;
  588.     top: 58px;
  589. }
  590.  
  591. #deer .neck-hair .hair-2 {
  592.     left: 56px;
  593.     top: 61px;
  594. }
  595.  
  596. #deer .neck-hair .hair-3 {
  597.     left: 70px;
  598.     top: 61px;
  599. }
  600.  
  601.  
  602. #deer .head {
  603.     position: absolute;
  604.     background: #C8906F;
  605.     width: 50px;
  606.     height: 85px;
  607.     top: 128px;
  608.     left: 200px;
  609.     z-index: -100;
  610.     border-radius: 66% 16px 0 0 / 40% 22px 0 0;
  611. }
  612.  
  613. #deer .head .face {
  614.     position: absolute;
  615.     top: 12px;
  616.     left: 4px;
  617.     width: 100px;
  618.     height: 40px;
  619.     background: #C8906F;
  620.     transform: rotate(26deg);
  621.     border-radius: 86px 20px 89px 4px;
  622. }
  623.  
  624. #deer .head .face:after {
  625.     position: absolute;
  626.     left: 38px;
  627.     top: 11px;
  628.     height: 30px;
  629.     width: 65px;
  630.     background: #C8906F;
  631.     content: "";
  632.     transform: rotate(-26deg);
  633.     border-radius: 0 50% 48% 0 / 0 78% 114% 0;
  634. }
  635.  
  636. #deer .head .face:before {
  637.     content: "";
  638.     width: 0;
  639.     height: 0;
  640.     border-style: solid;
  641.     border-width: 0px 36px 13px 25px;
  642.     border-color: transparent;
  643.     left: 44px;
  644.     border-bottom-color: #B67D5B;
  645.     position: absolute;
  646.     transform: rotate(2deg);
  647.     z-index: 9999;
  648.     top: 43px;
  649. }
  650.  
  651.  
  652. #deer .head .face .detail {
  653.     position: absolute;
  654.     top: 46px;
  655.     left: 97px;
  656.     width: 22px;
  657.     height: 43px;
  658.     background: #C8906F;
  659.     z-index: 99999999;
  660.     transform: rotate(105deg);
  661. }
  662.  
  663.  
  664. #deer .head .face .detail-2 {
  665.     position: absolute;
  666.     top: -1px;
  667.     left: 0;
  668.     width: 100px;
  669.     height: 40px;
  670.     background: #C8906F;
  671.     border-radius: 86px 35px 76px 4px;
  672.     z-index: -100;
  673. }
  674.  
  675. #deer .head .face .detail:after {
  676.     content: "";
  677.     background: #C8906F;
  678.     top: 41px;
  679.     width: 10px;
  680.     height: 73px;
  681.     left: 7px;
  682.     position: absolute;
  683.     transform: rotate(-13deg);
  684.     border-radius: 6px / 4px;
  685. }
  686.  
  687. #deer .head .eye {
  688.     position: absolute;
  689.     top: 14px;
  690.     width: 9px;
  691.     left: 38px;
  692.     height: 6px;
  693.     background: #3E2B25;
  694.     border-radius: 10px 33px 20px 25px / 10px 20px 10px 13px;
  695.     transform: rotate(-31deg);
  696. }
  697.  
  698. /*Horns*/
  699.  
  700. #deer .horns {
  701.     position: absolute;
  702.     top: 121px;
  703.     left: 239px;
  704.     background: #3D2C25;
  705.     width: 17px;
  706.     height: 20px;
  707.     transform: rotate(33deg);
  708.     z-index: -100;
  709. }
  710.  
  711. #deer .horns .horn-1 {
  712.     position: absolute;
  713.     width: 22px;
  714.     height: 12px;
  715.     background: #3D2C25;
  716.     top: -11px;
  717.     left: -5px;
  718. }
  719.  
  720. #deer .horns .horn-2 {
  721.     position: absolute;
  722.     top: -5px;
  723.     left: -118px;
  724.     width: 118px;
  725.     height: 100px;
  726.     background: transparent;
  727.     transform: rotate(8deg);
  728.     border-radius: 50% 0 50% 50%;
  729.     border-bottom: 0;
  730.     border-right: 0;
  731.     box-shadow: -5px -13px 0 #3D2C25;
  732. }
  733. #deer .horns .horn-3 {
  734.     position: absolute;
  735.     height: 13px;
  736.     width: 83px;
  737.     background: #3D2C25;
  738.     top: -14px;
  739.     left: -67px;
  740.     transform: rotate(7deg);
  741. }
  742.  
  743. #deer .horns .horn-4 {
  744.     position: absolute;
  745.     height: 50px;
  746.     width: 53px;
  747.     top: -49px;
  748.     left: -137px;
  749.     border-radius: 50%;
  750.     box-shadow: 10px -1px 0 #3D2C25;
  751.     transform: rotate(6deg);
  752. }
  753.  
  754. #deer .horns .horn-5 {
  755.     position: absolute;
  756.     top: -111px;
  757.     left: -48px;
  758.     width: 118px;
  759.     height: 100px;
  760.     background: transparent;
  761.     transform: rotate(186deg);
  762.     border-radius: 50% 0 50% 50%;
  763.     border-bottom: 0;
  764.     border-right: 0;
  765.     box-shadow: -5px -13px 0 #3D2C25;
  766. }
  767.  
  768. #deer .horns .horn-6 {
  769.     position: absolute;
  770.     top: -57px;
  771.     left: -89px;
  772.     width: 100px;
  773.     height: 83px;
  774.     background: transparent;
  775.     transform: rotate(42deg);
  776.     border-radius: 50% 0 50% 50%;
  777.     border-bottom: 0;
  778.     border-right: 0;
  779.     box-shadow: -1px -10px 0 #3D2C25;
  780. }
  781.  
  782. #deer .horns .horn-7 {
  783.     position: absolute;
  784.     top: -46px;
  785.     left: 21px;
  786.     width: 37px;
  787.     height: 25px;
  788.     background: transparent;
  789.     transform: rotate(188deg);
  790.     border-radius: 50% 50% 50% 50%;
  791.     border-bottom: 0;
  792.     border-right: 0;
  793.     box-shadow: 0px -12px 0 #3D2C25;
  794. }
  795.  
  796. #deer .horns .horn-7:after {
  797.     content: "";
  798.     position: absolute;
  799.     position: absolute;
  800.     top: 3px;
  801.     left: -28px;
  802.     width: 75px;
  803.     height: 53px;
  804.     background: transparent;
  805.     transform: rotate(120deg);
  806.     border-radius: 50% 50% 50% 50%;
  807.     border-bottom: 0;
  808.     border-right: 0;
  809.     box-shadow: 0px 8px 0 #3D2C25;
  810. }
  811.  
  812. #deer .horns .horn-8 {
  813.     position: absolute;
  814.     height: 34px;
  815.     width: 39px;
  816.     top: -96px;
  817.     left: -56px;
  818.     border-radius: 50%;
  819.     box-shadow: 9px 0px 0 #3D2C25;
  820.     transform: rotate(25deg);
  821. }
  822.  
  823.  
  824. #deer .head .nose {
  825.     position: absolute;
  826.     background: #3E2925;
  827.     width: 18px;
  828.     height: 18px;
  829.     border-radius: 50% / 50%;
  830.     top: -2px;
  831.     left: 82px;
  832.     z-index: 999999;
  833. }
  834.  
  835. #deer .head .nose:after {
  836.     content: "";
  837.     width: 24px;
  838.     height: 24px;
  839.     background: #C8906F;
  840.     position: absolute;
  841.     border-radius: 61%;
  842.     top: 7px;
  843.     left: -8px;
  844. }
  845.  
  846. #deer .head .nose:before {
  847.     content: "";
  848.     position: absolute;
  849.     background: #C8906F;
  850.     width: 10px;
  851.     height: 10px;
  852.     top: 6px;
  853.     left: -6px;
  854.     transform: rotate(45deg);
  855. }
  856. #deer .head .nose .detail-nose {
  857.     position: absolute;
  858.     background: #C8906F;
  859.     width: 13px;
  860.     height: 12px;
  861.     top: 9px;
  862.     left: 6px;
  863.     transform: rotate(-10deg);
  864.     border-bottom-right-radius: 50%;
  865. }
  866.  
  867.  
  868. /*Grass*/
  869. #deer-wrapper #grass-container {
  870.     position: absolute;
  871.     bottom: 0;
  872.     width: 380px;
  873.     height: 75px;
  874.     left: 50%;
  875.     margin-left: -162px;
  876. }
  877.  
  878. #grass-container .grass {
  879.     border-color: transparent transparent #e45b3b transparent;
  880.     border-style: solid;
  881.     width: 0;
  882.     height: 0;
  883.     border-width: 0 9px 48px 4px;
  884.     display: block;
  885.     position: absolute;
  886. }
  887.  
  888. #grass-container .inside-grass {
  889.     left: 261px;
  890.     position: absolute;
  891. }
  892.  
  893. #grass-container .grass.left {
  894.     transform: rotate(-41deg);
  895. }
  896.  
  897. #grass-container .grass.right {
  898.     transform: rotate(41deg);
  899. }
  900.  
  901.  
  902. #grass-container .grass-1.left,
  903. #grass-container .grass-2.left,
  904. #grass-container .grass-3.left {
  905.     top: 32px;
  906.     border-width: 0 7px 52px 7px;
  907. }
  908.  
  909. #grass-container .grass-1.left {
  910.     left: 25px;
  911. }
  912.  
  913. #grass-container .grass-1.right {
  914.     right: -2px;
  915.     top: 32px;
  916. }
  917.  
  918. #grass-container .grass-2 {
  919.     top: 45px;
  920.     border-width: 0 7px 32px 4px;
  921. }
  922.  
  923. #grass-container .grass-2.left {
  924.     left: 11px;
  925.     border-width: 0 7px 52px 7px;
  926. }
  927.  
  928. #grass-container .grass-2.right {
  929.     right: -9px;
  930. }
  931.  
  932. #grass-container .grass-3 {
  933.     left: -4px;
  934. }
  935.  
  936. #grass-container .grass-3.right {
  937.     right: -39px;
  938. }
  939.  
  940. #grass-container .grass-4 {
  941.     top: 46px;
  942.     left: -12px;
  943.     border-width: 0 6px 34px 5px;
  944. }
  945.