:root {
            --text: rgb(0, 0, 0);
            --background-color: rgb(255, 255, 255);
            --background-btn: rgb(0, 0, 0);
            --background-btn-inverse: rgb(255, 255, 255);
        }


        @media(prefers-color-scheme: dark) {
            :root {
                --text: rgb(255, 255, 255);
                --background-color: rgb(0, 0, 0);
                --background-btn: rgb(255, 255, 255);
                --background-btn-inverse: rgb(0, 0, 0);
            }
        }

        [data-theme='dark'] {
            --text: rgb(255, 255, 255);
            --background-color: rgb(0, 0, 0);
            --background-btn: rgb(255, 255, 255);
            --background-btn-inverse: rgb(0, 0, 0);
        }

        [data-theme='light'] {
            --text: rgb(0, 0, 0);
            --background-color: rgb(255, 255, 255);
            --background-btn: rgb(0, 0, 0);
            --background-btn-inverse: rgb(255, 255, 255);
        }


        .home-btn,
        button[name="home"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 30px;
            width: 20px;
            padding: 0 16px;
            background: var(--background-btn);
            border: none;
            border-radius: 100px;
            cursor: pointer;
            overflow: hidden;
            transition: width .15s linear, border-radius .15s linear, background-color .15s linear, padding .15s linear;
        }


        .home-btn.circle,
        button[name="home"].circle {
            height: 30px;
            width: 20px;
            background: var(--background-btn-inverse);
            border-radius: 100px;
            transform: scale(0.5, 0.5);
        }

        .toggle-mode {
            display: inline-flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-end;
            margin-left: auto;
            margin-right: 4rem;
            min-width: 40px;
            height: auto;
            background: var(--background-color);
            transition: background-color 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .toggle-mode span {
            font-size: 1.8rem;
            /*the toggle-icon is interpreted as text (Unicode)*/
            color: var(--text);
            transition: color 0.3s ease;


        }