// epr.net styles

@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
    .container {
        display: block;
    }
}

html {
    font-size: 16px;
}

body {
    background-color: #222;
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    color: #aaa;
    line-height: 1.2rem;
    margin: 0 auto !important;
    float: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    max-width: 42rem;
}

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

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

#hero-image img {
    transition: 1s;
    border-radius: 10px;
    margin-bottom: 25px;
    filter: contrast(150%)  grayscale(100%) opacity(70%);
}

#hero-image img:hover {
    transition: 0.3s;
    filter: none;
}

#container {
    margin-top: 30px;
    padding: 0 30px;
}

h1 {
    color: #eee;
    font-style: normal;
	font-weight: 400;
	font-size: 1.8rem;
    line-height: .9rem;
    margin-bottom: 10px;
    padding-top: 5px;
}	

h2 {
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1.5rem;
	font-weight: 400;
	font-style: italic;
    margin-top: 10px;
    padding-bottom: 5px;
}

h3 {
	color: #ccc;
	font-size: 1.2em;
	font-weight: 700;
    line-height: 1.7rem;
    text-transform: uppercase;
}

h4 {
	font-size: 1rem;
	font-weight: 400;
    color: #ccc;
}

h5 {
	font-size: 1rem;
	font-weight: 400;
    color: #ccc;
}


p, li {
    font-size: .90rem;
    font-weight: normal;
    line-height: 1.4rem;
    color: #aaa;
}

ul {
    font-size: .9rem;
    font-weight: 300;
}

li {
    padding-bottom: .7rem;
    list-style: none;
}

pre {
    font-size: .75rem;
    color: #8A8D8F;
    text-align: center;
    text-shadow: none;
    opacity: 80%;
}

pre.ascii {
    line-height: 1;
}

hr {
    clear: both;
    height: 1px;
    border: none;
    border-top: 1px solid #888;
    opacity: 15%; 
}

hr.cv {
    border-top: 1px solid;
    opacity: 15%;
    margin-top: -18px;
}

hr.short {
    width: 95%;
    border-top: 1px solid;
    opacity: 15%;
}

a, a:visited {
    transition: color 0.3s;
    color: #aaa;
    cursor: pointer;
    text-decoration: none;
    padding-bottom: .1rem;
    border-bottom: 1px solid rgba(238, 238, 238, 0.2);
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

.external:after {
    content: ' \2197';
    font-size: .8rem;
    font-family: -apple-system, BlinkMacSystemFont, inter, ibm plex sans, Segoe UI, Helvetica, Arial, sans-serif;
}

.verify:after {
    content: ' \2713';
    font-size: .8rem;
    font-family: -apple-system, BlinkMacSystemFont, inter, ibm plex sans, Segoe UI, Helvetica, Arial, sans-serif;
}

h1 a, h1 a:visited {
    color: #eee;
    transition: none;
    text-decoration: none;
    border: none;
		}	

textarea {
    width: 100%;
    height: 200px;
}

ul.links {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.links li {
    display: inline;
}

ul.links li a {
    color: #ccc;
}

ul.links li a:hover, ul.links li a:focus {
    color: #888;
}


ul.links li:not(:last-child)::after {
    content: ' | ';
    padding: 0 5px;
}

ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

ul.nav li {
    display: inline;
}

ul.nav li a {
    border: none;
}

ul.nav li a:hover, ul.nav li a:focus {
    border: none;
}

blockquote {
    padding: 10px;
    margin: 10px auto;
    width: 80%;
    font-style: italic;
    color: #888;
    display: block;
    text-align: center;
    font-size: .9rem;
}

blockquote cite:before {
    content: " — ";

}

cite:before {
    content: " · ";
}

cite.header:before {
    content: "";
}

cite {
    display: inline;
    font-style: italic;
    text-align: left;
    color: #888;
    font-size: .85rem;
}

cite a {
    color: #888;
}

#container img {
    max-width: 100%;
    max-height: 100%;
}

span.caption {
    display: block;
    font-size: .8rem;
    color: #888;
    text-align: center;
    text-shadow: none;
    opacity: 100%;
}

.object-cover {
    object-fit: cover;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

ul.nav {
    padding-bottom: 10px;
}

ul.nav li {
    padding: 0 0 0 5px;
}

.color-square {
    display: inline-block;
    /* width: 16px;
    height: 16px; */
    margin-left: 5px;
    border: 1px solid #222;
    vertical-align: middle;
}

.color-nav {
    transition: background-color 0.3s;
    display: inline-block;
    /* width: 15px;
    height: 18px; */
    margin: 0;
    border: 0 none;
    vertical-align: middle;
    border-radius: 3px;
    opacity: 80%;
    padding: 0 5px;
    color: #fff;
}

.color-nav.reverence:hover, .color-nav.reverence:focus {
    background-color: #6a5acd;
    opacity: 100%;
}

.color-nav.connection:hover, .color-nav.connection:focus {
    background-color: #00CED2;
    opacity: 100%;
}

.color-nav.hurt:hover, .color-nav.hurt:focus {
    background-color: #DC143C;
    opacity: 100%;
}

.color-nav.awe:hover,.color-nav.awe:focus {
    background-color: #FFa500;
    opacity: 100%;
}

.color-nav.curiosity:hover, .color-nav.curiosity:focus {
    background-color: #FFDA03;
    opacity: 100%;
}

.color-nav.sadness:hover, .color-nav.sadness:focus {
    background-color: #1E90FF;
    opacity: 100%;
}

.color-nav.flow:hover, .color-nav.flow:focus {
    background-color: #48D1CC;
    opacity: 100%;
}

.color-nav.empathy:hover, .color-nav.empathy:focus {
    background-color: #AFEEEE;
    opacity: 100%;
}

/* azure styles (#1E90FF) */

.azure a:hover, .azure a:focus, .azure a:active {
    text-decoration: none;
    color: #1E90FF; /* Azure on hover */
}

.azure ul.links li a:hover, .azure ul.links li a:focus {
    color: #1E90FF;
}

.azure h3 span.highlight {
    color: #1E90FF !important;
}

.azure .color-nav.sadness {
    background-color: #1E90FF;
    opacity: 100%;
}

/* sunflower-yellow styles (#FFDA03) */

.sunflower-yellow a:hover, .sunflower-yellow a:focus, .sunflower-yellow a:active {
    text-decoration: none;
    color: #FFDA03; /* Sunflower Yellow on hover */
}

.sunflower-yellow ul.links li a:hover, .sunflower-yellow ul.links li a:focus {
    color: #FFDA03;
}

.sunflower-yellow h3 span.highlight {
    color: #FFDA03 !important;
}

.sunflower-yellow .color-nav.curiosity {
    background-color: #FFDA03;
    opacity: 100%;
}

/* orange styles (#FFa500) */

.orange a:hover, .orange a:focus, .orange a:active {
    text-decoration: none;
    color: #FFa500; /* Orange on hover */
}

.orange ul.links li a:hover, .orange ul.links li a:focus {
    color: #FFa500;
}

.orange h3 span.highlight {
    color: #FFa500 !important;
}

.orange .color-nav.awe {
    background-color: #FFa500;
    opacity: 100%;
}

/* crimson styles (#DC143C) */

.crimson a:hover, .crimson a:focus, .crimson a:active {
    text-decoration: none;
    color: #DC143C; /* Crimson on hover */
}

.crimson ul.links li a:hover, .crimson ul.links li a:focus {
    color: #DC143C;
}

.crimson h3 span.highlight {
    color: #DC143C !important;
}

.crimson .color-nav.hurt {
    background-color: #DC143C;
    opacity: 100%;
}

/* dark-turqoise styles (#00CED2) */

.dark-turqoise a:hover, .dark-turqoise a:focus, .dark-turqoise a:active {
    text-decoration: none;
    color: #00CED2; /* Dark Turkoise on hover */
}

.dark-turqoise ul.links li a:hover, .dark-turqoise ul.links li a:focus {
    color: #00CED2;
}

.dark-turqoise h3 span.highlight {
    color: #00CED2 !important;
}

.dark-turqoise .color-nav.connection {
    background-color: #00CED2;
    opacity: 100%;
}

/* orange-red styles (#FF4500) */

.orange-red a:hover, .orange-red a:focus, .orange-red a:active {
    text-decoration: none;
    color: #FF4500; /* Orange Red on hover */
}

.orange-red ul.links li a:hover, .orange-red ul.links li a:focus {
    color: #FF4500;
}

.orange-red h3 span.highlight {
    color: #FF4500 !important;
}

.orange-red .color-nav.excitement {
    background-color: #FF4500;
    opacity: 100%;
}

/* slate-blue styles (#6a5acd) */

.slate-blue a:hover, .slate-blue a:focus, .slate-blue a:active {
    text-decoration: none;
    color: #6a5acd; /* Slate Blue on hover */
}

.slate-blue ul.links li a:hover, .slate-blue ul.links li a:focus {
    color: #6a5acd;
}

.slate-blue h3 span.highlight {
    color: #6a5acd !important;
}

.slate-blue .color-nav.reverence {
    background-color: #6a5acd;
    opacity: 100%;
}


/* med-turquoise styles (#48D1CC) */

.med-turquoise a:hover, .med-turquoise a:focus, .med-turquoise a:active {
    text-decoration: none;
    color: #48D1CC; /* Med Turquoise on hover */
}

.med-turquoise ul.links li a:hover, .med-turquoise ul.links li a:focus {
    color: #48D1CC;
}

.med-turquoise h3 span.highlight {
    color: #48D1CC !important;
}

.med-turquoise .color-nav.flow {
    background-color: #48D1CC;
    opacity: 100%;
}


/* pale-blue styles (#AFEEEE) */

.pale-blue a:hover, .pale-blue a:focus, .pale-blue a:active {
    text-decoration: none;
    color: #AFEEEE; /* Pale Blue on hover */
}

.pale-blue ul.links li a:hover, .pale-blue ul.links li a:focus {
    color: #AFEEEE;
}

.pale-blue h3 span.highlight {
    color: #AFEEEE !important;
}

.pale-blue .color-nav.empathy {
    background-color: #AFEEEE;
    opacity: 100%;
}


@media (max-width: 500px) {
    ul.links {
        list-style: none;
        padding: none;
    }

    ul.links li {
        display: block;
        margin-bottom: 5px;
    }

    ul.links li:not(:last-child)::after {
        content: ' ';
    }

    ul.links li::before {
        content: ' \2022 ';
        padding-right: .4rem;
    }
}

.footer {
    font-size: .75rem;
    padding-bottom: 20px;
}