.laptop-project,.browser-body{position:relative}
.project-number{position:absolute;z-index:2;top:22px;right:24px;width:52px;height:52px;display:grid;place-content:center;border:2px solid var(--navy);border-radius:50%;background:rgba(255,255,255,.72);font:750 20px/1 var(--mono);text-align:center;box-shadow:3px 4px 0 rgba(7,26,53,.13)}
.project-number span{display:block;margin-bottom:3px;font:600 6px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lawtie-number{top:42px;right:0;width:68px;height:68px;font-size:25px;background:#f8df84;transform:rotate(5deg)}
.project-doodle{position:absolute;right:28px;bottom:42px;color:rgba(7,26,53,.42);font:700 28px/1.05 "Caveat",cursive;white-space:nowrap;text-align:center;transform:rotate(6deg);transition:transform .35s ease,color .35s ease;pointer-events:none}
.browser-card:hover .project-doodle{color:rgba(7,26,53,.76);transform:rotate(-3deg) scale(1.12)}
.doodle-business{transform:rotate(-7deg)}.doodle-route{font-size:25px}.doodle-network{font:700 20px/1.1 var(--mono)}.doodle-space{bottom:47px;font-size:27px;animation:space-drift 4s ease-in-out infinite}
.project-link{align-self:flex-start;margin:16px 0 10px;padding:10px 13px;border:1px solid var(--navy);border-radius:9px;background:rgba(255,255,255,.55);font:650 10px var(--mono);transition:.25s ease}
.project-link:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
@keyframes space-drift{0%,100%{transform:translate(0,0) rotate(5deg)}50%{transform:translate(-5px,-8px) rotate(-4deg)}}
@media(max-width:640px){.lawtie-number{top:15px;right:5px}.project-doodle{opacity:.55;right:20px}}
@media(prefers-reduced-motion:reduce){.doodle-space{animation:none}}