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%) translate(0,-20px); } .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 img{ transform: scaleX(-1); border: 1.3px solid #1976d2; -webkit-filter: grayscale(100%); filter: grayscale(100%) brightness(150%) contrast(150%) drop-shadow(0.7px 0.7px 0.7px #000000); } .phoneFlippedSmallAvatar:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; border: 2.4px solid #1976d2; box-shadow: inset 0px 0px 35px rgb(255, 255, 255); } .bookAvatar { border-radius: 50%; transform: scaleX(-1); border: 0.3px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); }