.container {
    display: flex;
    max-width: 100%; /* Adjusts to your layout */
    margin: 0 auto;
}

#spinImage {
    transition: transform 1s linear; /* Define the transition for smooth animation */
}
.spin {
    transform: rotate(360deg); /* Apply rotation */
}

main {
    flex: 1; /* takes up available space */
}

.sidebar {
    width: 250px; /* Set width for your side panel */
    background-color: #f0f0f0; /* Optional background color */
    padding: 15px; /* Optional padding */
    margin-left: 20px; /* Space between main content and the side panel */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}


body{
	max-width:40em;
	margin:0 auto;
	padding:5px;
	font-family:Georgia,serif;
	font-size:20px;
	line-height:30px;
	background-color:#fff;
	color:#000
}
header#masthead,h1,h2,h3,dt,small,.small,dl#tweetlist dt,footer,label,#commentlist 
ol li cite,div.blogparent,input[type="submit"],figcaption{
	font-family:valkyrie_c4;
	font-weight:normal;
	font-style:normal
}
span.url {
	font-family:Georgia,serif;
}
small,.small,footer,dl#tweetlist dt,figcaption{
	font-size:0.8em;
	color:#666
}
h1,h2,h3,label,header#masthead{
	line-height:1em
}
h1 {
	font-size:2em
}
h2 a{
	color:#000;
	text-decoration: underline
}
h2,h3{
	margin-top:2em
}
h3{
	font-size:2em
}
a{
	text-decoration:none;
	color:#20b;
	overflow-wrap:break-word;
	word-wrap:break-word
}
a:visited{
	color:#606
}
a:hover{
	text-decoration:underline
}
dt{
	margin-top:2em;
	font-size:1.2em
}
li,dd{
	margin-bottom:1em
}
figure{
	margin:0
}
blockquote{
	margin:2em;
	color:#444
}
pre{
	overflow-x:auto;
	color:#fff;
	background-color:#333;
	padding:0.25em;
	line-height:1
}
code{
	font-size:0.8em
}
img,iframe,audio{
	max-width:100%;
	display:block
}
img{
	height:auto
}
input[type="text"],input[type="password"],input[type="email"],select,textarea{
	padding:0.5em 0.6em;
	display:block;
	border:1px solid #ccc;
	box-shadow:inset 0 1px 3px #ddd;
	border-radius:4px;
	vertical-align:middle;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	max-width:99%
}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,select:focus,textarea:focus{
	outline:0;
	border-color:#129FEA
}
input[type="submit"]{
	padding:5px;
	font-size:1em;
	background:#000;
	color:#fff;
	font-weight:bold
}
form.inlineform input{
	display:inline
}
select{
	height:2.25em;
	border:1px solid #ccc;
	background-color:#fff
}
label{
	margin:0.5em 0 0.2em
}
section{
	margin-bottom:4em
}
header#masthead{
	margin-bottom:1em
	margin:0
}
header#masthead a{
	color:#000
}
body#home main h2 small{
	margin-left:2em
}
body#home main ul{
	padding-left:0
}
body#home main ul li{
	list-style-type:none
}
body#home main section#photos img{
	display:inline
}
div.blogparent{
	font-size:1.2em;
	margin:1em 0 -0.5em 0
}
body#oneblog main article header h1{
	margin-bottom:0
}
div#comments ol{
	padding-left:2em
}
div#comments li{
	margin-bottom:2em
}
div#comments li p{
	overflow-wrap:break-word;
	word-wrap:break-word
}
.response{
	display:block;
	margin-left:1em;
	padding:4px;
	background-color:#ffc;
	border:1px solid #000;
	font-family:sans-serif;
	font-size:14px
}
body#book figure img,body#booklist figure img{
	float:left;
	margin-right:2em
}
body#booklist div.abook{
	margin:0 0 8em 0
}
body#interview header h2 a {
	color: #009;
	text-decoration: underline
}
cite {
	color: #666
}
div.presentation_summary{
	margin-bottom:6em
}
@media screen and (max-width: 440px){
	header#masthead {
		font-size:2em
	}
	div.presentation_summary img{
		display:block
	}
}
@media screen and (min-width: 440px){
	header#masthead {
		font-size:3em
	}
	div.presentation_summary img{
		float:right
	}
}
@media(prefers-color-scheme:dark){
	body, blockquote {
		background-color:#000;
		color:#ccc
	}
	a{
		color:#88f
	}
	a:visited{
		color:#aaf
	}
	.response{
		background-color:#444
	}
	h1,h1 a,h2,h2 a,h3,h3 a, header#masthead a{
		color:#080
	}
}
ul#reviews {
	margin: 0;
	padding: 0
}
ul#reviews li {
	list-style-type: none
}
ul#reviews li blockquote {
	margin: 1em 0 3em 0
}
ul#reviews li blockquote cite {
	display: block;
	margin-top: 1em
}
#mybooks img { float: left; margin-bottom: 2em; margin-right: 0.5em }
#mybooks h3 { margin-top: 0 }
#mybooks br { clear: both }

body#fp dl {
	width: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0
}
body#fp dt {
	font-family:sans; 
	font-size:0.8em; 
	float: left;
	width: 20%;
	padding: 0;
	margin: 0
}
body#fp dd {
	float: left;
	width: 80%;
	padding: 0;
	margin: 0
}