html, body { height: 100%; margin: 0; padding: 0; } #main { position: fixed; width: 100%; height: 100%; left: 0; top: 0; } #app { width: 100%; height: 100%; } .appCenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .bottomBar { position: fixed; bottom: 0; width: 100%; height: 40px; } .bottomItem { margin: 0; top: -14px; } .profileNickname { margin: 0; left: -16px; } .newAvatar { border-radius: 50%; border: 2px solid #555; filter: drop-shadow(1px 1px 1px #000000); height: 200px; width: 200px; } .profileAvatar { border: 0.5px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); left: 35px; } .smallAvatar { border: 0.5px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); } .flippedSmallAvatar { transform: scaleX(-1); border: 0.3px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); } .phoneFlippedSmallAvatar { transform: translate(-20, -20); bottom: 50; right: 50; transform: scaleX(-1); border: 0.8px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); } .bookAvatar { border-radius: 50%; transform: scaleX(-1); border: 0.3px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); }