* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
  background-color: #272727;
  color: #dddddd;
  font-family: Jura, Arial, Helvetica, sans-serif;
}
a {
	text-decoration: none;
}
a:link {
	color: #dddddd;
}
a:visited {
	color: #555555;
}
a:hover {
	color: #dddddd;
}
p {
	text-align: justify;
	text-align-last: left;
}
#root_container {
  margin: auto;
  top: 0;
  bottom: 0;
  min-width: 360px;
  max-width: 960px;
  min-height: 100%;
  background-color: #222222;
  padding: 20px 20px 5px 20px;
}


#header_container {
  top: 0;
  display: grid;
  grid-template-areas: 'header-image' 'header-text' 'header-subtext';
  /*
  border: 1px solid #444444;
  border-radius: 5px;
  */
  padding: 20px;
  grid-column-gap: 20px;
}
.header-image {
  grid-area: header-image;
  text-align: center;
  place-items: center;
}
.header-image img {
  height: 100%;
  clip-path: circle(50%);
}
.header-text {
  display: grid;
  grid-area: header-text;
  text-align: center;
  place-items: center;
}



.item {
  width: 100%;
  border: 1px solid #444444;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.item:hover {
  background-color: #335599;
  border-color: #335599;
}
.item_author {
	display: inline-flex;
	float: left;
}
.item_date {
	display: inline-flex;
	float: right;
}
.item_title {
	clear: both;
	margin-top: 40px;
	font-size: 2.0em;
	text-align: justify;
	text-align-last: left;
}
.item_subtitle {
	margin-top: 20px;
	font-size: 1.25em;
	text-align: justify;
	text-align-last: left;
}



#error_container {
  background-color: #222222;
  border: 1px solid #444444;
  border-radius: 5px;
  margin: 20% auto;
  padding: 20px;
  color: #444444;
  text-align: center;
}
.error_status {
	font-size: 15em;
}
.error_message {
	font-size: 3em;
}



@media (min-width: 0px) {
  .header-image {max-height: 125px;}
  .header-title {font-size: 2rem;}
  .header-subtitle {font-size: 1.0rem;}
}
@media (min-width: 400px) {
  .header-title {font-size: 2.5rem;}
  .header-subtitle {font-size: 1.25rem;}
}
@media (min-width: 600px) {
  .header-image {max-height: 150px;}
  .header-title {font-size: 3.5rem;}
  .header-subtitle {font-size: 2rem;}
}
@media (min-width: 768px) {
  .header-image {grid-area: 1 / span 1; justify-self: right; max-height: 200px;}
  .header-text {grid-area: 1 / span 1; justify-self: left;}
  .header-title {font-size: 4rem;}
  .header-subtitle {font-size: 2rem;}
}