* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     user-select: none;
     font-family: Arial, Helvetica, sans-serif;
 }

 html {
     font-size: 16px;
 }

 body {
     width: 100vw;
     width: 100dvw;
     height: 100vh;
     height: 100dvh;
     display: flex;
     flex-direction: column;
     background: radial-gradient(ellipse at center, #3f3f3f 0%, #000000 90%);
     touch-action: none;
     overflow: hidden;
 }

 /* global classes */
 .hidden {
     transform: scale(0);
 }

 .locked {
     pointer-events: none;
 }

 .bottom {
     position: absolute;
     bottom: 1em;
 }

 .scroll::-webkit-scrollbar {
     width: 0.4rem;
 }

 .scroll::-webkit-scrollbar-track {
     background-color: rgba(255, 255, 255, 0.05);
 }

 .scroll::-webkit-scrollbar-thumb {
     background-color: rgba(255, 255, 255, 0.05);
     cursor: pointer;
 }

 :root {
     --opacity: 1;
 }

 .opacity .face {
     opacity: var(--opacity);
 }

 .overflow-auto {
     overflow: auto;
 }

 .max-h-5 {
     max-height: 5rem;
 }

 .min-w-2_65 {
     min-width: 2.65rem;
 }

 .w-fit {
     width: calc(100vw - 5.25em);
 }

 .fixed {
     position: fixed;
 }

 .top-1 {
     top: 1rem;
 }

 .left-0 {
     left: 0rem;
 }

 .m-0-1 {
     margin: 0 1em;
 }

 .items-center {
     align-items: center;
 }

 .column-container {
     flex-direction: column;
 }