* {
  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;
}

#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.5rem;}
}
@media (min-width: 400px) {
  .header-title {font-size: 2.5rem;}
  .header-subtitle {font-size: 1.75rem;}
}
@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;}
}