<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paseo por los árboles de Madrid</title>
  <style>

    @font-face {
      font-family: Serreria;
      src: url(static/MFI-Serreria/MFI-Serreria-Extravagante.otf) format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: PTSerif;
      src: url(static/PT_Serif/PTSerif-Regular.ttf) format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: PTSerif;
      src: url(static/PT_Serif/PTSerif-Italic.ttf) format('truetype');
      font-weight: normal;
      font-style: italic;
    }
    
    @font-face {
      font-family: PTSerif;
      src: url(static/PT_Serif/PTSerif-Bold.ttf) format('truetype');
      font-weight: bold;
      font-style: normal;
    }

    @font-face {
      font-family: PTSerif;
      src: url(static/PT_Serif/PTSerif-BoldItalic.ttf) format('truetype');
      font-weight: bold;
      font-style: italic;
    }

    body {
      /* max-width: 60ch; */
      margin: 2em 1em 1em 1em;
      font-size: var(--font-size);
      line-height: var(--line-height);
      font-family: PTSerif, serif;
      flex-direction: row;
      box-sizing: border-box;
      /* height: calc(100vh - 2em); */
      /* align-items: center; */
      display: grid;
      grid-template-columns: 1fr 1.5fr 1.5fr;
      column-gap: 2em;
    }

    :root {
      --font-size: 13pt;
      --line-height: 18pt;
    }

    h1 {
      font-family: Serreria;
      font-weight: regular;
      font-size: 34pt;
      line-height: 45pt;
      margin-top: 0;
      margin-bottom: 0;
    }

    a {
      color: currentColor;
    }

    a:hover {
      text-decoration: none;
    }

    p {
      margin-top: 0;
    }

    form {
      padding-left: 11ch;
    }

    label {
      display: block;
      margin-bottom: var(--line-height);
      text-indent: -11ch;
    }

    button {
      font: inherit;
    }

    footer {
      margin-top: calc(3 * var(--line-height));
      font-size: 85%;
    }

    #title {
      grid-column: 1;
      position: sticky;
      top: 2rem;
      align-self: start;
    }

    #introduction {
      align-self: start;
      position: sticky;
      top: 2rem;
    }

    #introduction, #form {
      margin-bottom: 2rem;
    }

    footer {
      position: fixed;
      bottom: .5em;
      left: .5em;
      right: .5em;
    }

    @media screen and (max-width: 900px) {
      body {
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: min-content min-content;
      }

      #title {
        grid-row: 1  / span 2;
      }

      #introduction {
        position: initial;
        margin-bottom: 0;
      }
    }

    @media screen and (max-width: 720px) {
      
      body {
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content min-content min-content;
      }

      #title {
        grid-row: initial;
        position: initial;
      }

      #form {
        margin-bottom: 0;
      }

      footer {
        position: initial;
      }
    }

  </style>
</head>
<body>
  <section id="title">
    <h1 id="title">Paseo por los árboles de Madrid</h1>
    <a href="{{ BASEURL }}/en">en</a>
  </section>
  <section id="introduction">
    <p>En este libro, el algoritmo de las cadenas de Markov genera simultáneamente un poema y un paseo por los árboles del barrio de Las Letras, en el centro de Madrid. A pesar de la impresión de que hay pocos árboles en el barrio, el algoritmo cuenta con 460 de ellos. </p>
    <p>La cadena de Markov fue diseñada en 1906 por Andrey Markov, un matemático ruso fallecido en 1992. Este algoritmo está en la base de muchos programas informáticos que generan spam. Se utiliza para sistemas que describen una serie de eventos que son interdependientes. Lo que ocurre depende únicamente del paso anterior.</p>
    <p>El libro se construye entonces paso a paso. </p>
  </section>
  <section id="form">
    <p>
      <strong>Puedes elegir una novela para crear tu Paseo por árboles de Madrid.</strong>
    </p>
    <form method="POST" action="/book">
      <label><input type="radio" name="fragment" value="0" checked> Opción 1: La novela <em>‘La madre naturaleza’</em> de la escritora feminista <em>Emilia Pardo Bazán</em>
        fue publicada en 1887. Usa en esta obra una prosa poética y descriptiva, y en sus páginas se
        siente el amor que profesa al paisaje gallego, con un conocimiento de la botánica y de
        las costumbres rurales muy superior al de sus contemporáneos.</label><br />
      <label><input type="radio" name="fragment" value="1"> Opción 2: La novela <em>‘Miau’</em> del escritor <em>Benito Pérez Galdós</em> fue publicada en 1888.
        Enmarcada en el género realista, satiriza el Madrid burocrático de finales del siglo XIX
        a partir de las vicisitudes vitales de su protagonista, Ramón Villaamil,
        un competente exempleado del Ministerio de Hacienda, al que una serie de intrigas
        han dejado cesante.</label><br />
      <button type="submit">Generate</button>
    </form>
  </section>
  <footer>
    ‘Paseo por los árboles de Madrid’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
  </footer>
</body>
</html>