<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="aurora-card">
  <div class="aurora-sky">
    <i>
    </i>
    <i>
    </i>
    <b>
      ☾
    </b>
  </div>
  <small>
    REYKJAVÍK · TONIGHT
  </small>
  <h3>
    −2°
    <span>
      Clear sky
    </span>
  </h3>
  <p>
    Wind 12 km/h
    <b>
      ↗
    </b>
  </p>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.aurora-card{width:244px;padding:15px;border-radius:19px;background:#10182b;color:#f4fbff;font-family:Arial;overflow:hidden;box-shadow:0 12px 20px #18223b44}.aurora-sky{position:relative;height:96px;overflow:hidden;border-radius:12px;background:#111d38}.aurora-sky i{position:absolute;width:180px;height:42px;border-radius:50%;filter:blur(8px);background:#5effcb99;transform:rotate(-17deg);animation:aurora-drift 5s ease-in-out infinite}.aurora-sky i:first-child{top:25px;left:-45px}.aurora-sky i:nth-child(2){top:6px;right:-70px;background:#a16cff99;animation-delay:-2s}.aurora-sky b{position:absolute;right:16px;top:14px;font-size:28px}.aurora-card small{display:block;margin-top:13px;color:#92a8d5;font:800 9px Arial;letter-spacing:1px}.aurora-card h3{margin:7px 0;font-size:28px}.aurora-card h3 span{font-size:13px;font-weight:400}.aurora-card p{margin:0;color:#aab9d3;font-size:11px}.aurora-card p b{float:right;color:#5effcb}@keyframes aurora-drift{50%{transform:translateX(50px) rotate(-17deg)}}