import styles from './CV.module.scss';

const CVIcon = () => {
  return (
    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      className={styles.icon}
    >
      <path
        className={styles.bottom}
        d="M 0.72670447,42.521138 H 77.467597 v 54.36591 H 0.72670447 Z"
      />
      <path
        className={styles.handle}
        d="m 22.263958,32.886587 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
      />
      <path
        className={styles.top}
        d="M 0.72670447,42.521138 H 77.467597 V 73.884317 H 0.72670447 Z"
      />
      <path
        className={styles.diploma}
        d="M 44.217117,1.106205 H 98.921356 V 36.610421 H 44.217117 Z"
      />
      <path
        className={styles['seal-bottom']}
        d="m 84.933665,34.721635 h 6.957554 v 10.216808 l -3.478793,-3.767744 -3.478761,3.767744 z"
      />
      <path
        className={styles['seal-top']}
        d="m 93.326919,30.779639 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
      />
      <path
        className={styles.lines}
        d="m 54.53557,14.438273 h 34.067282 v 1.515453 H 54.53557 Z"
      />
      <path
        className={styles.lines}
        d="m 54.53557,21.384062 h 34.067282 v 1.515453 H 54.53557 Z"
      />
      <path
        className={styles.lines}
        d="m 54.53557,28.329927 h 17.563315 v 1.515454 H 54.53557 Z"
      />
      <path
        className={styles.lines}
        d="m 63.495911,7.4924218 h 16.146628 v 1.515452 H 63.495911 Z"
      />
      <path
        className={styles.lock}
        d="M 34.048314,65.601104 H 44.145988 V 80.557785 H 34.048314 Z"
      />
    </svg>
  );
};

export default CVIcon;
4fc6410cf36285968eff9e7b21f'>commit</a><a href='/www.armandphilippot.com/diff/src/components/atoms/links/sharing-link.module.scss?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>diff</a><a href='/www.armandphilippot.com/stats/src/components/atoms/links/sharing-link.module.scss?h=v1.0.0'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/src/components/atoms/links/sharing-link.module.scss'>
<input type='hidden' name='h' value='v1.0.0'/><input type='hidden' name='id' value='52c185d0f23504fc6410cf36285968eff9e7b21f'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>root</a>/<a href='/www.armandphilippot.com/tree/src?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>src</a>/<a href='/www.armandphilippot.com/tree/src/components?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>components</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>atoms</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms/links?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>links</a>/<a href='/www.armandphilippot.com/tree/src/components/atoms/links/sharing-link.module.scss?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>sharing-link.module.scss</a></div><div class='content'>blob: 26ca737246cdb9ce7934a47a09c66de15701e1f6 (<a href='/www.armandphilippot.com/plain/src/components/atoms/links/sharing-link.module.scss?h=v1.0.0&amp;id=52c185d0f23504fc6410cf36285968eff9e7b21f'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
<a id='n60' href='#n60'>60</a>
<a id='n61' href='#n61'>61</a>
<a id='n62' href='#n62'>62</a>
<a id='n63' href='#n63'>63</a>
<a id='n64' href='#n64'>64</a>
<a id='n65' href='#n65'>65</a>
<a id='n66' href='#n66'>66</a>
<a id='n67' href='#n67'>67</a>
<a id='n68' href='#n68'>68</a>
<a id='n69' href='#n69'>69</a>
<a id='n70' href='#n70'>70</a>
<a id='n71' href='#n71'>71</a>
<a id='n72' href='#n72'>72</a>
<a id='n73' href='#n73'>73</a>
<a id='n74' href='#n74'>74</a>
<a id='n75' href='#n75'>75</a>
<a id='n76' href='#n76'>76</a>
<a id='n77' href='#n77'>77</a>
<a id='n78' href='#n78'>78</a>
<a id='n79' href='#n79'>79</a>
<a id='n80' href='#n80'>80</a>
<a id='n81' href='#n81'>81</a>
<a id='n82' href='#n82'>82</a>
<a id='n83' href='#n83'>83</a>
<a id='n84' href='#n84'>84</a>
<a id='n85' href='#n85'>85</a>
<a id='n86' href='#n86'>86</a>
<a id='n87' href='#n87'>87</a>
<a id='n88' href='#n88'>88</a>
<a id='n89' href='#n89'>89</a>
<a id='n90' href='#n90'>90</a>
<a id='n91' href='#n91'>91</a>
<a id='n92' href='#n92'>92</a>
<a id='n93' href='#n93'>93</a>
<a id='n94' href='#n94'>94</a>
<a id='n95' href='#n95'>95</a>
<a id='n96' href='#n96'>96</a>
<a id='n97' href='#n97'>97</a>
<a id='n98' href='#n98'>98</a>
<a id='n99' href='#n99'>99</a>
<a id='n100' href='#n100'>100</a>
<a id='n101' href='#n101'>101</a>
<a id='n102' href='#n102'>102</a>
<a id='n103' href='#n103'>103</a>
<a id='n104' href='#n104'>104</a>
<a id='n105' href='#n105'>105</a>
<a id='n106' href='#n106'>106</a>
<a id='n107' href='#n107'>107</a>
<a id='n108' href='#n108'>108</a>
<a id='n109' href='#n109'>109</a>
<a id='n110' href='#n110'>110</a>
<a id='n111' href='#n111'>111</a>
<a id='n112' href='#n112'>112</a>
<a id='n113' href='#n113'>113</a>
<a id='n114' href='#n114'>114</a>
<a id='n115' href='#n115'>115</a>
<a id='n116' href='#n116'>116</a>
<a id='n117' href='#n117'>117</a>
<a id='n118' href='#n118'>118</a>
<a id='n119' href='#n119'>119</a>
<a id='n120' href='#n120'>120</a>
<a id='n121' href='#n121'>121</a>
<a id='n122' href='#n122'>122</a>
<a id='n123' href='#n123'>123</a>
<a id='n124' href='#n124'>124</a>
<a id='n125' href='#n125'>125</a>
<a id='n126' href='#n126'>126</a>
<a id='n127' href='#n127'>127</a>
<a id='n128' href='#n128'>128</a>
<a id='n129' href='#n129'>129</a>
<a id='n130' href='#n130'>130</a>
<a id='n131' href='#n131'>131</a>
<a id='n132' href='#n132'>132</a>
<a id='n133' href='#n133'>133</a>
<a id='n134' href='#n134'>134</a>
<a id='n135' href='#n135'>135</a>
<a id='n136' href='#n136'>136</a>
<a id='n137' href='#n137'>137</a>
<a id='n138' href='#n138'>138</a>
<a id='n139' href='#n139'>139</a>
<a id='n140' href='#n140'>140</a>
<a id='n141' href='#n141'>141</a>
<a id='n142' href='#n142'>142</a>
<a id='n143' href='#n143'>143</a>
<a id='n144' href='#n144'>144</a>
<a id='n145' href='#n145'>145</a>
<a id='n146' href='#n146'>146</a>
<a id='n147' href='#n147'>147</a>
<a id='n148' href='#n148'>148</a>
<a id='n149' href='#n149'>149</a>
<a id='n150' href='#n150'>150</a>
<a id='n151' href='#n151'>151</a>
<a id='n152' href='#n152'>152</a>
<a id='n153' href='#n153'>153</a>
<a id='n154' href='#n154'>154</a>
<a id='n155' href='#n155'>155</a>
<a id='n156' href='#n156'>156</a>
<a id='n157' href='#n157'>157</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span><span class="k">@use</span><span class="w"> </span><span class="s2">&quot;@styles/abstracts/functions&quot;</span><span class="w"> </span><span class="nt">as</span><span class="w"> </span><span class="nt">fun</span><span class="o">;</span>

<span class="nc">.link</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">display</span><span class="nd">:</span><span class="w"> </span><span class="nt">inline-flex</span><span class="o">;</span>
<span class="w">  </span><span class="nt">align-items</span><span class="nd">:</span><span class="w"> </span><span class="nt">center</span><span class="o">;</span>
<span class="w">  </span><span class="nt">padding</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-2xs</span><span class="o">)</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-xs</span><span class="o">);</span>
<span class="w">  </span><span class="nt">border-radius</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">);</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">  </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">transform</span><span class="nd">:</span><span class="w"> </span><span class="nt">translateX</span><span class="o">(</span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">-3</span><span class="o">)</span><span class="p">}</span><span class="o">)</span>
<span class="w">      </span><span class="nt">translateY</span><span class="o">(</span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">-3</span><span class="o">)</span><span class="p">}</span><span class="o">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">transform</span><span class="nd">:</span><span class="w"> </span><span class="nt">translateX</span><span class="o">(</span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span><span class="p">}</span><span class="o">)</span><span class="w"> </span><span class="nt">translateY</span><span class="o">(</span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span><span class="p">}</span><span class="o">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">content</span><span class="nd">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="o">;</span>
<span class="w">    </span><span class="nt">display</span><span class="nd">:</span><span class="w"> </span><span class="nt">block</span><span class="o">;</span>
<span class="w">    </span><span class="nt">width</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">30</span><span class="o">);</span>
<span class="w">    </span><span class="nt">height</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">30</span><span class="o">);</span>
<span class="w">    </span><span class="nt">background-repeat</span><span class="nd">:</span><span class="w"> </span><span class="nt">no-repeat</span><span class="o">;</span>
<span class="w">    </span><span class="nt">filter</span><span class="nd">:</span><span class="w"> </span><span class="nt">drop-shadow</span><span class="o">(</span>
<span class="w">      </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">)</span>
<span class="w">    </span><span class="o">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--diaspora</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">13</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">3</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">3</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">3</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M15.257 21.928l-2.33-3.255c-.622-.87-1.128-1.549-1.155-1.55-.027 0-1.007 1.317-2.317 3.115-1.248 1.713-2.28 3.115-2.292 3.115-.035 0-4.5-3.145-4.51-3.178-.006-.016 1.003-1.497 2.242-3.292 1.239-1.794 2.252-3.29 2.252-3.325 0-.056-.401-.197-3.55-1.247a1604.93 1604.93 0 01-3.593-1.2c-.033-.013.153-.635.79-2.648.46-1.446.845-2.642.857-2.656.013-.015 1.71.528 3.772 1.207 2.062.678 3.766 1.233 3.787 1.233.021 0 .045-.032.053-.07.008-.039.026-1.794.04-3.902.013-2.107.036-3.848.05-3.87.02-.03.599-.038 2.725-.038 1.485 0 2.716.01 2.735.023.023.016.064 1.175.132 3.776.112 4.273.115 4.33.183 4.33.026 0 1.66-.547 3.631-1.216 1.97-.668 3.593-1.204 3.605-1.191.04.045 1.656 5.307 1.636 5.327-.011.01-1.656.574-3.655 1.252-2.75.932-3.638 1.244-3.645 1.284-.006.029.94 1.442 2.143 3.202 1.184 1.733 2.148 3.164 2.143 3.18-.012.036-4.442 3.299-4.48 3.299-.015 0-.577-.767-1.249-1.705z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--email</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">44</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">34</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">34</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">34</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M15.909 12.123L24 17.238V6.792zM0 6.792v10.446l8.091-5.115zM22.5 3.75h-21c-.748 0-1.343.558-1.455 1.276L12 12.904l11.955-7.877c-.112-.718-.706-1.276-1.455-1.276zm-7.965 9.279l-2.123 1.398a.75.75 0 01-.825 0l-2.122-1.4-9.417 5.957c.116.712.707 1.266 1.452 1.266h21c.746 0 1.337-.553 1.452-1.266z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--facebook</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">214</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">52</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">214</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">42</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">214</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">42</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">214</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">42</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--journal-du-hacker</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">24</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">51</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">24</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">41</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">24</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">41</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">24</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">41</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M17.822 23.297a6.644 6.644 0 00-.654.032c-1.104.1-2.451-.378-3.244-1.15a3.223 3.223 0 01-.52-.739c-.209-.425-.22-.489-.211-1.178a8.174 8.174 0 01.19-1.585c.243-1.151.155-1.449-.514-1.737-.4-.172-.632-.135-1 .16-.268.215-.28.463-.07 1.532.298 1.526.286 2.238-.05 2.907-.28.56-.443.703-1.287 1.133-1.005.513-1.461.638-2.332.638-.73 0-1.014-.082-1.276-.366-.134-.145-.148-.2-.085-.32.099-.184.329-.3.959-.488.277-.082.604-.236.727-.341.123-.105.329-.265.457-.354.32-.222.562-.761.563-1.254 0-.331-.188-1.034-.45-1.676-.138-.338-.38.085-.38.666 0 .434-.673 1.569-.93 1.569-.048 0-.288.101-.532.225-.43.219-.47.225-1.31.225-.815 0-.889-.011-1.235-.194-.42-.22-.902-.694-1.094-1.073a2.752 2.752 0 00-.227-.377c-.083-.102-.08-.143.018-.293.206-.314.473-.317 1.186-.011.583.25 1.22.215 1.582-.086.168-.139.325-.697.342-1.217.02-.598-.049-.66-.596-.528-.86.206-1.762-.084-2.76-.887-.916-.739-1.362-.845-2.241-.538-.262.092-.51.153-.552.137-.042-.016-.134-.136-.204-.268-.118-.218-.12-.252-.02-.403.156-.24.714-.573 1.185-.708.297-.086.588-.11 1.076-.09.655.026.687.035 1.567.458.54.259.99.43 1.127.43.27 0 1.014-.37 1.159-.577.167-.238.124-.34-.322-.776-1.19-1.16-1.943-2.608-2.24-4.31-.124-.702-.14-1.888-.035-2.483.116-.656.677-2.273.915-2.64.385-.59 1.823-1.965 2.585-2.469C9.187.905 11.43.395 13.715.785c2.457.42 4.507 1.61 5.849 3.394 1.062 1.414 1.554 2.859 1.553 4.57 0 1.778-.497 3.238-1.599 4.693a6.207 6.207 0 00-.34.476c0 .013.205.12.456.238.737.345 1.169.844 1.726 1.994.256.527.531 1.031.613 1.12.225.247.614.42 1.099.49.588.085.804.178.9.388.109.24-.111.55-.402.563-.11.005-.394.033-.63.062-.887.107-1.851-.251-2.416-.898-.17-.193-.503-.616-.74-.939-.455-.616-.818-.922-1.054-.888-.117.017-.14.066-.127.28.008.142.068.34.133.438.09.137.127.412.161 1.196.05 1.153.147 1.458.55 1.726.306.204.552.198 1.11-.025.581-.233.923-.238 1.159-.018.243.227.2.637-.11 1.026-.33.419-1.338.899-2.001.954-1.194.1-2.371-.602-2.828-1.686-.062-.147-.197-.61-.301-1.03-.12-.486-.221-.762-.28-.762-.109 0-.263.401-.27.705-.003.12-.056.417-.118.657-.328 1.282.307 2.309 1.66 2.684.657.182.808.299.808.623 0 .319-.165.494-.454.481z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--linkedin</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">90</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">40</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">90</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">30</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">90</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">30</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">210</span><span class="o">,</span><span class="w"> </span><span class="nt">90</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">30</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nt">--twitter</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">203</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">53</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">203</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">43</span><span class="err">%</span><span class="o">);</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>
<span class="w">    </span><span class="k">&amp;</span><span class="nd">:focus</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">6</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">203</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">43</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">:active</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">box-shadow</span><span class="nd">:</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nn">#</span><span class="p">{</span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">}</span><span class="w"> </span><span class="nt">0</span><span class="w"> </span><span class="nt">0</span>
<span class="w">        </span><span class="nt">hsl</span><span class="o">(</span><span class="nt">203</span><span class="o">,</span><span class="w"> </span><span class="nt">89</span><span class="err">%</span><span class="o">,</span><span class="w"> </span><span class="nt">43</span><span class="err">%</span><span class="o">);</span>
<span class="w">    </span><span class="p">}</span>

<span class="w">    </span><span class="k">&amp;</span><span class="nd">::before</span><span class="w"> </span><span class="p">{</span>
<span class="w">      </span><span class="nt">background-image</span><span class="nd">:</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">fun</span><span class="nc">.encode-svg</span><span class="o">(</span>
<span class="w">        </span><span class="s1">&#39;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path style=&quot;fill:#ffffff;&quot; d=&quot;M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z&quot;/&gt;&lt;/svg&gt;&#39;</span>
<span class="w">      </span><span class="o">));</span>
<span class="w">    </span><span class="p">}</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</pre></div>
