*{margin:0;padding:0;box-sizing:border-box}body{max-width:1920px;width:100%;margin:0 auto;background-color:#010101;color:#fff;font-family:Poppins,sans-serif;font-style:normal;-webkit-tap-highlight-color:transparent}button{cursor:pointer}#loading{height:calc(100dvh - 77px);display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}@media screen and (max-width: 480px){#loading{height:calc(100dvh - 52px)}}#image{margin-top:77px;position:relative;height:calc(100dvh - 77px);display:flex;flex-direction:column;align-items:center;justify-content:space-around}#image .instruction__component{position:absolute;z-index:1;left:0;top:0;width:100%;height:85%;display:flex;gap:5px;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow-x:hidden}#image .image__container,#image .webcam__container{position:relative;z-index:2;height:85%}#image .image__container img,#image .webcam__container video{width:100%;height:100%;object-fit:contain}#image .webcam__container canvas.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}#image .capture-btn{width:55px;height:55px;display:grid;place-items:center;background-color:#2b99d6;color:#fff;border:none;border-radius:50%;cursor:grab}#image .capture-btn.upload,#image .capture-btn.proceed{cursor:pointer}@media screen and (max-width: 480px){#image{margin-top:52px;height:calc(100dvh - 52px)}}@media screen and (max-height: 400px){#image .instruction__component{display:none}}#details-container{margin-top:77px}.canvas-img{max-width:100%;max-height:80vh;margin:0 auto;display:block;border-left:2px solid #212122;border-bottom:2px solid #212122;border-right:2px solid #212122}.go-back-link{margin:0 auto;width:fit-content;display:block;color:#2b99d6;font-size:20px;text-decoration:none}.go-back-link:hover{text-decoration:underline}#details-wrapper{padding:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.face-analyze h2{text-decoration:underline}.face-analyze p{margin:5px 0}@media screen and (max-width: 1280px){#details-wrapper{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 480px){#details-container{margin-top:52px}#details-wrapper{grid-template-columns:repeat(1,1fr)}}#navbar{position:fixed;top:0;max-width:1920px;width:100%;margin:0 auto;background-color:#0a0a0a;color:#fff;display:flex;align-items:center;border-bottom:2px solid #212122}#navbar .logo{width:75px;height:75px}@media screen and (max-width: 480px){#navbar .logo{width:50px;height:50px}}
