/* Palette: every color on the site is one of these blues. */
:root {
	--blue-ink: #0b1f4d;      /* body text */
	--blue-deep: #12357a;     /* headings, borders */
	--blue-strong: #1f56b8;   /* links, accents */
	--blue-mid: #4a86e0;      /* gradient tops, hovers */
	--blue-soft: #9cc2f5;     /* lines, muted bits */
	--blue-pale: #d6e7fc;     /* box headers, backdrop */
	--blue-mist: #eef5ff;     /* panels */
	--blue-white: #f8fbff;    /* content background */
	--blue-cyan: #a8eee8;
	--blue-teal: #5ec0ce;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 16px;
	/*background: linear-gradient(180deg, var(--blue-mid) 0, var(--blue-pale) 420px) fixed;*/
	background-image: url("assets/img/itsbenedictbg.png");
	background-size: cover;
	background-repeat: no-repeat;
  	background-attachment: fixed;
	background-color: var(--blue-pale);
	color: var(--blue-ink);
	font: 15px/1.6 Verdana, Tahoma, "Segoe UI", sans-serif;
}

a {
	color: var(--blue-strong);
}

a:hover {
	color: var(--blue-mid);
}

.page {
	max-width: 1000px;
	margin: 0 auto;
	border: 1px solid var(--blue-deep);
	border-radius: 10px;
	overflow: hidden;
	background: var(--blue-white);
	box-shadow: 0 4px 18px rgba(11, 31, 77, 0.35);
}

/* Masthead */
.masthead {
	padding: 24px 24px 18px;
	background: linear-gradient(180deg, var(--blue-mid) 0%, var(--blue-strong) 55%, var(--blue-deep) 100%);
	color: var(--blue-white);
}

.site-title {
	color: var(--blue-white);
	font: bold 30px/1.2 "Garamond", serif;
	text-decoration: none;
	font-size: 50px;
	text-shadow: 0 2px 2px var(--blue-ink);
}

.site-title:hover {
	color: var(--blue-pale);
}

.tagline {
	margin: 4px 0 0;
	color: var(--blue-pale);
	font-style: italic;
}

/* Top menu: glossy tab bar */
.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 12px 0;
	background: var(--blue-deep);
	border-bottom: 4px solid var(--blue-mid);
}

.menu a {
	padding: 8px 18px;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--blue-cyan) 0%, var(--blue-cyan) 50%, var(--blue-teal) 51%, var(--blue-strong) 100%);
	color: var(--blue-white);
	font-weight: bold;
	font-size:22px;
	text-decoration: none;
	-webkit-text-stroke: 1px var(--blue-deep);
	text-shadow: 0 1px 1px var(--blue-deep);
}

.menu a:hover {
	background: linear-gradient(180deg, var(--blue-pale) 0%, var(--blue-soft) 50%, var(--blue-mid) 51%, var(--blue-mid) 100%);
	color: var(--blue-white);
}

.menu a[aria-current="page"] {
	background: var(--blue-mid);
	color: var(--blue-white);
}

/* Two-column body */
.columns {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}

.sidebar {
	flex: 0 0 230px;
}

.content {
	flex: 1;
	min-width: 0;
}

/* Sidebar boxes */
.box {
	margin-bottom: 16px;
	border: 1px solid var(--blue-soft);
	border-radius: 8px;
	background: var(--blue-mist);
	overflow: hidden;
}

.box h2 {
	margin: 0;
	padding: 6px 12px;
	background: linear-gradient(180deg, var(--blue-pale), var(--blue-soft));
	border-bottom: 1px solid var(--blue-soft);
	color: var(--blue-deep);
	font-size: 14px;
}

.box p,
.box ul {
	margin: 10px 12px;
	font-size: 13px;
}

.box ul {
	padding-left: 18px;
}

.avatar {
	width: 120px;
	height: 120px;
	margin: 12px auto 0;
	border: 3px solid var(--blue-white);
	border-radius: 8px;
	background-image: url("assets/img/profile.png");
	background-size: 100% 100%;
	/*background: linear-gradient(135deg, var(--blue-soft), var(--blue-strong));*/
	box-shadow: 0 1px 4px rgba(11, 31, 77, 0.4);
}

/* Content */
.content h2 {
	color: var(--blue-deep);
}

.post {
	margin-bottom: 24px;
	padding: 4px 20px 12px;
	border: 1px solid var(--blue-soft);
	border-radius: 8px;
	background: var(--blue-mist);
}

.post-title {
	margin: 12px 0 0;
	padding-bottom: 4px;
	border-bottom: 2px dotted var(--blue-soft);
}

.post-title a {
	color: var(--blue-deep);
	text-decoration: none;
}

.post-title a:hover {
	color: var(--blue-strong);
	text-decoration: underline;
}

.post-date {
	margin: 4px 0 12px;
	color: var(--blue-strong);
	font-size: 12px;
}

.more {
	font-weight: bold;
}

.archive {
	padding-left: 0;
	list-style: none;
}

.archive li {
	padding: 6px 0;
	border-bottom: 1px dotted var(--blue-soft);
}

.archive .post-date {
	display: inline-block;
	width: 7em;
	margin: 0;
}

/* Footer */
.footer {
	padding: 12px 20px;
	background: linear-gradient(180deg, var(--blue-strong), var(--blue-deep));
	color: var(--blue-pale);
	font-size: 13px;
	text-align: center;
}

.footer p {
	margin: 4px 0;
}

.footer a {
	color: var(--blue-white);
}

.small {
	font-size: 11px;
}

/* Phones: stack the sidebar under the content */
@media (max-width: 700px) {
	body {
		padding: 0;
	}

	.page {
		border: 0;
		border-radius: 0;
	}

	.columns {
		flex-direction: column-reverse;
		align-items: stretch;
		padding: 16px;
	}

	.sidebar {
		flex-basis: auto;
	}

	.menu a {
		padding: 8px 12px;
	}

	.post {
		padding: 4px 14px 10px;
	}
}
.default-image{
	width:31%;
	padding:4px;
}
.half-image{
	width:46%;
	padding:4px;
}
.full-image{
	width:93%;
}