/* fonts */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

/* variables */
:root {
  --primary: #259b24;
  --primary-alt: #0a7e07;
}

/* clean slate */
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: 'Source Code Pro', 'Consolas', monospace;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h2, h3, h4, h5, h6 {
  margin-top: 0;
}

/* links */
a {
  color: var(--primary);
  font-weight: bold;
}

a:hover, a:active, a:focus {
  color: var(--primary-alt);
}

/* navbar */
nav {
  background-color: var(--primary);
  overflow: hidden;
}
nav .branding {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
}
nav a {
  float: right;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: normal;
}
nav a:hover, nav a:active, nav a:focus {
  background-color: var(--primary-alt);
  color: #fff;
}

/* grid layout */
.grid-container {
  margin: 0 auto;
  max-width: calc(100% - 5em);
  max-width: 650px;
}
.grid-row {
  width: 100%;
  padding: 10px 0;
}
.grid-col-1, .grid-col-2, .grid-col-3, .grid-col-4 {
  float: left;
  padding: 0 10px;
}
.grid-col-1 {
  width: 25%;
}
.grid-col-2 {
  width: 50%;
}
.grid-col-3 {
  width: 75%;
}
.grid-col-4 {
  width: 100%;
}
.grid-row:after {
  content: "";
  display: table;
  clear: both;
}
.right {
  text-align: right;
}
.center {
    text-align: center;
}
@media screen and (max-width: 830px) {
  .grid-container {
    margin: 0;
    max-width: 100%;
  }
  .grid-col-1, .grid-col-2, .grid-col-3, .grid-col-4 {
    float: none;
    width: 100%;
  }
}

/* inputs */
input, select, textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  font-family: 'Source Code Pro', 'Consolas', monospace;
  font-size: inherit;
  padding: 10px;
  outline: none;
  border: 1px solid #333;
}
input:focus, select:focus, textarea:focus {
  border: 1px solid var(--primary-alt);
}
input[type=checkbox] {
  display: inline-block;
  width: auto;
  margin-bottom: auto;
}
textarea {
  min-height: 30vh;
  resize: vertical;
}

/* buttons */
.button {
  background-color: var(--primary);
  border: none;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
  font-weight: normal;
  cursor: pointer;
  font-family: 'Source Code Pro', 'Consolas', monospace;
}
.button:hover, .button:active, .button:focus {
  color: #fff;
  background-color: var(--primary-alt);
  outline: 0;
}
.button-danger {
  background-color: #C2185B;
}
.button-danger:hover, .button-danger:active, .button-danger:focus {
  background-color: #880E4F;
  color: #fff;
}