:root {
    color-scheme: light dark;
    transition-property: color-scheme;
    -webkit-transition: .4s;
    transition: .4s;
}

body {
    font-family: monospace;
    font-size: 1rem;
}

.component-list>li {
    cursor: pointer;
}

#component-mount {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

.table {
    p {
        text-align: center;
        margin: 0 0 5px 0;
        font-size: 1.25rem;
    }

    table {
        margin: 0 auto;
        border-spacing: 0;
        border-radius: 4px;
        border: 1px solid light-dark(black, white);

        th {
            padding: 5px;
            text-align: center;
            border: 1px solid light-dark(black, white);
            background-color: light-dark(#D3D3D3, #1C1B22);
        }

        tbody>tr:nth-child(even) {
            background-color: light-dark(#EBEBEB, #444444);
            color: light-dark(black, white);
        }

        tbody>tr:hover {
            background-color: light-dark(#D3D3D3, #999999);
        }

        tbody>tr>td:first-child {
            border-left: 1px solid light-dark(black, white);
        }
        
        tbody>tr>td:last-child {
            border-right: 1px solid light-dark(black, white);
        }

        td {
            padding: 5px 10px;
            text-align: center;
            border-top: 1px solid light-dark(black, white);
            border-bottom: 1px solid light-dark(black, white);
        }
    }
}

.toggle {
    --background-colour: #282A3A;
    --text-colour: #C69749;
    --checked-background: #141623;

    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;

    input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 34px;
        background-color: var(--background-colour);
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        border-radius: 50%;
        background-color: var(--text-colour);
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: var(--checked-background);
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
}

.day-night-toggle {
    --background-colour: #282A3A;
    --text-colour: #FFFFFF;
    --checked-background: #1E88E5;
    --checked-colour: #C69749;

    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;

    input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 34px;
        background-color: var(--background-colour);
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        border-radius: 50%;
        background-color: var(--text-colour);
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: var(--checked-background);
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
        background-color: var(--checked-colour);
    }
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 20px;
    }
}