:root {
	--fs-100: 0.5rem;
	--fs-200: 0.75rem;
	--fs-300: 0.9rem;
	--fs-400: 1rem;
	--fs-425: 1.0625rem;
	--fs-450: 1.125rem;
	--fs-475: 1.1875rem;
	--fs-500: 1.25rem;
	--fs-550: 1.50rem;
	--fs-600: 1.75rem;
	--fs-650: 2rem;
	--fs-700: 2.25rem;
	--fs-750: 2.50rem;
	--fs-800: 3rem;
	--fs-850: 3.5rem;
	--fs-900: 4rem;
	--fs-1000: 5rem;
	--fs-1500: 10rem;




    --col-body-background: 49,25,15;                /* chocolatey-brown */
    --col-button-background-normal: 100,225,180;    /* teal-ish */
    --col-button-background-hl: 128,255,220;        /* bright teal-ish */

    /* --col-body-background: 191,222,235; */

    --col-body-background: 111,78,55;   /* coffee */
    --col-button-background-normal : 191,222,235; /* pale blue */
    --col-button-background-hl: 135,206,235;    /* sky blue */

    --col-body-background: 20,20,20;   /* coffee */
    --col-button-background-normal : 191,222,235; /* pale blue */
    --col-button-background-hl: 135,206,235;    /* sky blue */

    --col-highlight: 255,0,0;                       /* red */
    --col-box-background: 220,220,220;              /* light gray */
    --col-box-background: 244,241,233;              /* parchment */
    --col-legend-background: 255,250,250;
    --col-placeholder: 0,32,64;
}

* {
	box-sizing: border-box; /* box size includes border & padding */
    /* color: rgb(49, 25, 15); */
	/* padding: 0px; */
	/* border: 0px; */
	/* margin: 0px; */
	z-index: inherit;
	/* overflow: hidden; */
	/* cursor: default; */
	color: rgb(var(--col-base-text));
	user-select:none;
    position: relative;
}

a   {
    cursor: pointer;
}

html,body {
    overflow-y: initial;
    overflow-x: auto;
}

body {
    background-color: rgb(var(--col-body-background));
}

table {
    margin: 2rem auto 1rem;
}

table,tr,td {
    border: 1px solid gray;
    border-collapse: collapse;
}

th,td {
    padding: 0.25rem 1rem;
}

.centertext {
    text-align: center;
}

.hl {
    color: rgb(var(--col-highlight));
}

.errortext {
    color: red;
}


input {
    border: 1px solid black;
    padding: 0.1rem 0.25rem;
}

textarea {
    resize: none;
}

input, textarea {
    border-radius: 0.25rem;
}


.btn {
    padding: 0.25rem 0.5rem;
    font-weight: bold;
    color: black;
    background-color: rgb(var(--col-button-background-normal));
    border: 1px solid black;
    border-radius: 0.5rem;
    transition: all 0.5s ease-in-out;
    margin: 0.25rem 0.5rem;
}

.btn:hover {
    background-color: rgb(var(--col-button-background-hl));
    color: black;
    border-color: gray;
    cursor: pointer;
}

::placeholder {
    color: rgb(var(--col-placeholder));
    text-align: left;
    /* background-color: black; */
    /* font-weight: bold; */
}

.smallmar {
    margin: 0.5rem 1rem;
}

.medmar {
    margin: 0.75rem 1.5rem;
}

.smallpad {
    padding: 0.5rem 1rem;
}

.topmarsmall {
    margin-top: 2rem;
}

.smallmarleft {
    margin-left: 0.75rem;
}


.hide {
    display: none;
}

fieldset {
    width: fit-content;
    margin: 0px auto;
}

fieldset, legend, .content {
    background-color: rgb(var(--col-box-background));
    border-radius: 0.5rem;
    border: 0.1rem solid black;
}

legend {
    background-color: rgb(var(--col-legend-background));
    padding: 0.25rem 1rem;
    border: 0.1rem solid black;
}

.content {
    border: 1px solid gray;
}

.contenttext {
    max-width: 50ch;
    padding: 0.5rem 1rem;
}

.cent {
    margin: 0px auto;
}

.verflex {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.flexrow {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.requiredEntryRow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.entryRow {
    margin: 0.25rem 0.5rem;
}

body {
    padding-bottom: 10vh;
}