From 002235cf006da86b03655b57dd4bd4cf4c4924e6 Mon Sep 17 00:00:00 2001
From: Gaurav Gosain <itsgauravgosain@gmail.com>
Date: Thu, 1 Dec 2022 13:03:05 +0400
Subject: [PATCH] Squashed 'artwork/' content from commit 21e1ad5

git-subtree-dir: artwork
git-subtree-split: 21e1ad52df667d8dfefd7840dcbe514fc955845b
---
 README.md  | 16 ++++++++++++++++
 embed.svg  | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 README.md
 create mode 100644 embed.svg
 create mode 100644 index.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a9f2bea
--- /dev/null
+++ b/README.md
@@ -0,0 +1,16 @@
+
+# p2prc_logo
+
+## Pure HTML Version of the p2prc Logo :)
+![p2prc Logo](https://user-images.githubusercontent.com/55647468/204634868-07e94b6d-65f5-4446-a11f-7a14f11edff9.png)
+
+> Note: To change the size of the logo simply edit the CSS variable of `--size` under the `style` tag!
+
+---
+
+### Embedding the HTML as a `foreignObject` element inside an SVG directly
+
+![](embed.svg)
+
+
+
diff --git a/embed.svg b/embed.svg
new file mode 100644
index 0000000..3432f41
--- /dev/null
+++ b/embed.svg
@@ -0,0 +1,46 @@
+<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="800" height="800">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+            <style>
+                :root {
+                    --size: 8;
+                }
+
+                .bg {
+                    width: calc(var(--size)*100px);
+                    height: calc(var(--size)*100px);
+                    background: linear-gradient(90deg,
+                            rgb(254, 188, 80) 30%,
+                            rgb(235, 162, 118) 50%,
+                            rgb(255, 97, 69) 70%);
+                    -webkit-mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
+                    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
+                    mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
+                    mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
+                }
+
+                .logo {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .p2prc {
+                    position: fixed;
+                    top: 63%;
+                    font-size: calc((var(--size) * 100px)/8);
+                    font-weight: 700;
+                    font-family: sans-serif;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+            </style>
+
+            <div class="logo">
+                <div class="bg"></div>
+                <div class="p2prc">p2prc</div>
+            </div>
+        </div>
+    </foreignObject>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8d5830d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+<!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>p2prc</title>
+  </head>
+  <body>
+    <style>
+    :root {
+        --size: 8; 
+    }
+    .bg {
+        width: calc(var(--size)*100px);
+        height: calc(var(--size)*100px);
+        background: linear-gradient(
+          90deg,
+          rgb(254,188,80) 30%,
+          rgb(235,162,118) 50%,
+          rgb(255,97,69) 70%
+        );
+        -webkit-mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
+        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
+        mask-size: calc(var(--size)*100px) calc(var(--size)*100px);
+        mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iZTdReFVvNjhGTlMxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+DQogICAgPGc+DQogICAgICAgIDxsaW5lIHgxPSItMzIuNSIgeTE9Ii0xMy41IiB4Mj0iMzIuNSIgeTI9IjEzLjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5Mi41IDI1MS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTE3LjI1IiB5MT0iMjMuNzUiIHgyPSIxNy4yNSIgeTI9Ii0yMy43NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjA3Ljc1IDI4OC43NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iLTE3LjUiIHgyPSIyNC41IiB5Mj0iMTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ5LjUgMjgyLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjQuNSIgeTE9IjI1LjUiIHgyPSIyNC41IiB5Mj0iLTI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0OS41IDIzOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM2Y1Nzg3Ig0KICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTMzLjI1IiB5MT0iLTE2LjI1IiB4Mj0iMzMuMjUiIHkyPSIxNi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQwLjc1IDE5Ny4zMTAyNDkpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMTMiIHkxPSIyNyIgeDI9IjEzIiB5Mj0iLTI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODYuMTIwNDk4IDE4NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNTc4NyINCiAgICAgICAgICAgIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yMy43NSIgeTE9Ii0xOC44NzUiIHgyPSIyMy43NSIgeTI9IjE4Ljg3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIyLjg3MDQ5OSAxNzguODc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTAuNSIgeTE9Ii00MC4zNzUiIHgyPSIwLjUiIHkyPSI0MC4zNzUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OCAyMzguMTI1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iMzcuMjUiIHkxPSIzMi4yNSIgeDI9Ii0zNy4yNSIgeTI9Ii0zMi4yNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzExLjI1IDI0Ni4yNSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9IjM2Ljc1IiB5MT0iLTExLjI1IiB4Mj0iLTM2Ljc1IiB5Mj0iMTEuMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMC43NSAyODguNzUpIiBmaWxsPSJub25lIg0KICAgICAgICAgICAgc3Ryb2tlPSIjM2Y1Nzg3IiBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjEuMjUiIHkxPSItMTguMjUiIHgyPSIyMS4yNSIgeTI9IjE4LjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjkuNzUgMjk1Ljc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgICAgICA8bGluZSB4MT0iLTIxLjUiIHkxPSItMTUuMTI1IiB4Mj0iMjEuNSIgeTI9IjE1LjEyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzY5LjUgMjEyLjg3NSkiIGZpbGw9Im5vbmUiDQogICAgICAgICAgICBzdHJva2U9IiMzZjU3ODciIHN0cm9rZS13aWR0aD0iOCIgLz4NCiAgICAgICAgPGxpbmUgeDE9Ii0yNC41IiB5MT0iMTYuNSIgeDI9IjI0LjUiIHkyPSItMTYuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE1LjUgMjExLjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZjU3ODciDQogICAgICAgICAgICBzdHJva2Utd2lkdGg9IjgiIC8+DQogICAgICAgIDxsaW5lIHgxPSItMjMuMjUiIHkxPSItMjQuNzUiIHgyPSIyMy4yNSIgeTI9IjI0Ljc1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MTQuMjUgMjUyLjc1KSIgZmlsbD0ibm9uZSINCiAgICAgICAgICAgIHN0cm9rZT0iIzNmNTc4NyIgc3Ryb2tlLXdpZHRoPSI4IiAvPg0KICAgIDwvZz4NCiAgICA8Zz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDcuNSAxODEuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCAxNjApIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxMCIgcnk9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjAgMjM4KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTQiIHJ5PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc0IDIxNCkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEyLjUiIHJ5PSIxMi41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDcuNSAxOTcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjEwIiByeT0iMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCAxOTUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIyMCIgcnk9IjIwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjUgMjY1KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iMTguNSIgcnk9IjE4LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0OC41IDI3OC41KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iNy41IiByeT0iNy41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzcuNSAyNzcuNSkiIGZpbGw9IiNkMmRiZWQiIHN0cm9rZS13aWR0aD0iMCIgLz4NCiAgICAgICAgPGVsbGlwc2Ugcng9IjcuNSIgcnk9IjcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjUgMzEyLjUpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgICAgIDxlbGxpcHNlIHJ4PSIxNCIgcnk9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzQgMjk5KSIgZmlsbD0iI2QyZGJlZCIgc3Ryb2tlLXdpZHRoPSIwIiAvPg0KICAgICAgICA8ZWxsaXBzZSByeD0iOSIgcnk9IjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5MSAzMTQpIiBmaWxsPSIjZDJkYmVkIiBzdHJva2Utd2lkdGg9IjAiIC8+DQogICAgPC9nPg0KPC9zdmc+");
+      }
+      .logo {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border: 4px solid black;
+        border-radius: 2em;
+      }
+      .p2prc {
+        position: fixed;
+        top: 63%;
+        font-size: calc((var(--size) * 100px)/8);
+        font-weight: 700;
+        font-family: sans-serif;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    </style>
+    
+    <div class="logo">
+      <div class="bg"></div>
+      <div class="p2prc">p2prc</div>
+      </div>
+    </div>
+  </body>
+</html>