:root {
	--standard-corner: .5em;
	--icon-corner: .3em;
	--border-width: 1px;
	--font-size: 12pt;
}


/* Light mode */
@media (prefers-color-scheme: light) {
:root {
	--background: rgb(58, 78, 86);
	--primary-dark: rgb(113, 142, 157);
	--primary: rgb(236, 240, 242);
	--primary-hover: rgb(226, 232, 235);
	--primary-light: rgb(247, 248, 249);
	--secondary-dark: #0d47a1;
	--secondary: #2196f3;
	--secondary-hover: rgb(12, 126, 220);
	--secondary-light: rgb(109, 186, 248);
	--third-dark: rgb(85, 114, 31);
	--third: #9aca40;
	--third-hover: rgb(131, 175, 48);
	--third-light: rgb(186, 219, 125);
	--text-color: black;
	--text-light: white;
	--text-dark: black;
}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {

:root {
	--background: rgb(58, 78, 86);
	--primary-dark: rgb(113, 142, 157);
	--primary: rgb(236, 240, 242);
	--primary-hover: rgb(226, 232, 235);
	--primary-light: rgb(247, 248, 249);
	--secondary-dark: #0d47a1;
	--secondary: #2196f3;
	--secondary-hover: rgb(12, 126, 220);
	--secondary-light: rgb(109, 186, 248);
	--third-dark: rgb(85, 114, 31);
	--third: #9aca40;
	--third-hover: rgb(131, 175, 48);
	--third-light: rgb(186, 219, 125);
	--text-color: black;
	--text-light: white;
	--text-dark: black;
}

}

.gradient {
        /* full screen gradient. */
        background: rgb(0,0,10);
		background-image: linear-gradient(180deg, rgba(0,0,10,1) 0%, rgba(7,7,27,1) 99%, rgba(0,100,100,1) 100%);
	    background-position: center 0;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-size: cover;
	    -webkit-background-size: cover;
	    -o-background-size: cover;
	    -moz-background-size: cover;
    	-ms-background-size: cover;
}


body {
	font-size: var(--font-size);
	/* font-family: Candara,Sans-serif; */
	background: var(--background);
	padding: 0;
	margin: 0;
}

p {
	margin-top: 0em;
	margin-bottom: 1em;
}

hr {
    border: 0;
    height: var(--border-width);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

h1 {
	font-weight: bold;
	font-size: 1.8em;
	margin-top: .3em;
	margin-bottom: .4em;
}

h2 {
	font-weight: bold;
	font-size: 1.6em;
	margin-top: .3em;
	margin-bottom: .3em;
}

h3 {
	font-weight: bold;
	font-size: 1.4em;
	margin-top: .3em;
	margin-bottom: .2em;
}

h4 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: .3em;
	margin-bottom: .1em;
}

h5 {
	font-weight: bold;
	font-size: 1.0em;
	margin-top: .3em;
	margin-bottom: 0;
}

h6 {
	font-weight: bold;
	font-size: 0.8em;
	margin-top: .3em;
	margin-bottom: 0;
}

.header {
	background: var(--primary-light);
	margin: 0;
	border-bottom: var(--border-width) solid var(--primary-dark);
	padding: .2em;
}

.content {
	border: var(--border-width) solid var(--primary-dark);
	border-radius: var(--standard-corner);
	margin-top: .2em;
	margin-bottom: .2em;
	margin-left: .3em;
	margin-right: .3em;
	padding: .5em;
	background: var(--primary);
}

.big-font {
	font-size: 1.6em;
}

.caps {
	 text-transform: uppercase;
}

.center {
    text-align: center;
}

.button {
	font-size: 1.25em;
	display: inline-block;
	margin-left: 1%;
	width: 98%;
	height: 1.8em;
	line-height: 1.5;
	text-align: center;
	border-radius: var(--standard-corner);
	background: var(--secondary);
	border: var(--border-width) solid var(--secondary-dark);
	color: var(--text-color);
	cursor: pointer;
}

.button.small {
	display: inline;
	margin-left: .2em;
	margin-right: .2em;
	padding-left: .3em;
	padding-right: .3em;
	padding-top: .1em;
	padding-bottom: .1em;
	font-size: .95em;
	line-height: .8em;
}

.button.left {
	display: inline;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 0;
}
.button.center {
	display: inline;
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
	border-left: none;
}
.button.right {
	display: inline;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: 0;
	border-left: none;
}

.button.outline {
	background: none;
}

.button.outline:hover {
	background: var(--primary-hover);
}

.button:hover {
	background: var(--secondary-hover);
}

.default {
	font-weight: bold;
	border-color: var(--third-dark);
	background: var(--third);
	color: var(--text-dark);
}

.default:hover {
	background: var(--third-hover);
}

.disabled {
	background: var(--primary);
	border-color: var(--primary-dark);
	color: var(--primary-dark);
	cursor: not-allowed;
}

.disabled:hover {
	background: var(--primary);
}

.icon {
	display: inline-block;
	background: var(--primary-hover);
	border-radius: var(--icon-corner);
	border: var(--border-width) solid var(--text-dark);
	font-weight: bold;
	text-align: center;
	padding-left: .1em;
	padding-right: .1em;
	width: 1.4em;
}

.icon.active {
	cursor: pointer;
	background: var(--secondary);
}

.icon.active:hover {
	cursor: pointer;
	background: var(--secondary-hover);
}

.shadow {
	-webkit-box-shadow: 7px 7px 19px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    7px 7px 19px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         7px 7px 19px 0px rgba(50, 50, 50, 0.75);
}

.form {
	background: var(--primary-light);
 	color: var(--text-dark);
	padding: .3em;
	padding-top: .6em;
	padding-bottom: .6em;
	margin: 1em;
}

.form label {
	display: block;
	 text-transform: uppercase;
	font-size: .8em;
	margin-top: .5em;
	margin-bottom: 0em;
	color: var(--primary-dark);
}

.form input {
	font-size: 1.1em;
	display: block;
	width: 100%;
	 border-style: none; 
    border-color: Transparent; 
	background: none;
    overflow: auto;
	border-bottom: var(--border-width) solid var(--background);        
	padding: .2em;
}

.form input:hover {
	background: white;
}

.form input::placeholder {
	font-size: .6em;
	color: var(--primary-dark); 
	font-weight: plain;
	text-transform: uppercase;
}

.form textarea {
	font-size: 1.2em;
	font-family: Candara,Sans Serif;
	display: block;
	width: 100%;
	background: none;
	color: var(--text-dark);
	 border-style: none; 
    border-color: Transparent; 
    overflow: auto;
	padding: .2em;
	border-bottom: var(--border-width) solid var(--background);
	resize: vertical; /* user can resize vertically, but width is fixed */  
}

.form textarea:hover {
	background: white;
}

.form textarea::placeholder {
	font-size: .6em;
	color: var(--primary-dark); 
	font-weight: plain;
	text-transform: uppercase;
}

.win11 {
	border-radius: var(--standard-corner);
}

.thumbnail {
    height: 1.3em;
    vertical-align: middle;
    margin-left: .2em;
    margin-right: .2em;
}