{% extends "layouts/minimal.html" %}
{% block title %}{_ "Workbench" _}{% endblock %}
{% block content %}
<style>
  body, html {
      overflow: hidden;
  }
  body {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
      height: 100vh;
  }
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
</style>

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Pure CSS Gradient Background Animation
    </p>
    <p class="subtitle">
      <a href="https://manuel.pinto.dev" class="text-decoration-none">
        Pen by Manuel Pinto
      </a>
    </p>
    <p class="subtitle">
      <a href="https://codepen.io/P1N2O/full/pyBNzX">
        Source Code
      </a>
    </p>
  </div>
</section>
{% endblock %}