:root{--clr-p-900: #153fab;--clr-p-800: #145fca;--clr-p-700: #1370dd;--clr-p-600: #0e82f0;--clr-p-500: #0091ff;--clr-p-400: #35a1ff;--clr-p-300: #5cb1ff;--clr-p-200: #8cc7ff;--clr-p-100: #badcff;--clr-p-50: #e2f1ff;--clr-a-900: #d45700;--clr-a-800: #dd6f00;--clr-a-700: #e37e00;--clr-a-600: #e98d00;--clr-a-500: #ec9904;--clr-a-400: #eea728;--clr-a-300: #f0b74e;--clr-a-200: #f4cb80;--clr-a-100: #f8e0b2;--clr-a-50: #fcf3e0;--clr-black: #000;--clr-white: #fff;--clr-mono-900: hsl(0 0% 10%);--clr-mono-800: hsl(0 0% 20%);--clr-mono-700: hsl(0 0% 30%);--clr-mono-600: hsl(0 0% 40%);--clr-mono-500: hsl(0 0% 50%);--clr-mono-400: hsl(0 0% 60%);--clr-mono-300: hsl(0 0% 70%);--clr-mono-200: hsl(0 0% 80%);--clr-mono-100: hsl(0 0% 90%)}html,body{height:100%}body{font-family:Roboto,sans-serif;background-color:var(--clr-mono-800);color:var(--clr-p-50);margin:1em;font-size:14px}*,:before,:after{box-sizing:border-box}.sr-only{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.page-container{margin:0 auto;max-width:min(100%,900px)}.no-list{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,p{margin:0}.page-section{min-height:80vh;display:flex;align-items:center;justify-content:center;flex-direction:column}.pens-overview{margin-top:3rem}ul.pens{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}ul.pens>li{display:flex;flex-direction:column}