.avatar {
    border-radius: 50%;
	height: 22%;
	max-height: 120px;
	width: 22%;
	max-width: 120px;
}

.blog-image {
	border-radius: 2%;
}

.blog-text {
	/* margin-left: 4%; */
  width: 100%;
  float: left;
  box-sizing: border-box;
}

@media (min-width: 1000px) {
	.blog-text {
		width: 65.3333333333%;
	}
}

.horizontal-image {
	max-height: 223px;
	width: 100%;
	height: 100%;
    /* border-radius: 2%;
	width: 33%;
	height: 33%;
	max-height: 223px;
	max-width: 300px;
	display: block;
	margin: auto; */
}

figure {
	width: 33%;
	height: 33%;
	border: thin #c0c0c0 solid;
	display: flex;
	flex-flow: column;
	padding: 5px;
	max-width: 300px;
	margin: auto;
	margin-bottom: 1%;
	/* margin-left: 100px; */
}
  
figcaption {
	font: italic smaller sans-serif;
	padding: 3px;
	text-align: center;
}


/* @media (min-width: 1000px) {
	.horizontal-image {
		display: inline;
		float: right;
	}
} */

.icon {
    border-radius: 50%;
	height: 3dvh;
    width: 3dvh;
	min-width: 30px;
	min-height: 30px;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

hr {
	margin-top: 1.5rem;
	margin-bottom: 1.7rem;
	border-color: #d9d9d9;
}

body {
	margin: 2em auto;
	padding: 1em;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	color: #d9d9d9;
}

html {
	background-color:#181A1B;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

@media (prefers-color-scheme: light) {
	html {
		background-color:revert
	}
	body {
		color: #222
	}
	a {
	  color: #157A99; }
	a:hover {
	  color: #0B7393; }
}

h1 { font-size: 6.5vw; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { 
	margin-left: 2.16666666667%;
	font-size: 2.4rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
}

@media (min-width: 750px) {
	h1 { font-size: 5.0rem; }
}

.nav {
	height: 4.5vw;
	max-height: 33px;
	width: 22%;
	max-width: 75px;
	font-size: 2vw;
	line-height: 4.5vw;
	padding: 0 0;
	overflow: hidden;
	color: inherit;
}
.nav:hover {
	color: #888;
	border-color: #888;
}
.nav:focus, .nav:active {
	color: #888;
	border-color: #888;
	text-decoration: underline;
}

@media (min-width: 750px) {
	.nav {
		font-size: 15px;
		line-height: 30px;
	}
}

.container {
	width: 80%; }
/* Columns */
.column,
.columns {
	margin-left: 4%; }
.column:first-child,
.columns:first-child {
	margin-left: 0; }
.half.column,
.half.columns                    { width: 2.33333333333%; }
.one.column,
.one.columns                    { width: 4.66666666667%; }
.two.columns                    { width: 13.3333333333%; }
.three.columns                  { width: 22%;            }
.four.columns                   { width: 30.6666666667%; }
.five.columns                   { width: 39.3333333333%; }
.six.columns                    { width: 48%;            }
.seven.columns                  { width: 56.6666666667%; }
.eight.columns                  { width: 65.3333333333%; }
.nine.columns                   { width: 74.0%;          }
.ten.columns                    { width: 82.6666666667%; }
.eleven.columns                 { width: 91.3333333333%; }
.twelve.columns                 { width: 100%; margin-left: 0; }
.one-third.column               { width: 30.6666666667%; }
.two-thirds.column              { width: 65.3333333333%; }
.one-half.column                { width: 48%; }
/* Offsets */
.offset-by-quarter.column,
.offset-by-quarter.columns          { margin-left: 2.16666666667%; }