@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,700;1,600&family=Libre+Barcode+128+Text&family=Saira:wght@300;500;700&display=swap";@import"https://db.onlinewebfonts.com/c/4bd53afef5b90dfbb963f9d327a9284b?family=m6x11plus";@font-face{font-family:Pretendard-Regular;src:url(https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff) format("woff");font-weight:400;font-style:normal}*,*:after,*:before{box-sizing:border-box}:root{font-size:12px;--color-text: #fff;--color-bg: #000;--color-link: #e2c2d5;--color-link-hover: #fff;--page-padding: 1.5rem}body{margin:0;color:var(--color-text);background-color:var(--color-bg);font-family:Pretendard-Regular;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg)}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer}a:hover{text-decoration:underline;color:var(--color-link-hover)}a:focus{outline:none;background:lightgrey}a:focus:not(:focus-visible){background:transparent}a:focus:focus-visible{outline:2px solid red;background:transparent}.frame{padding:3rem 2rem 0;display:grid;z-index:1000;position:relative;grid-row-gap:1rem;grid-column-gap:2rem;pointer-events:none;justify-items:start;grid-template-columns:auto auto;grid-template-areas:"title" "back" "archive" "github" "demos" "tags" "sponsor";a,button {pointer-events: auto;} .frame__title {grid-area: title; font-size: inherit; margin: 0;} .frame__back {grid-area: back; justify-self: start;} .frame__archive {grid-area: archive; justify-self: start;} .frame__github {grid-area: github;} .frame__tags {grid-area: tags; display: flex; flex-wrap: wrap; gap: 1rem;} .frame__demos {grid-area: demos; display: flex; flex-wrap: wrap; gap: 1rem;} @media screen and (min-width: 53em) {padding: var(--page-padding); height: 100%; position: fixed; top: 0; left: 0; width: 100%; grid-template-columns: auto 1fr auto auto auto; grid-template-rows: auto auto; align-content: space-between; justify-content: space-between; grid-template-areas: "title ... back github archive" "tags ... sponsor sponsor sponsor"; .frame__tags {align-self: end;} .frame__demos,#cdawrap {justify-self: end; text-align: right; max-width: 300px;}}}.frame #cdawrap{justify-self:start;grid-area:sponsor}