diff --git a/Petr/petr.html b/Petr/petr.html
index 8355db6..585715f 100644
--- a/Petr/petr.html
+++ b/Petr/petr.html
@@ -1,275 +1,279 @@
 <!DOCTYPE html>
 <html>
-
-<head>
+  <head>
     <script src="https://unpkg.com/konva@9.3.11/konva.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <meta charset="utf-8" />
     <title>Petr</title>
     <style>
-        body {
-          margin: 0;
-          padding: 0;
-          overflow: hidden;
-          background-color: #121212;
-        }
-        span, details {
-          color: white;
-        }
-        .draggable {
-          background-color: gray;
-          margin: 5px;
-        }
-        header {
-          position: fixed;
-          top: 10px;
-          left: 10px;
-        }
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #121212;
+      }
+
+      span {
+        color: white;
+        margin: 5px;
+      }
+
+      .draggable {
+        background-color: gray;
+        border-radius: 5px;
+        margin: 5px;
+        width: fit-content;
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+
+      header {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+      }
+
+      header>* {
+        background-color: #ffffff10;
+        width: fit-content;
+        border-radius: 5px;
+        margin: 2px;
+      }
+
+      details {
+        color: white;
+        background-color: #202020;
+        padding: 5px;
+      }
+
+      input {
+        margin: 5px;
+      }
     </style>
-</head>
-<!-- WIP -->
-
-<body>
+  </head>
+  <body>
     <div id="container"></div>
-    <header>
-        <input id="element_n" type='number' value="4" min="0" onchange="draw1();" />
-        <span>
-          Angles: <span style="color: red">O &gt;</span>
-          <span id="element_angles"></span>
-          &gt; O
+    <a href="https://github.com/TrianguloY/githubPages/tree/master/Petr">
+      <img style="position: absolute; top: 0; right: 0; border: 0" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" alt="Fork me on GitHub">
+    </a>
+    <header style="display:flex;flex-direction:column;max-height:95%">
+      <div>
+        <span>Points:</span><input id="element_n" type='number' value="5" min="0" size="5" onchange="draw1();" />
+        <br />
+      </div>
+      <div style="overflow:scroll">
+        <span>Angles: <span style="color: red">O &gt;</span>
         </span>
-        <details>
-          <summary>ℹ️</summary>
-          <p>
-          Made by TrianguloY
-          </p>
-        </details>
-
+        <div id="element_angles"></div>
+      </div>
+      <details>
+        <summary>ℹ️ About</summary>
+        <div style="white-space: pre-wrap;">This is a custom implementation of the <a href="https://en.wikipedia.org/wiki/Petr%E2%80%93Douglas%E2%80%93Neumann_theorem">Petr–Douglas–Neumann theorem</a>.
+This was made as a response to the <a href="https://www.youtube.com/watch?v=WLAW5yz5O3E"> Petr’s miracle: Why was it lost for 100 years? (Mathologer Masterclass)</a> video by Mathologer.
+
+Each polygon is the result of applying the angle after the next one.
+You'll see that the last one is always a point, and the previous one a regular polygon of n sides.
+
+Instructions:
+- Choose the number of points for the polygon
+- Drag the angles by drag/drop to reorder them
+- Drag the points by drag/drop to move them
+
+Made by <a href="https://github.com/TrianguloY">TrianguloY</a></div>
+      </details>
     </header>
     <script>
-        let n;
-        let points = [];
-
-        function draw1() {
-          n = element_n.value;
-
-          clearDraggablePoints();
-          while(points.length > n) points.pop();
-          while(points.length < n) points.push([Math.random() * window.innerWidth, Math.random() * window.innerHeight]);
-          // points = range(0, n, () => [Math.random() * window.innerWidth, Math.random() * window.innerHeight]);
-          console.log("points", points);
-          points.forEach(([x, y], i) => drawDraggablePoint(x, y, (nx, ny) => {
-            points[i] = [nx, ny];
-            draw3();
-          }));
-
-          draw2();
-        }
-
-        function draw2() {
-          let angles = range(1, n - 0, i => 360 * i / n);
-
-          element_angles.innerHTML = angles.map(a=>`<span class="draggable" style="color: ${color(a)}" data-angle="${a}">&gt; ${a.toFixed(2)}º &gt;</span>`).join("");
-          console.log("angles", angles);
-
+      let n;
+      let points = [];
+
+      function draw1() {
+        n = element_n.value;
+        clearDraggablePoints();
+        while (points.length > n) points.pop();
+        while (points.length < n) points.push([Math.random() * window.innerWidth, Math.random() * window.innerHeight]);
+        // points = range(0, n, () => [Math.random() * window.innerWidth, Math.random() * window.innerHeight]);
+        console.log("points", points);
+        points.forEach(([x, y], i) => drawDraggablePoint(x, y, (nx, ny) => {
+          points[i] = [nx, ny];
           draw3();
-        }
-
-        function draw3() {
-          clearPolygons();
-          drawPolygon(points, color(0));
-
-          let angles = [...element_angles.querySelectorAll("span[data-angle]")].map(e=>e.dataset.angle);
-
-          let nextPoints = points;
-          angles.forEach(angle => {
-            let newpoints = [];
-            for (let i = 0; i < n; ++i) {
-              newpoints.push(calculatePoint(nextPoints[i], nextPoints[(i + 1) % n], angle))
-              drawAngle(nextPoints[i], newpoints[i], nextPoints[(i + 1) % n], color(angle, 0.1));//'#4444'
-            }
-            console.log("newpoints", newpoints);
-            drawPolygon(newpoints, color(angle));
-            nextPoints = newpoints;
-          });
-        }
-
-        //----- utils -------
-
-        function calculatePoint([x1, y1], [x2, y2], angle) {
-          // given two points A, B and an angle c, returns the coordinates of the point C (for a triangle ABC isosceles with AC=BC)
-          let t = Math.tan(angle / 2 * Math.PI / 180);
-          return [
-            (x1 + x2) / 2 + (y1 - y2) / 2 / t,
-            (y1 + y2) / 2 + (x2 - x1) / 2 / t,
-          ];
-        }
-
-        function color(angle, alpha=1) {
-          let c = Konva.Util.colorToRGBA(`hsl(${Math.round(angle)},100%,50%)`);
-          return `rgba(${c.r},${c.g},${c.b},${alpha})`;
-        }
-
-        function range(start, end, mapper) {
-          let v = [];
-          for (let i = start; i < end; ++i) v.push(mapper(i));
-          return v;
-        }
-
-        function length([x1, y1], [x2, y2]) {
-          return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
-        }
-
-
-        //------ Konva -----
-
-        let stage;
-        let pointsLayer;
-        let polygonsLayer;
-
-        function initCanvas() {
-
-          stage = new Konva.Stage({
-            container: 'container',
-            width: window.innerWidth,
-            height: window.innerHeight,
-            draggable: true,
-          });
-
-          polygonsLayer = new Konva.Layer();
-          stage.add(polygonsLayer);
-
-          pointsLayer = new Konva.Layer();
-          stage.add(pointsLayer);
-
-
-          // zoom
-          var scaleBy = 2;
-          stage.on('wheel', e => {
-            // stop default scrolling
-            e.evt.preventDefault();
-
-            var oldScale = stage.scaleX();
-            var pointer = stage.getPointerPosition();
-
-            // how to scale? Zoom in? Or zoom out?
-            let direction = e.evt.deltaY > 0 ? -1 : 1;
-
-            // when we zoom on trackpad, e.evt.ctrlKey is true
-            // in that case lets revert direction
-            if (e.evt.ctrlKey) direction = -direction;
-
-            var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
-
-            stage.scale({
-              x: newScale,
-              y: newScale
-            });
-
-            var mousePointTo = {
-              x: (pointer.x - stage.x()) / oldScale,
-              y: (pointer.y - stage.y()) / oldScale,
-            };
-
-            stage.position({
-              x: pointer.x - mousePointTo.x * newScale,
-              y: pointer.y - mousePointTo.y * newScale,
-            });
-          });
-
-        }
-
-        function clearDraggablePoints() {
-          pointsLayer.destroyChildren();
-        }
-
-        function clearPolygons() {
-          polygonsLayer.destroyChildren();
-        }
-
-        function drawDraggablePoint(x, y, ondrag) {
-          let visualPoint = new Konva.Circle({
-            x: x,
-            y: y,
-            radius: 5,
-            fill: 'white'
-          });
-          pointsLayer.add(visualPoint);
-
-          let draggablePoint = new Konva.Circle({
-            x: x,
-            y: y,
-            radius: 20,
-            draggable: true,
+        }));
+        draw2();
+      }
+
+      function draw2() {
+        let angles = range(1, n - 0, i => 360 * i / n);
+        element_angles.innerHTML = angles.map(a => `
+<p class="draggable" style="color: ${color(a)}" data-angle="${a}">&gt; ${a.toFixed(2)}º</p>`).join("");
+        console.log("angles", angles);
+        draw3();
+      }
+
+      function draw3() {
+        clearPolygons();
+        drawPolygon(points, color(0));
+        let angles = [...element_angles.querySelectorAll("[data-angle]")].map(e => e.dataset.angle);
+        let nextPoints = points;
+        angles.forEach(angle => {
+          let newpoints = [];
+          for (let i = 0; i < n; ++i) {
+            newpoints.push(calculatePoint(nextPoints[i], nextPoints[(i + 1) % n], angle))
+            drawAngle(nextPoints[i], newpoints[i], nextPoints[(i + 1) % n], color(angle, 0.1)); //'#4444'
+          }
+          console.log("newpoints", newpoints);
+          drawPolygon(newpoints, color(angle));
+          nextPoints = newpoints;
+        });
+      }
+      //----- utils -------
+      function calculatePoint([x1, y1], [x2, y2], angle) {
+        // given two points A, B and an angle c, returns the coordinates of the point C (for a triangle ABC isosceles with AC=BC)
+        let t = Math.tan(angle / 2 * Math.PI / 180);
+        return [
+          (x1 + x2) / 2 + (y1 - y2) / 2 / t,
+          (y1 + y2) / 2 + (x2 - x1) / 2 / t,
+        ];
+      }
+
+      function color(angle, alpha = 1) {
+        let c = Konva.Util.colorToRGBA(`hsl(${Math.round(angle)},100%,50%)`);
+        return `rgba(${c.r},${c.g},${c.b},${alpha})`;
+      }
+
+      function range(start, end, mapper) {
+        let v = [];
+        for (let i = start; i < end; ++i) v.push(mapper(i));
+        return v;
+      }
+
+      function length([x1, y1], [x2, y2]) {
+        return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
+      }
+      //------ Konva -----
+      let stage;
+      let pointsLayer;
+      let polygonsLayer;
+
+      function initCanvas() {
+        stage = new Konva.Stage({
+          container: 'container',
+          width: window.innerWidth,
+          height: window.innerHeight,
+          draggable: true,
+        });
+        polygonsLayer = new Konva.Layer();
+        stage.add(polygonsLayer);
+        pointsLayer = new Konva.Layer();
+        stage.add(pointsLayer);
+        // zoom
+        var scaleBy = 2;
+        stage.on('wheel', e => {
+          // stop default scrolling
+          e.evt.preventDefault();
+          var oldScale = stage.scaleX();
+          var pointer = stage.getPointerPosition();
+          // how to scale? Zoom in? Or zoom out?
+          let direction = e.evt.deltaY > 0 ? -1 : 1;
+          // when we zoom on trackpad, e.evt.ctrlKey is true
+          // in that case lets revert direction
+          if (e.evt.ctrlKey) direction = -direction;
+          var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+          stage.scale({
+            x: newScale,
+            y: newScale
           });
-          draggablePoint.on('dragmove', () => {
-            visualPoint.x(draggablePoint.x());
-            visualPoint.y(draggablePoint.y());
-            ondrag(draggablePoint.x(), draggablePoint.y());
+          var mousePointTo = {
+            x: (pointer.x - stage.x()) / oldScale,
+            y: (pointer.y - stage.y()) / oldScale,
+          };
+          stage.position({
+            x: pointer.x - mousePointTo.x * newScale,
+            y: pointer.y - mousePointTo.y * newScale,
           });
-          pointsLayer.add(draggablePoint);
-        }
-
-        function drawAngle(firstPoint, middlePoint, lastPoint, color) {
+        });
+      }
+
+      function clearDraggablePoints() {
+        pointsLayer.destroyChildren();
+      }
+
+      function clearPolygons() {
+        polygonsLayer.destroyChildren();
+      }
+
+      function drawDraggablePoint(x, y, ondrag) {
+        let visualPoint = new Konva.Circle({
+          x: x,
+          y: y,
+          radius: 5,
+          fill: 'white'
+        });
+        pointsLayer.add(visualPoint);
+        let draggablePoint = new Konva.Circle({
+          x: x,
+          y: y,
+          radius: 20,
+          draggable: true,
+        });
+        draggablePoint.on('dragmove', () => {
+          visualPoint.x(draggablePoint.x());
+          visualPoint.y(draggablePoint.y());
+          ondrag(draggablePoint.x(), draggablePoint.y());
+        });
+        pointsLayer.add(draggablePoint);
+      }
+
+      function drawAngle(firstPoint, middlePoint, lastPoint, color) {
+        polygonsLayer.add(new Konva.Line({
+          points: [firstPoint, middlePoint, lastPoint].flatMap(e => e),
+          stroke: color,
+          strokeWidth: 1,
+          closed: false,
+          strokeScaleEnabled: false,
+          lineJoin: "round",
+          lineCap: "round"
+        }));
+        let startAngle = Math.atan2(firstPoint[1] - middlePoint[1], firstPoint[0] - middlePoint[0]) / Math.PI * 180;
+        let endAngle = Math.atan2(lastPoint[1] - middlePoint[1], lastPoint[0] - middlePoint[0]) / Math.PI * 180;
+        let dist = Math.min(length(firstPoint, middlePoint), length(firstPoint, lastPoint)) / 10;
+        polygonsLayer.add(new Konva.Arc({
+          x: middlePoint[0],
+          y: middlePoint[1],
+          innerRadius: 0,
+          outerRadius: dist,
+          fill: color,
+          angle: endAngle - startAngle,
+          rotation: startAngle,
+        }));
+      }
+
+      function drawPolygon(points, color) {
+        let [Mx, My, mx, my] = points.reduce(([Mx, My, mx, my], [x, y]) => [Math.max(x, Mx), Math.max(y, My), Math.min(x, mx), Math.min(y, my)], [-Infinity, -Infinity, Infinity, Infinity]);
+        console.log([Mx, My, mx, my])
+        if (Math.abs(Mx - mx) < 1 / 100 && Math.abs(My - my) < 1 / 100) {
+          polygonsLayer.add(new Konva.Circle({
+            x: Mx,
+            y: My,
+            radius: 2,
+            fill: color,
+          }));
+        } else {
           polygonsLayer.add(new Konva.Line({
-            points: [firstPoint, middlePoint, lastPoint].flatMap(e => e),
+            points: points.flatMap(e => e),
             stroke: color,
             strokeWidth: 1,
-            closed: false,
+            closed: true,
             strokeScaleEnabled: false,
             lineJoin: "round",
             lineCap: "round"
           }));
-
-          let startAngle = Math.atan2(firstPoint[1] - middlePoint[1], firstPoint[0] - middlePoint[0]) / Math.PI * 180;
-          let endAngle = Math.atan2(lastPoint[1] - middlePoint[1], lastPoint[0] - middlePoint[0]) / Math.PI * 180;
-          let dist = Math.min(length(firstPoint, middlePoint), length(firstPoint, lastPoint)) / 10;
-
-          polygonsLayer.add(new Konva.Arc({
-            x: middlePoint[0],
-            y: middlePoint[1],
-            innerRadius: 0,
-            outerRadius: dist,
-            fill: color,
-            angle: endAngle - startAngle,
-            rotation: startAngle,
-          }));
         }
-
-
-        function drawPolygon(points, color) {
-
-          let [Mx, My, mx, my] = points.reduce(([Mx, My, mx, my], [x, y]) => [Math.max(x, Mx), Math.max(y, My), Math.min(x, mx), Math.min(y, my)], [-Infinity, -Infinity, Infinity, Infinity]);
-          console.log([Mx, My, mx, my])
-          if (Math.abs(Mx - mx) < 1 / 100 && Math.abs(My - my) < 1 / 100) {
-            polygonsLayer.add(new Konva.Circle({
-              x: Mx,
-              y: My,
-              radius: 2,
-              fill: color,
-            }));
-          } else {
-
-            polygonsLayer.add(new Konva.Line({
-              points: points.flatMap(e => e),
-              stroke: color,
-              strokeWidth: 1,
-              closed: true,
-              strokeScaleEnabled: false,
-              lineJoin: "round",
-              lineCap: "round"
-            }));
-          }
-        }
-
-
-        //------ init ------
-
-        initCanvas();
-        draw1();
-
-        Sortable.create(element_angles, {onChange: draw3});
+      }
+      //------ init ------
+      initCanvas();
+      draw1();
+      Sortable.create(element_angles, {
+        onChange: draw3
+      });
     </script>
-</body>
-
+  </body>
 </html>
\ No newline at end of file
