body, td, li, pre {
	 font-family: "Open Sans", "Helvetica Neue", sans-serif;
	 background-image: url("bckthanka.gif");
}
.container {
	text-align:center;
	margin:1rem 5px;
}
.content {
margin:0 auto;
max-width:700px;
margin-top:20px;
}

p {
	text-align:left
}

.side-panel {
	position:absolute;
	top:60px;
	left:50%;
	width:50%;
}

a {
	color:teal;text-decoration:none
}
h1{
	color:#aa0011;
	margin:.5rem 2rem;
}
h1 img {
	margin:1rem;width:5rem; height:auto;vertical-align: middle;  border-radius:50%; 
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
h2 {
	font-size:1.5rem;
}
 #lines1, #lines2 {
    cursor:pointer;
}
#lines1 span, #lines2 span{
    margin-bottom: 10px;
    display: block;
}
#lines1 span img, #lines2 span img{
    width: 124px;
}
#reading {
	margin:0 auto;
	height:fit-content;
	text-align:left;
}
.back-arrow{
	display:none;
	cursor:pointer;
}
.hexagram {
    max-width: 400px;
}
	pre {
	font-size:1.2rem;
	}

@media screen and (max-device-width: 405px), screen and (max-width: 730px) {
	h1 {
		font-size:1.5rem;
	}
	h1 img {
		margin: 0rem;
		width: 1.8rem;
		height: auto;
	}
	#ichingyinyang{
	width:5rem
	}
}

@media screen and (max-device-width: 425px), screen and (max-width: 900px) {
	.side-panel {
		display:none;
		position: relative;
		width: 100%;
		padding-top: 1rem;
		padding-left: 0;
		left:500px;
		top:0;
	}
	.back-arrow{
		display:block;
	}
	h2 {
	margin-top: 0;
	}
	.content {
		position:relative !important;
		width: 100% !important;
	}

	#ichingyinyang{
	width:5rem;
	
	pre {
	font-size:1rem !important;
	}
	
}