/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style:none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face {
    font-family: 'CallunaRegular';
    src: url('fonts/Calluna2-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'CallunaRegular';
    src: url('fonts/Calluna2-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-variant:small-caps;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'CallunaSansRegular';
    src: url('fonts/CallunaSansRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
 font-size:1.125rem;
  background-color: var(--bgcolor);/* #033;/*#3f6999;*/
/* margin: .5em 0.8em;*/
}
/* body {} */
#content {
    font-family: CallunaRegular, Georgia, serif;
    color: #fff;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0.5em 1em 1em;
 /*   background-color:/*rgba(98,156,188,0); rgba(255,255,255,.4);*/
    min-width:200px;
	   position:relative;
}
#top {
    font-family:CallunaSansRegular, sans-serif;
    font-size: 90%;
    position:fixed;
    right:.4em;
    top:0;
    background-color:#fff;
    color:#000;
}

p {
	margin-bottom: 0.8em;
	}
ul {  line-height: 110%; font-size: 0.8em}

h1 {
	font-size: 1.33em;
	color: #F7D175;/*ffffcc;*/
	margin-bottom: 0.1em;
}
.hph1::before {
 content:"Keith Holmes";
}
h2 {
	font-size: 1.2em;
	color: #F7D175;/*ffffcc;*/
	margin-bottom: 0.2em;
 font-variant:small-caps;
}

h3 {
	font-size: 1.25em;
	color: #FFCC00;
}
h4 {
	font-size: 1em;
	font-weight: bold;
}
.smallcaps {font-variant:small-caps}
.sans {font-family:CallunaSansRegular}

blockquote {margin:0.8em;}

.self-photo {
display:block;
 margin:0 auto;
 width:100%;
 max-width:420px;
 margin-bottom:.5em;
 border-radius: 3px;
}
.buddha,
.buddha2
 {
 display:block;
 width:100%;
 margin: 0 auto .5em;
 border-radius:.2em;
 }
.buddha2 {display:none}

.standout {
	font-size: 1.1em;
	color: #FFCC00;
	font-weight: bold;
}
a:link {
	text-decoration: none;
	color: #F0F0F0;
 font-variant:small-caps;
}
a:visited {
	text-decoration: none;
	color: #F0F0F0;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #f0f0f0;
	text-decoration: underline;
}

.quote {
font-size: 90%;
padding-bottom:.5em;
border-bottom: 0.1em solid #F7D175;

}
.links /* for the div on the home page */
{
 font-size:90%;
 }
.links p {
 margin-bottom:.4em;
}

.indent {
	margin-left: 1em;

}
.dblindent {
	margin-left: 2em;
}
.caption {
	font-size: 0.8em;
	line-height: 120%;
	font-style: oblique;
}


/* about 400px */
@media (min-width:24em) {
    .hph1::before {
     content:"Personal Site of Keith Holmes";
    }
}
@media (min-width:460px) {
 .self-photo {
	margin:.5em 0 .5em .5em;
 	width:40%;
	float:right;
	}

}

@media only screen and (min-width:550px) {
	body {
  margin-top:.8em;
 }
 #content {
  font-size:calc(1rem + .2vw);
   width:80%;
   max-width:30rem;
   line-height:1.6;
 }
 .buddha{display:none}
 .buddha2{display:block}
 .links {margin-left:.5em}
}
@media only screen and (min-width:960px) {
    #content {
     max-width: 33rem;
     }
}