@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular') , local('OpenSans-Regular') , url('../fonts/opensans_regular.woff2') format('woff2') , url('../fonts/opensans_regular.woff') format('woff');
	font-display: swap;
}

* {
	box-sizing: border-box;
}

body {
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
    background-color: #faefda;
}

h1 {
	font-size: 1.375em;
}

h2, h3 {
	font-size: 1.125em;
}

.row a:link, a:visited {
	background-color: transparent;
	color: #1e76be;
    text-decoration: none;
    line-height: 1.9em;
}

.row a:hover, .row a:active, .row a:focus {
	text-decoration: underline;
}

main {
	display: block;
	width: 65%;
    margin: auto;
    border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
}

.centertxt {
	text-align: center;
}

.graytext {
    color: #808080;
    background: transparent;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rpad {
	padding-right: 1.875em;
}

.fpad {
	padding: 1.875em;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
    border: 1px dashed #ddd;
}

.fsize20 {
	font-size: 1.25em;
}

.header {
	padding-top: 0.3125em;
	text-align: center;
	background-color: #595959;
	color: white;
}

.navbar {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #595959;
    font-size: 1.375em;
}

.navbar a {
	color: white;
	padding: 0.875em 1.25em;
	text-decoration: none;
	text-align: center;
}

.navbar a:hover, .navbar a:focus {
	background-color: #3d3d3d;
	color: white;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.side {
	flex: 1;
	background-color: white;
	padding: 1.25em;
}

.main {
	flex: 3;
	background-color: white;
	padding: 1.25em;
}

.himg {
	background-color: white;
    border: 1px solid #e0e0e0;
    max-width: 24em;
    margin: auto;
    padding: 1em;
}

.himg h4 {
	background-color: #e0e0e0;
	color: black;
	padding: 1em;
    margin-left: -1em;
    margin-right: -1em;
    margin-top: -1em;
    margin-bottom: 0.5em;

}

.himg p, .himg p.strong {
	padding: 1em;
	margin: 0;
}

.footernav {
	display: flex;
	flex-wrap: wrap;
	background-color: #595959;
	color: white;
	justify-content: center;
	align-items: center;
}

.footernav > div {
	padding: 0.625em;
	text-align: left;
	line-height: 2.5em;
	width: 12em;
	height: 13.25em;
}

.footer {
	padding: 0.625em;
	text-align: center;
	background-color: #595959;
	color: white;
}

.flink, .flink:visited {
	line-height: 2.5em;
	color: white;
	text-decoration: none;
}

.flink:hover, .flink:active, .flink:focus {
	color: white;
	text-decoration: underline;
}

input[type=text],input[type=date], select {
	font-size: 1.125em;
	width: 100%;
	background-color: white;
	color: black;
	padding: 0.75em 1em;
	margin: 0.5em 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

input[type=text]:focus, input[type=date]:focus, select:focus {
    background-color: #faefda;
}

input[type=submit], button[type=submit] {
	width: 100%;
	background-color: white;
	border: 2px solid #3d3d3d;
	color: #3d3d3d;
	padding: 1em 2em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.125em;
	margin: 0.25em 0.125em;
	transition-duration: 0.4s;
	cursor: pointer;
}

input[type=submit]:hover, input[type=submit]:focus, button[type=submit]:hover, button[type=submit]:focus {
	background-color: #3d3d3d;
	color: white;
}

label,input[type=checkbox]:checked,input[type=checkbox]:not(:checked),input[type=radio]{cursor:pointer;}

#gtop {
	display: none;
	position: fixed;
	bottom: 1.25em;
	right: 1.25em;
	z-index: 99;
	font-size: 1.125em;
	font-weight: bold;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 0.9375em;
	border-radius: 0.25em;
}

#gtop:hover {
	background-color: #3d3d3d;
}

@media screen and (max-width: 120em) {
	main {
        width:100%;
        border: none;
    }
}

@media screen and (max-width: 50em) {
	.row, .footernav {
		flex-direction: column;
    }
    .main, .side {
        padding: 0.5em;
    }
    .row a:link, a:visited {
        line-height: 2.5em;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: lightgray;
        color: black;
    }
}

@media (prefers-color-scheme: dark) {
    ::-webkit-calendar-picker-indicator { background-color: #fbfbfe;}

    body, .side, .main, .rside, .himg, .footer, .footernav {
        background-color: #1c1b22;
        color: #fbfbfe;
    }

    .header, .navbar {
        background-color: #1c1b22;
        color: #fbfbfe;
    }

    .navbar a:visited {
        background-color: #3d3d3d;
        color: #fbfbfe;
    }

    details > div {
        background-color: transparent;
        color: white;
    }
    details > summary {
        background-color: #1c1b22;
        color: #fbfbfe;
        border: 1px solid #48484d;
    }

    details > summary:hover, details > summary:focus {
        background-color: #1c1b22;
        color: #00ddff;
    }

    details > summary::before {
        border: solid 2px white;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    h1, h2, h3, h4, h5 {
        background-color: transparent;
        color: white;
    }

    .himg {
        border: 1px solid #48484d;
    }

    .himg h4 {
        background-color: #252429;
        color: white;
    }

    .row a:link, a:visited {
        background-color: transparent;
        color: #00ddff;
    }

    main {
        border: 0;
    }

    .footernav, .footer {
        background-color: #1c1b22;
        color: #fbfbfe;
    }

    input[type=text],input[type=date], select {
        background-color: #252429;
        color: white;
        border: 1px solid #48484d;
    }

    input[type=text]:focus, input[type=date]:focus, select:focus {
        background-color: #252429;
        color: white;
    }

    input[type=submit], button[type=submit] {
        background-color: #1e76be;
        border: 1px solid #373737;
        color: white;
    }

    input[type=submit]:hover, input[type=submit]:focus, button[type=submit]:hover, button[type=submit]:focus {
        background-color: #1e76be;
        border: 1px solid white;
        color: white;
    }

    .slider {
        background-color: #48484d;
    }

    input:focus + .slider {
        box-shadow: 0 0 2px #48484d;
    }
}