.flex {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between; }
  .flex a {
    padding-bottom: 2em; }

a {
  color: #f0dfaf;
  text-decoration: none;
  font-weight: bold; }

a:hover {
  color: #d0bf8f;
  font-weight: bold;
  text-decoration: underline; }

body {
  margin: 0;
  background-color: #3f3f3f;
  color: #dcdccc; }

h1, h2, h3, h4, h5, h6 {
  text-align: center; }

h1 {
  padding: 2em;
  margin: 0;
  background: #1F473A;
  color: #88B090; }

h2 {
  color: #bfebbf; }

h3 {
  color: #7cb8bb; }

h4 {
  color: #d0bf8f; }

.blog {
  text-align: center;
  padding: 2em 0; }
  .blog h3 {
    margin: 0; }
  .blog time {
    display: block;
    padding-bottom: 2em; }

ul li, p {
  font-size: 15px;
  font-family: Verdana, Geneva, sans-serif;
  line-height: 30px; }

p {
  margin: 2em 0; }

pre code, code {
  font-size: 16px;
  color: #DCA3A3; }

pre {
  border: solid 2px black;
  border-radius: 2em;
  background-color: #9DB5B2;
  padding: 2em; }
  pre code {
    color: black; }

img {
  display: block;
  margin: auto; }

ul li {
  margin: 1em; }

.basic-section-padding {
  max-width: 70%;
  padding: 2em 0 2em 15%; }

.section-background {
  background-color: #1F473A; }
  .section-background a:hover {
    color: #dfaf8f;
    text-decoration: underline; }

.text-white {
  color: white; }

@media (max-width: 800px) {
  main {
    padding: 2em 1.5em 2em 1.5em;
    max-width: 100%; }
  ul {
    padding-left: 1.5em; }
    ul li {
      margin: 0; } }

form p {
  padding-left: 2em; }

form label {
  min-width: 10em;
  display: inline-block;
  padding-left: 2em; }

form input {
  min-width: 15em;
  display: inline-block;
  margin: 0 0 2em 2em; }

form input[type="radio"] {
  min-width: 5em;
  display: inline-block;
  margin: 0 0 2em 0; }

form input[type="checkbox"] {
  margin: 0 0 2em 15em;
  min-width: 0; }

form textarea {
  margin-left: 2.5em; }

form ul {
  list-style-type: none; }

form fieldset {
  margin-bottom: 2em; }

.hidden {
  display: none; }