@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'OpenSans';
    src: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2FOpenSans-Light.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2FOpenSans-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2FOpenSans-SemiBold.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2FOswald-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}

A:hover {
  		color:#990000;
		text-decoration: none;
}

A:visited {
		color:#0071bc;
		text-decoration: none;
}

A:link {
		color:#0071bc;
		text-decoration: none;
}

A:active {
		color:#990099;
		text-decoration: none;
}

a img {border: none; }

.text {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 14pt;
		font-style: normal;
		font-weight: normal;
		color: #000000
		}

.textbold {
	font-family:"OpenSans",Helvetica ,Arial,sans-serif;
	font-size: 14pt;
		font-style: normal;
		font-weight: bold;
		color: #000000
		}

.textpageheader {
	/* font-family:"OpenSans",Helvetica ,Arial,sans-serif;
	font-size: 22pt;
	font-style: normal;
	color:#000000;
	font-weight: bold; */
	font-family:"OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#000000;
	font-size: 22pt;
	font-weight:700;
		}

.textsmall {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 12pt;
		font-style: normal;
		font-weight: normal;
		color: #000000
		}
.textvsmall {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 12pt;
		font-style: normal;
		font-weight: normal;
		color: #000000
		}
.textsectionheader1 {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 12pt;
		font-style: normal;
		font-weight: bold;
		color: #000000
		}

.textsectionheader2 {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 14pt;
		font-style: normal;
		font-weight: bold;
		color:#A31F34;
		}

.textsectionheader3 {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 14pt;
		font-style: normal;
		font-weight: bold;
		color:#666666;
		}

.textsectionheader3grey {
	font-family:"OpenSans",Helvetica ,Arial,sans-serif;
	font-size: 16pt;
	font-style: normal;
	font-weight: bold;
	color:#666666;
	}

	.homenav {
  		font-size: 13pt;
  		font-weight: bold;
  		font-family: trebuchet ms, verdana, sans-serif;
  		color: #0071bc;
		text-decoration: none;
	}


	.pagenav {
  		font-size: 12pt;
  		font-weight: bold;
  		font-family: trebuchet ms, verdana, sans-serif;
  		color: #0071bc;
		text-decoration: none;
	}

.textcopyright {
		font-family:"OpenSans",Helvetica ,Arial,sans-serif;
		font-size: 10pt;
		font-style: normal;
		color:#000000;
		}

.container{	 /* fixed width */
	margin:0 auto;
	padding:40px;
	width:1000px;
	text-align:left;
	position:relative;
	font-family:"OpenSans",Helvetica ,Arial,sans-serif;
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	line-height: 150%;
	color: rgb(00,00,00);/*#000000;*/
	background-color:rgb(255,255,255);
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow: 0px 0px 10px #888;
	box-shadow: 0px 0px 10px #888;
}

.lowlineheight {
	margin-top: 2px;
	margin-bottom: 2px;
}

.papertext {
	line-height: 140%;
}

.dropshadow1 {
	/* -moz-box-shadow: 4px 4px 6px #888;
	-webkit-box-shadow: 4px 4px 6px #888;
	box-shadow: 4px 4px 6px #888; */
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow: 0px 0px 10px #888;
	box-shadow: 0px 0px 10px #888;
}

.papericon {
	border-radius: 8px;
	-moz-box-shadow: 3px 3px 6px #888;
	-webkit-box-shadow: 3px 3px 6px #888;
	box-shadow: 3px 3px 6px #888;
}

body {
	background-color:rgb(225,225,225);
}

details {
	user-select: none;
}

details>summary span.icon {
	/* width: 24px;
	height: 24px; */
	transition: all 0.3s;
	/* margin-left: auto; */
}

details>summary span.summarytext {
	/* width: 24px;
	height: 24px; */
	transition: all 0.3s;
	color:#0071bc;
	/* margin-left: auto; */
}

details[open] summary span.icon {
	transform: rotate(180deg);
}

summary {
	display: flex;
	cursor: pointer;
}

summary::-webkit-details-marker {
	display: none;
}

#avatarImage {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-image: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2Fimage%2Fhomepage%2Favatar_winter.png");
    display: inline-block;
    background-size: cover;
    transition: background-image 0.3s; /* Optional: smooth transition */
}

#avatarImage:hover {
    background-image: url("/?originalUrl=https%3A%2F%2Fpeterljq.github.io%2Fimage%2Fhomepage%2Favatar_diffusion.png"); /* Path to your hover image */
}

#avatarContainer {
    position: relative;
    display: inline-block;
}

#hoverText {
    display: none;
    position: absolute;
    bottom: -20px;  /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
	max-width: 1000px;  /* Adjust this to your preferred width */
    background-color: rgba(255, 255, 255, 0.7); /* Optional: for better text visibility */
    padding: 2px 8px;  /* Optional: for some padding around the text */
    border-radius: 5px;  /* Optional: for rounded corners */
	text-align: center; /* To center the text horizontally */
}

#avatarContainer:hover #hoverText {
    display: block;
}