:root {
    color-scheme: light;
    --line-length: 95vw;
    --control-fg: #374d37;
    --control-bg: #c3d7b5;
    --graphical-fg: #203509;
    --accent-color: #4b626b;
    --hightlight-color: #3ac340;
    --border-color: rgba(36, 30, 30, 0.219);
    --bg: linear-gradient(177deg, rgb(245 247 255 / 28%) 0%, rgba(101, 143, 87, 0.493) 100%), url(scrapbook/grunge_green_2.webp);
    --fg: #101a10;
    --box-bg: rgb(219 229 201 / 64%);
    --3d-highlight: rgb(219 229 201);
    --3d-shadow: rgb(202 211 186);
    --hover-color: rgb(184 213 165);
    --alt-control-bg: color-mix(in srgb, var(--control-bg) 65%, #9da47c);
}

::selection {
    background: rgba(119, 88, 206, 0.431);
    color: rgb(70, 45, 19);
}

::-moz-selection {
    background: rgba(0, 0, 250, 0.25);
}


/************************HTML ELEMENTS***********************************/


dl {
    padding: 2px;
    margin: 2px;
}

dt {
    margin: 0.2em;
}

table {
    background-color: rgba(240, 248, 255, 0.116);
}

tr.header {
    font-weight: bold;
}

th {
    background-color: #0000001a;
}



/*This handles the old style "section box", 
but also top level HTML section elements. 
It's basically for independent sections of content.*/

.window {
    background: var(--box-bg);
    box-shadow: rgb(60 59 73 / 56%) 5px 5px 12px -3px;
}


.card {
    box-shadow: 2px 2px 8px -3px rgba(43, 39, 85, 0.4)
}

.round-feathered {
    opacity: 0.7;
}


h2,
h3 {
    text-shadow: 2px 2px 7px rgba(217, 217, 217, 0.49);
}

a {
    text-shadow: 0 0 1px rgb(215 237 255);
    text-decoration: none;
}

h1 a,
h2 a {
    text-shadow: none;
}

button:disabled {
    background-color: #a0a0a0;
    color: rgb(218, 218, 218);
    opacity: 0.7;
    border-radius: 7px;
}

input:disabled {
    background-color: #D0D0D0;
}



[popover]{
    --box-bg: rgb(200 223 188);
}