.project-preview{--controls-height:40px;align-items:flex-start;background-color:rgb(var(--background-rgb));border-radius:var(--border-radius);border:var(--border-width) solid rgb(var(--foreground-rgb));display:flex;flex-direction:column;min-height:80vh;position:relative;width:100%;margin-bottom:2em;overflow:auto;scroll-behavior:smooth;&.fullscreen{bottom:0;height:100vh;left:0;position:fixed;right:0;top:0;z-index:var(--z-index-overlay)}.project-preview-footer,.project-preview-header{display:flex;align-items:center;justify-content:space-between;background-color:rgb(var(--foreground-rgb));color:rgb(var(--background-rgb));font-size:var(--font-xs);height:var(--controls-height);width:100%;padding:0 8px;z-index:1}.project-preview-header{border-bottom:1px dashed rgb(var(--background-rgb))}.project-preview-footer{border-top:1px dashed rgb(var(--background-rgb));ul{display:flex;gap:8px;padding:8px}}.preview-controls{align-items:center;display:flex;gap:16px;button{display:flex;align-items:center}svg{font-size:1rem}}.project-preview-content{display:flex;justify-content:center;height:calc(100% - 80px);width:100%;overflow:auto}iframe{width:100%;border:0;flex:1 1}}.project-wrapper{padding:16px;.wrap-content{margin:0 var(--horizontal-gap)}.project-header{margin-bottom:2em}h1{margin:2rem 0;font-weight:700}.project-meta{gap:32px}.project-meta,.project-meta li{display:flex;align-items:center}.project-meta li{gap:8px}.project-author img{border-radius:50%;height:32px;width:32px}blockquote{font-style:italic;margin:0 0 1.4em;padding:2em 3em;position:relative;text-align:left;font-size:1.2em}blockquote:before{content:'"';font-size:4em;position:absolute;left:0}h2,h3{margin:1em 0 .5em}.tags-wrapper{margin-bottom:2rem;display:flex;gap:8px}.tag{border:1px solid;border-radius:2px;font-size:var(--font-xs);padding:4px;font-weight:700}.project-stack{margin-bottom:16px;ul{display:flex;gap:8px}}.badge{border:1px solid;border-radius:2px;font-size:var(--font-xs);padding:2px 4px}.project-learnings ul{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:2em}.project-learnings li{width:calc((100% - 32px) / 3)}.project-learnings li a{display:flex;width:100%;height:200px;align-items:flex-start;border:1px solid;border-radius:2px;padding:16px;font-size:1.5rem}.seperator-sq{margin:32px auto 0}}