@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../fonts/IBM/IBMPlexSans-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;src:local("IBM Plex Sans SemiBold"),local("IBMPlexSans-SemiBold"),url(../fonts/IBM/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2")}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtraLight"),local("IBMPlexSans-ExtraLight"),url(../fonts/IBM/IBMPlexSans-ExtraLight-Latin1.woff2) format("woff2")}@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;src:local("IBM Plex Serif"),local("IBMPlexSerif"),url(../fonts/IBM/IBMPlexSerif-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;src:local("IBM Plex Serif SemiBold"),local("IBMPlexSerif-SemiBold"),url(../fonts/IBM/IBMPlexSerif-SemiBold-Latin1.woff2) format("woff2")}@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:200;src:local("IBM Plex Serif ExtraLight"),local("IBMPlexSerif-ExtraLight"),url(../fonts/IBM/IBMPlexSerif-ExtraLight-Latin1.woff2) format("woff2")}*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.6}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{-webkit-animation-duration:0s!important;animation-duration:0s!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}:root{--color-dark:#101010;--color-light:#eeeeee;--color-primary:#294ef0;--font-body:'IBM Plex Serif',serif;--font-headings:'IBM Plex Sans',sans-serif}html{font-size:16px}@media screen and (min-width:320px){html{font-size:16px}}@media screen and (min-width:768px){html{font-size:18px}}@media screen and (min-width:1024px){html{font-size:22px}}html{font-family:var(--font-body);background-color:var(--color-dark);color:var(--color-light);font-weight:200}a{-webkit-text-decoration-color:#294ef0;text-decoration-color:#294ef0;text-decoration-thickness:.15em;color:#eee}a:link{color:#eee}a:hover{opacity:.5}a:active{color:#294ef0}h1,h2,h3,h4,h5,h6{font-weight:400;font-family:var(--font-headings)}.font-regular{font-weight:400}*,::after,::before{transform-style:preserve-3d;box-sizing:border-box}body{display:flex;flex-direction:column;padding:1em}main{flex-grow:2}.logo{text-decoration:none}.cards{display:grid;padding:0;list-style-type:none;gap:1em;grid-template-columns:repeat(auto-fit,minmax(10em,1fr))}.card{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;border:1px solid #fff;cursor:pointer;opacity:0;transform-origin:center;transition:transform .3s ease-in-out,opacity 1s ease-in-out}.card::after{position:absolute;content:attr(data-index);-webkit-backface-visibility:hidden;backface-visibility:hidden;bottom:0;right:0;font-size:.6em;font-weight:400;background-color:var(--color-light);color:var(--color-dark);display:block;padding:1.5em .5em .5em 1.5em;min-width:30px;text-align:center;-webkit-clip-path:polygon(87.5% 12.5%,12.5% 87.5%,87.5% 87.5%);clip-path:polygon(87.5% 12.5%,12.5% 87.5%,87.5% 87.5%)}.card.visible{opacity:1;transform:translateY(0)}.card.flipped{transform:rotateY(180deg)}.card .back,.card .front{min-height:10em;grid-row:1;grid-column:1;display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card .back{transform:rotateY(180deg)}