*,*:before,*:after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{--color-background: hsl(210deg 15% 6%);--color-text: hsl(0deg 0% 100%)}[data-theme=light]{--color-background: hsl(20deg, 10%, 94%);--color-text: hsl(210deg 15% 6%)}#root,body,html{color:var(--color-text);background:var(--color-background);font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,Adwaita Sans,Cantarell,Ubuntu,roboto,noto,helvetica,arial,sans-serif;font-display:optional;color-scheme:light dark;transition:background-color 1s ease-in,color 1s ease}.theme-switch{position:absolute;top:0;left:20%;display:block}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}:root{--book-w: 400px;--book-h: 550px;--cover-thickness: 6px;--spine-w: 24px;--cover-color: #1f2937;--cover-sheen: #2b3648;--page-color: hsl(35deg, 30%, 90%);--page-text: hsl(0, 0%, 18%);--shadow: 0 5px 15px var(--color-text);--accent: #ff5a3c}.book-wrapper{display:flex;justify-content:center;align-items:center;height:100vh}.book{width:var(--book-w);height:var(--book-h);margin:48px auto;position:relative;perspective:1200px;perspective-origin:20% 50%;filter:drop-shadow(var(--shadow))}.book>*{transform-style:preserve-3d}.book__spine{position:absolute;left:0;top:0;width:var(--spine-w);height:100%;background:linear-gradient(90deg,#18202c,#101622);border-radius:8px 0 0 8px;box-shadow:inset -8px 0 14px #00000059}.book__cover{position:absolute;top:0;height:100%;width:calc(var(--book-w) - var(--spine-w));left:var(--spine-w);border-radius:0 8px 8px 0;background:linear-gradient(135deg,var(--cover-color),var(--cover-sheen));box-shadow:inset 0 0 0 2px #ffffff0f;transform-origin:left center}.book__cover--back{transform:translateZ(-var(--cover-thickness))}.book__pages{position:absolute;top:0;left:calc(var(--spine-w) + 2px);width:calc(var(--book-w) - var(--spine-w) - 4px);height:calc(var(--book-h) - 4px);border-radius:0 8px 8px 0;background:var(--page-color);color:var(--page-text);transform:translateZ(-3px);box-shadow:inset 2px 0 #00000014,inset -2px 0 #0000000f}.page--right:before{content:"";position:absolute;right:0;top:0;width:24px;height:100%;background:linear-gradient(90deg,var(--page-color),rgba(0,0,0,.06),rgba(0,0,0,0));pointer-events:none}.book__title{position:absolute;inset:0;color:#fff;letter-spacing:.8px;font-size:2rem;display:grid;place-items:center}.book__cover--front{position:relative;will-change:transform}.book__cover--front:after{content:"";position:absolute;left:-2px;top:0;width:18px;height:100%;background:linear-gradient(90deg,#0003,#0000);opacity:0;transition:opacity .28s ease;border-radius:8px 0 0 8px}.book:hover .book__cover--front{transition:transform .4s ease-in;transform:rotateY(-16deg) translateZ(4px)}.book:hover .book__cover--front:after{opacity:1}.book:not(:hover) .book__cover--front{transform:rotateY(0) translateZ(0)}.book .book__cover--front{transition:transform .7s ease-in-out}.page{padding:22px 28px}.page__section:first-child{padding-top:34px}p:first-of-type:first-letter{font-size:3em;float:left;line-height:1em;margin-right:.2em}.book.is-open .book__cover--front{transform:rotateY(-160deg) translateZ(20px)}.book.is-open .book__pages{opacity:1}.book:not(.is-open) .book__pages{opacity:0}.table-of-contents .page__section{display:flex;justify-content:space-between}.profile-img{float:left;shape-outside:circle();margin-right:32px}.tech-stack{position:relative;width:400px;height:400px;margin:auto;border-radius:50%}.badge{position:absolute;width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:#fff;box-shadow:0 4px 12px #0003;transition:transform .4s ease}.react{top:0;left:160px}.typescript{top:160px;right:0}.javascript{bottom:-160px;left:160px}.css{top:160px;left:0}.html{top:80px;left:80px}.badge:hover{transform:scale(1.2) rotate(10deg);background:#ffe}