:root{font-family:system-ui,sans-serif;font-weight:400;font-size:.75rem;color-scheme:light dark;color:#fff;background-color:#111;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;border:0px solid rgba(0,0,0,0)}html{height:100%}body{display:grid;place-items:center;grid-gap:1.875rem;height:100%;padding:0vh 20vw;grid-template-areas:"p1 p1" "p2 p2" "a1 a2" ". ." ". ." ". ." "p3 p3" "a3 a3";justify-items:start;justify-content:center;align-content:center;align-self:center;justify-self:center}div.a1,div.a2,div.a3{position:relative}div.a1 p,div.a2 p,div.a3 p{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transition:top .4s ease-in-out,opacity .4s ease-in-out}div.a1 a,div.a2 a,div.a3 a{z-index:10}div.a1:hover p,div.a2:hover p,div.a3:hover p{top:1.2rem;opacity:1;pointer-events:all}a{color:#6b90ff}.p1{grid-area:p1}.p2{grid-area:p2}.p3{grid-area:p3}.a1{grid-area:a1}.a2{grid-area:a2}.a3{grid-area:a3}@media (prefers-color-scheme: light){:root{color:#111;background-color:#f0f0f0}}