*{box-sizing:border-box}body{align-items:center;background:#222;display:flex;flex-direction:column;justify-content:center;margin:0;min-height:100vh;padding:0}.man{display:inline-block;font-size:4rem;line-height:4rem;transform:rotateY(180deg)}#app,#outside{align-items:center;background:#f3f3f3;border:5px solid #aaa;border-radius:10px;display:flex;height:150px;justify-content:center;margin-bottom:2rem;position:relative;width:300px}.portal{background:#f3f3f3;border:4px solid var(--c);border-radius:100%;box-shadow:inset 0 0 20px 0 var(--c);height:80%;position:absolute;width:20%}.portal--out{--c: #ffa500;left:10px}.portal--in{--c: #00f;right:10px}