@font-face{font-family:'mi';src:url('mi.woff2');}

html:not(.operating){cursor:none;}
body{margin:0;user-select:none;font-size:16px;}
::-webkit-scrollbar{display:none;}
main{width:fit-content;height:fit-content;position:fixed;inset:0;bottom:70px;margin:auto;text-align:center;}

#clockDate{margin:.5em 0 -.3em 0;font-size:4.3em;font-family:'mi';}
#clockTime{font-size:10em;font-weight:bold;font-family:'mi';}

#customText{font-size:2em;margin-bottom:10px;white-space:nowrap;max-width:calc(100vw - 100px);overflow:hidden;text-overflow:ellipsis;}

.bottom{margin-top:20px;display:inline-block;width:300px;height:50px;position:relative;}
#brand{position:absolute;object-fit:contain;inset:0;width:100%;height:100%;transition:opacity .4s;}
#operations{position:absolute;object-fit:contain;inset:0;width:fit-content;margin:auto;display:flex;padding:5px 15px;border-radius:100px;backdrop-filter:blur(10px);opacity:0;transform:scaleY(.95);transition:opacity .4s,transform .4s;}
#operations>i{width:30px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5em;transition:width .4s,color .2s,transform .2s;}
#operations>i:hover{color:#1E9FFF;}
#operations>i:active{color:#1E9FFF;transform:scale(.96);}
.operating #brand{opacity:0;}
.operating #operations{opacity:1;transform:scale(1);}
.operating #operations>i{width:40px;}