<style>
  html,
  body {
    height: 100%;
  }
  body {
    background: radial-gradient(
      ellipse at center,
      rgba(255, 254, 234, 1) 0%,
      rgba(255, 254, 234, 1) 35%,
      #b7e8eb 100%
    );
    overflow: hidden;
  }

  .ocean {
    height: 5%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #015871;
  }

  .wave {
    background-image: repeat-x;
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
  }

  .wave:nth-of-type(2) {
    top: -175px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
      swell 7s ease -1.25s infinite;
    opacity: 1;
  }

  @keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1600px;
    }
  }

  @keyframes swell {
    0%,
    100% {
      transform: translate3d(0, -25px, 0);
    }
    50% {
      transform: translate3d(0, 5px, 0);
    }
  }
</style>

<link rel="icon" type="image/x-icon" href="/images/favicon.png" />
<title>Error</title>
<script src="https://cdn.tailwindcss.com"></script>
<title>Error</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />

<main class="space-y-5 my-10">
  <div class="flex flex-row">
    <h1 class="w-full text-center font-bold text-7xl"><%= message %></h1>
  </div>
  <div class="flex flex-row">
    <h2 class="w-full text-center font-bold text-5xl">
      Error <%= error.status %>
    </h2>
  </div>
  <div class="flex justify-center">
    <p class="w-fit text-white text-xl bg-slate-900 rounded-2xl px-5 py-2">
      Ir a la <a href="/" class="underline text-blue-300"> p√°gina de inicio</a>
    </p>
  </div>
</main>

<div class="ocean">
  <div class="wave bg-[url('/images/wave.svg')]"></div>
  <div class="wave bg-[url('/images/wave.svg')]"></div>
</div>
