:root{--black: #2a2a2a;--white: #ffffff;--color-me: #7dd427;--color-ui: #ffd500;--color-web: #2156e7;--color-mobile: #db0c81}*{box-sizing:border-box}body{margin:0;padding:0;box-sizing:border-box;font-family:Newsreader,serif;font-optical-sizing:auto;font-weight:400;font-size:18px;font-style:normal;line-height:1.4}body{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a,#0f0f0f)}h1{font-size:4rem;margin:0 0 .35em}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}.container{width:50vh;aspect-ratio:1/1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"me ui" "web mobile";transition:grid-template-columns .4s ease-in-out,grid-template-rows .4s ease-in-out,width .5s ease-in-out;max-width:90vh;max-height:90vh}.container:hover{width:80vw}.container:has(.me:hover){grid-template-columns:8fr 1fr;grid-template-rows:8fr 1fr}.container:has(.ui:hover){grid-template-columns:1fr 8fr;grid-template-rows:8fr 1fr}.container:has(.web:hover){grid-template-columns:8fr 1fr;grid-template-rows:1fr 8fr}.container:has(.mobile:hover){grid-template-columns:1fr 8fr;grid-template-rows:1fr 8fr}.zone{display:flex;align-items:center;justify-content:center;font-weight:700;position:relative}.zone>h2{font-size:1rem;font-weight:100;transition:color .3s ease-in-out;z-index:2;margin:0}.zone article{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;padding:5%;overflow:hidden;transition:opacity .25s ease-in-out}.zone article p{margin:0 0 1em}.zone:hover{color:#fff}.zone:hover>h2{display:none}.zone:hover article{opacity:1;overflow-y:auto;transition:opacity .5s ease-in-out .15s}.me{grid-area:me;background-color:var(--color-me)}.me article{color:var(--black)}.ui{grid-area:ui;background-color:var(--color-ui)}.ui article{color:var(--black)}.web{grid-area:web;background-color:var(--color-web);color:var(--white)}.mobile{grid-area:mobile;background-color:var(--color-mobile);color:var(--white)}.avatar{width:160px;height:160px;object-fit:cover;border-radius:100%;margin:0 0 1em}.btn{display:inline-block;padding:10px 20px;background-color:var(--white);color:var(--black);text-decoration:none;border-radius:5px;margin:0 0 1em}.badges{display:flex;gap:5px}.badge{border-radius:40px;padding:3px 8px;background-color:#0000001a;color:#0009;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:.8rem;font-weight:400;display:inline-flex;align-items:center;justify-content:center}