* {
    --fg-clr: #333333;
    --bg-clr: #cccccc;
    --default-fs: 1.25rem; /*20pt*/
}
/*
button{
    background-color: inherit;
    color: inherit;
}
*/
@media(prefers-color-scheme: dark){
    *, button {
        --fg-clr: #cccccc;
        --bg-clr: #333333;
    }
}

body {
    padding: 12px;
    background-color: var(--bg-clr);
    color: var(--fg-clr);
    font-size: var(--default-fs);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#main {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#columns {
    display: flex;
    flex-direction: row;
}

#columns>* {
    display: none;
    flex-direction: column;
}

#columns>.active {
    display: flex;
    flex-direction: column;
}

#tabs>.active {
    font-weight: 900;
}

/*768px*/
@media(min-width: 450px) {
    #columns>* {
        display: flex;
        width: 50%;
    }

    #tabs {
        display: none;
    }
}

#save-btn{
    width: 100%;
}

input[type="checkbox"]{
    transform: scale(1.4);
    transform-origin: bottom right;
}