major feat: add new website style

Signed-off-by: Matthieu Pignolet <matthieu@puffer.fish>

3 files changed, 124 insertions, 4 deletions

diff --git a/98.css b/98.css
new file mode 100644
index 0000000..d7c3715
--- /dev/null
+++ b/98.css
@@ -0,0 +1,2 @@
+/*! 98.css v0.2.6 - https://botoxparty.github.io/XP.css/ */@font-face{font-family:"Pixelated MS Sans Serif";src:url(ms_sans_serif.woff) format("woff");src:url(ms_sans_serif.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:"Pixelated MS Sans Serif";src:url(ms_sans_serif_bold.woff) format("woff");src:url(ms_sans_serif_bold.woff2) format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Perfect DOS VGA\ 437 Win;src:url(PerfectDOSVGA437Win.woff2) format("woff2"),url(PerfectDOSVGA437Win.woff) format("woff");font-weight:400;font-style:normal}.surface{background:silver}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{text-decoration:none;border-bottom:.5px solid #222}a{color:#00f}a:focus{outline:1px dotted #00f}code,code *{font-family:monospace}pre{display:block;padding:12px 8px;background-color:#000;color:silver;font-size:1rem;margin:0}pre,pre *{font-family:Perfect DOS VGA\ 437 Win}summary:focus{outline:1px dotted #000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{height:17px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:vertical:end{height:17px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:horizontal:start{width:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E")}::-webkit-scrollbar-button:horizontal:end{width:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E")}button{font-size:11px;box-sizing:border-box;border:none;background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;border-radius:0;min-width:75px;min-height:23px;padding:0 12px}button:not(:disabled).active,button:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}button.focused,button:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner{border:0}label{display:inline-flex;align-items:center}input,label,textarea{font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}textarea{padding:3px 4px;border:none;background-color:#fff;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}textarea:focus{outline:none}select{font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;border:none;background-color:#fff;box-sizing:border-box;height:21px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;padding:3px 32px 3px 4px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0}select:focus{outline:none;color:#fff;background-color:navy}select:focus option{color:#000;background-color:#fff}select:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}option{font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}.vertical-bar{width:4px;height:20px;background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}&:disabled,&:disabled+label{color:grey;text-shadow:1px 1px 0 #fff}input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;background:0;position:fixed;opacity:0;border:none}input[type=radio]+label{line-height:13px;position:relative;margin-left:18px}input[type=radio]+label:before{content:"";position:absolute;top:0;left:-18px;display:inline-block;width:12px;height:12px;margin-right:6px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E")}input[type=radio]:active+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio]:checked+label:after{content:"";display:block;width:4px;height:4px;top:4px;left:-14px;position:absolute;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E")}input[type=radio]:focus+label{outline:1px dotted #000}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;background:0;position:fixed;opacity:0;border:none}input[type=checkbox]+label{line-height:13px;position:relative;margin-left:19px}input[type=checkbox]+label:before{content:"";position:absolute;left:-19px;display:inline-block;width:13px;height:13px;margin-right:6px}input[type=checkbox]:focus+label{outline:1px dotted #000}input[type=checkbox]:active+label:before{background:silver}input[type=checkbox]:checked+label:after{content:"";display:block;width:7px;height:7px;position:absolute;top:1px}input[type=radio][disabled]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E")}input[type=checkbox][disabled]+label:before{background:silver}input[type=checkbox][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E")}input[type=email],input[type=password],input[type=text]{padding:3px 4px;border:1px solid #7f9db9;background-color:#fff;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;height:21px;line-height:2}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{outline:none}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:21px;width:11px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(-8px)}input[type=range]::-moz-range-thumb{height:21px;width:11px;border:0;border-radius:0;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(2px)}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;box-sizing:border-box;background:#000;border-right:1px solid grey;border-bottom:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9}input[type=range]::-moz-range-track{width:100%;height:2px;box-sizing:border-box;background:#000;border-right:1px solid grey;border-bottom:1px solid grey;box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(-10px)}input[type=range].has-box-indicator::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(0)}.is-vertical{display:inline-block;width:4px;height:150px;transform:translateY(50%)}.is-vertical>input[type=range]{width:150px;height:4px;margin:0 16px 0 10px;transform-origin:left;transform:rotate(270deg) translateX(calc(-50% + 8px))}.is-vertical>input[type=range]::-webkit-slider-runnable-track{border-left:1px solid grey;border-right:0;border-bottom:1px solid grey;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-moz-range-track{border-left:1px solid grey;border-right:0;border-bottom:1px solid grey;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-webkit-slider-thumb{transform:translateY(-8px) scaleX(-1)}.is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb{transform:translateY(-10px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)}.window{font-size:11px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;background:silver;padding:3px}.window fieldset{margin-bottom:9px}.title-bar{font-size:11px;background:linear-gradient(90deg,navy,#1084d0);padding:3px 2px 3px 3px;display:flex;justify-content:space-between;align-items:center}.title-bar-text{font-weight:700;color:#fff;letter-spacing:0;margin-right:24px}.title-bar-controls{display:flex}.title-bar-controls button{padding:0;display:block;min-width:16px;min-height:14px}.title-bar-controls button:focus{outline:none}.window-body{margin:8px}.window-body pre{margin:-8px}.status-bar{margin:0 1px;display:flex;gap:1px}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;padding:2px 3px;margin:0}ul.tree-view{font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;display:block;background:#fff;padding:6px;margin:0}ul.tree-view li{list-style-type:none;margin-top:3px}ul.tree-view a{text-decoration:none;color:#000}ul.tree-view a:focus{background-color:navy;color:#fff}ul.tree-view ul{margin-top:3px;margin-left:16px;padding-left:16px;border-left:1px dotted grey}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{content:"";display:block;position:absolute;left:-16px;top:6px;width:12px;border-bottom:1px dotted grey}ul.tree-view ul>li:last-child:after{content:"";display:block;position:absolute;left:-20px;top:7px;bottom:0;width:8px;background:#fff}ul.tree-view ul details>summary:before{margin-left:-22px;position:relative;z-index:1}ul.tree-view details{margin-top:0}ul.tree-view details>summary:before{text-align:center;display:block;float:left;content:"+";border:1px solid grey;width:8px;height:9px;line-height:9px;margin-right:5px;padding-left:1px;background-color:#fff}ul.tree-view details[open] summary{margin-bottom:0}ul.tree-view details[open]>summary:before{content:"-"}fieldset{border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;padding:10px;padding-block-start:8px;margin:0}legend{background:silver}.field-row{display:flex;align-items:center}.field-row>*+*{margin-left:6px}[class^=field-row]+[class^=field-row]{margin-top:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:6px}menu[role=tablist]{position:relative;margin:0 0 -2px;text-indent:0;list-style-type:none;display:flex;padding-left:3px}menu[role=tablist] button{z-index:1;display:block;color:#222;text-decoration:none;min-width:unset}menu[role=tablist] button[aria-selected=true]{padding-bottom:2px;margin-top:-2px;background-color:silver;position:relative;z-index:8;margin-left:-3px;margin-bottom:1px}menu[role=tablist] button:focus{outline:1px dotted #222;outline-offset:-4px}menu[role=tablist].justified button{flex-grow:1;text-align:center}[role=tabpanel]{padding:14px;clear:both;background:silver;border:none;position:relative;z-index:2;margin-bottom:9px}body{font-family:Arial;font-size:12px;color:#222}@media (not(hover)){button:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}pre{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.window{font-family:"Pixelated MS Sans Serif",Arial;-webkit-font-smoothing:none}.title-bar-controls button[aria-label=Minimize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom 3px left 4px}.title-bar-controls button[aria-label=Maximize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top 2px left 3px}.title-bar-controls button[aria-label=Help]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top 2px left 5px}.title-bar-controls button[aria-label=Close]{margin-left:2px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top 3px left 4px}input[type=checkbox]+label:before{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;background:#fff}input[type=checkbox]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");top:3px;left:-16px}input[type=email],input[type=password],input[type=text],select,textarea{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}input,label,option,select,textarea{-webkit-font-smoothing:none}menu[role=tablist] button{top:3px;background:silver;box-shadow:inset 1px 1px #fff,inset 2px 2px #dfdfdf,inset -1px 0 #000,inset -2px 0 #7f7f7f;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:2px solid transparent}menu[role=tablist] button:first-of-type:before{content:"";display:block;position:absolute;z-index:-1;top:100%;left:0;height:2px;width:0;border-left:1px solid #fff;border-right:1px solid #dfdfdf}menu[role=tablist] button[aria-selected=true]{top:2px;margin-right:-1px;margin-top:-4px}menu[role=tablist] button[aria-selected=true]:first-of-type{left:0}menu[role=tablist] button{padding:3px 12px}[role=tabpanel]{box-shadow:inset 1px 1px #fff,inset 2px 2px #dfdfdf,inset -1px -1px #0a0a0a,inset -2px -2px grey}button{font-family:"Pixelated MS Sans Serif",Arial}button,ul.tree-view{-webkit-font-smoothing:none}ul.tree-view{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}
+/*# sourceMappingURL=98.css.map */
\ No newline at end of file
diff --git a/LICENSES b/LICENSES
new file mode 100644
index 0000000..74f51f1
--- /dev/null
+++ b/LICENSES
@@ -0,0 +1,16 @@
+This website use opensource software.
+
+Below is the list of used opensource-licensed software:
+- 98.css (https://github.com/jdan/98.css)
+
+The following is a copy of the used licenses:
+
+98.css -
+
+Copyright 2020 Jordan Scales
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/index.html b/index.html
index ed0c4b2..2d9a01d 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,107 @@
-Matthieu Pignolet awesome website.
+<!DOCTYPE html>
+<html lang="en">
 
-<a href="mailto:matthieu@puffer.fish">PufferFish e-mail</a><br/>
-<a rel="me" href="https://mastodon.puffer.fish/@matthieu">Mastodon</a><br/>
-<a href="gpg.asc">GPG Key</a>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matthieu Pignolet @ puffer.fish</title>
+
+    <link rel="stylesheet" href="98.css">
+    <style>
+        .surface {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            width: 100vw;
+        }
+        .window {
+            width: 50%;
+        }
+        .bottom {
+            width: 100%;
+            margin-top: auto;
+        }
+        .window-body {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            word-wrap: break-word;
+        }
+        a {
+            text-decoration: none;
+        }
+    </style>
+</head>
+
+<body class="surface">
+
+    <div class="window">
+        <div class="title-bar">
+            <div class="title-bar-text">Matthieu Pignolet</div>
+            <div class="title-bar-controls">
+                <button aria-label="Minimize"></button>
+                <button aria-label="Maximize"></button>
+                <button aria-label="Close"></button>
+            </div>
+        </div>
+        <div class="window-body">
+            <p>Welcome ! I'm Matthieu Pignolet</p>
+            <p>
+                Currently studying networking & programming, I inspire to excell in my various projects.
+                I'm currently the network & system administrator for Pufferfish.
+            </p>
+            <p>
+                I really enjoy opensource software such as Linux, OpenLDAP, MIT Kerberos, Proxmox and many other, 
+                I also enjoy solutions that are scale able, such as containers, Kubernetes and other cloud technologies 
+            </p>
+            <p>
+                I daily run Linux (Fedora 42 at this time) on a Lenovo ThinkPad P15 Gen 2i
+            </p>
+            <p>
+                Feel free to follow me on other foss platforms listed below.
+            </p>
+
+            <div class="bottom">
+
+                <a href="mailto:matthieu@puffer.fish">
+                    <button>
+                        PufferFish email
+                    </button>
+                </a>
+
+
+                <a rel="me" href="https://mastodon.puffer.fish/@matthieu">
+                    <button>
+                        Mastodon
+                    </button>
+                </a>
+                <a rel="me" href="https://forgejo.puffer.fish/matthieu">
+                    <button>
+                        Forgejo
+                    </button>
+                </a>
+
+                <a rel="me" href="https://github.com/MatthieuCoder">
+                    <button>
+                        GitHub
+                    </button>
+                </a>
+                <a href="gpg.asc">
+                    <button>
+                        GPG Key
+                    </button>
+                </a>
+
+                <a href="LICENSES">
+                    <button>
+                        View website licenses
+                    </button>
+                </a>
+            </div>
+        </div>
+
+</body>
+
+</html>
\ No newline at end of file