:root,
[data-theme="dark"] {
    --bg-color: #202020;
    --nav-foot-bg-color: #303030;
    --content-text-color: #cccccc;
}


/* test theme */
[data-theme="light"] {
    --bg-color: black;
    --nav-foot-bg-color: rgb(106, 51, 234);
    --content-text-color: white;
}


* {
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

body {
    min-width: 900px;
    background-color: var(--bg-color);
    display: grid;
    min-height: 100vh;
    /* navbar, content and footer */
    grid-template-rows: auto 1fr auto;
}

#content {
    margin: 0 auto;
    width: 50%;
    min-width: 800px;
    color: var(--content-text-color);
}

.content_hr {
    color: grey;
    opacity: 0.2;
}

#footer {
    background-color: var(--nav-foot-bg-color);
    text-align: center;
    min-height: 100px;
    color: var(--content-text-color);
}