@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Roboto'; 
    font-weight: 300; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}
body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background-color: rgb(255, 255, 255);
}
.screen { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 333; 
    width: 216px; 
    height: 248px; 
    border-radius: 50px; 
    background-color: #000000; 
    display: flex; 
    flex-wrap: wrap;
    box-shadow: inset 0 0 1px 3px #DADADA, inset 0 0 3px 5px #DADADA, inset 0 0 2px 9px rgb(0 0 0 / 90%), inset 0 0 0 10px #DADADA, inset 0 0 0 17px black, inset 0 0 11px 20px #424242, 0 0 100px 2px rgb(0, 0, 0);
}
#innerScreen { width: 92%; height: 86%; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; background-color: transparent; margin-top: 12px; margin-left: 11px; border-radius: 30px; }
#display { width: 85%; height: 18%; border-radius: inherit; margin-top: 10px; display: flex; justify-content: flex-end; color: #FFFFFF; padding: 10px; overflow: hidden; font-size: 25px; }
.btn { color: #FFFFFF; width: 18.5%; height: 25px; border-radius: 40px; background-color: rgb(66, 66, 66); display: flex; justify-content: center; align-items: center; margin-right: 4px; cursor: pointer; transform: .2s; }
    .btn:hover { background-color: rgb(255, 136, 0); color: #FFFFFF; }
    .btn.zero { width: 39%; }
.btn-operator { background-color: rgb(255, 136, 0); color: #FFFFFF; }
#calc-clear, #negativepositive, #percent { background-color: #AAAAAA; color: #000000; font-weight: 500; }
.controller {
    position: absolute;
    top: 64px;
    right: -9px;
    width: 8px;
    height: 30px;
    border-radius: 100px;
    background: linear-gradient(to bottom, #AAAAAA, #FFFFFF);
    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 80%), inset 0 3px 2px 0 #DADADA, inset 0 6px 2px 0 rgba(0, 0, 0, 0.712), inset 0 1.3px 0 0 rgb(0 0 0 / 80%), inset 0 -1px 2px 0 rgb(0 0 0 / 80%), inset 0 -3px 2px 0 #DADADA, inset 0 -6px 2px 0 rgba(0, 0, 0, 0.712), inset 0 -1.3px 0 0 rgb(0 0 0 / 80%), -4px 0 3px 0 rgba(0, 0, 0, 0.822);
}
.right-button { 
    position: absolute; 
    top: 125px; 
    right: -2.5px; 
    width: 4px; 
    height: 59px; 
    border-radius: 50px; 
    border: 1px solid rgba(136, 134, 134, 0.432); 
    z-index: 777; 
    background: linear-gradient(to bottom, #AAAAAA, #FFFFFF); 
    box-shadow: inset 0 4px 3px 0 rgba(0, 0, 0, 0.438), inset 0 -5px 2.5px 0 rgba(0, 0, 0, 0.733); 
}
.container { width: 185px; height: 470px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 100px; box-shadow: inset 0 0 100px 0 rgb(0, 0, 0); border-top: none; }
.watchband { 
    position: absolute; 
    width: 180px; 
    height: 250px; 
    border: 1px solid #FFFFFF; 
    border-radius: 80px; 
    box-shadow: 0 9px 7px 0 rgb(214, 214, 214), 0 9px 7px 0 rgb(214, 214, 214), 0 -9px 7px 0 rgb(214, 214, 214), 0 -9px 7px 0 rgb(214, 214, 214); 
    background-color: rgb(255, 255, 255); 
}
    .watchband:nth-of-type(1) { top: -108px; left: -81%; }
    .watchband:nth-of-type(2) { top: -108px; left: 83%; }
    .watchband:nth-of-type(3) { top: 328px; left: -81%; }
    .watchband:nth-of-type(4) { top: 328px; left: 83%; }