:root {
            --chrome-os-screen-padding-size: 3%;
            --chrome-os-screen-margin-size: 15px;
            --chrome-os-font-size: 14px
        }

        .chrome-os {
            font-family: Roboto, sans-serif;
            font-size: var(--chrome-os-font-size);
            line-height: 1.6;
            background-color: rgb(31 31 31) !important;
            color: #fff;
            text-align: start;
            font-weight: 400
        }

        .chrome-os:fullscreen {
            --chrome-os-font-size: 22px;
            --chrome-os-screen-padding-size: 10%;
            --chrome-os-screen-margin-size: 40px;
            font-size: var(--chrome-os-font-size)
        }

        @media screen and (max-width: 1024px) {
            .chrome-os {
                --chrome-os-font-size: 12px;
                line-height: 1.4
            }

            .chrome-os:fullscreen {
                --chrome-os-font-size: 18px
            }

            .chrome-os-main-section {
                max-width: 80%
            }
        }

        .chrome-os-main-section {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            border-top: 1px solid gray;
            border-bottom: 1px solid gray;
            padding: var(--chrome-os-screen-padding-size)
        }

        .chrome-os-main-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: var(--chrome-os-screen-margin-size)
        }

        .chrome-os-bottom-text {
            position: absolute;
            bottom: max(15px, 10%);
            left: 50%;
            transform: translate(-50%, 0);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .corner-label {
            position: absolute;
            top: calc(-2 * var(--chrome-os-font-size));
            left: 0;
            display: flex;
            align-items: center;
            gap: 5px
        }

        .chrome-os-logo {
            height: calc(1.5 * var(--chrome-os-font-size))
        }
    
        :root {
            --spinner-background-color: #0000;
            --spinner-main-color: #fff;
            --spinner-gray: #808080;
            --number-of-sectors: 12;
            --spinner-with: 9.5px
        }

        .spinner-container {
            position: relative;
            width: 56px;
            height: 56px;
            aspect-ratio: 1
        }

        .spinner {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            padding: 1.4px
        }

        .spinner::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: var(--spinner-gray);
            -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 24deg 30deg), radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-with)), #000 calc(100% - var(--spinner-with)));
            -webkit-mask-composite: destination-in;
            mask-composite: intersect
        }

        .spinner::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            padding: 1.4px;
            background: conic-gradient(#0000 58.35%, #fff, #e0e0e0) content-box;
            -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 24deg 30deg), radial-gradient(farthest-side, #0000 calc(100% - var(--spinner-with)), #000 calc(100% - var(--spinner-with)));
            -webkit-mask-composite: destination-in;
            mask-composite: intersect;
            animation: spin 1.2s infinite steps(12)
        }

        @keyframes spin {
            to {
                transform: rotate(1turn)
            }
        }