/* sixtyone-theme.css: Suntzu theme replacement for Django project */
:root {
  --sixtyone: #1a472b;
  --dark-green: #020303;
  --oracle: #425e5e;
  --links: #8eafaf;
  --white-smoke: #f2f2f2;
  --rust: #c74009;
  --bossanova: #5a475a;
  --tulip-tree: #deae48;
  --body-color: #4c545d;
}

.bg-color-sixtyone {
  background-color: var(--sixtyone);
}

.bg-color-dark-green {
  background-color: var(--dark-green);
}

.bg-color-oracle {
  background-color: var(--oracle);
}

.bg-color-ziggurat {
  background-color: var(--links);
}

.bg-color-white-smoke {
  background-color: var(--white-smoke);
}

.bg-color-rust {
  background-color: var(--rust);
}

.bg-color-tulip-tree {
  background-color: var(--tulip-tree);
}

.bg-color-bossanova {
  background-color: var(--bossanova);
}

body {
  color: var(--body-color);
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  color: var(--dark-green);
  font-weight: 600;
  line-height: 1.2;
}

h1,
span.h1 {
  font-size: 3.8125rem;
}

h2,
span.h2 {
  font-size: 2.25rem;
}

h3,
span.h3 {
  font-size: 1.75rem;
  line-height: 1.125em;
}

h4,
span.h4 {
  font-size: 1.5rem;
  line-height: 1.125em;
}

h5,
span.h5 {
  font-size: 1.25rem;
  line-height: 1.125em;
}

h6,
span.h6 {
  font-size: 1.1rem;
  line-height: 1.125em;
  text-transform: uppercase;
}

a {
  color: var(--sixtyone);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s;
}

a:hover,
a:active {
  color: var(--links);
}

p a {
  border-bottom: 1px solid var(--links);
}

input,
button,
select,
textarea {
  border: 1px solid var(--dark-green);
}

button,
[type="button"],
[type="submit"] {
  color: #fff;
  border: 1px solid var(--links);
  background-color: var(--links);
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover {
  background-color: var(--dark-green);
}

.strikeout {
  position: relative;
  white-space: normal;
  overflow: hidden;
}

.strikeout::after {
  border-bottom: 0.45em solid rgba(172, 228, 222, .75);
  content: "";
  width: 125%;
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 60%;
  z-index: -1;
}

ul li {
  list-style-type: square;
}

/* Global Responsive Rules */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  body {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  .container,
  .sixtyone-hero,
  .sixtyone-welcome,
  .sixtyone-mission,
  .sixtyone-about,
  .sixtyone-pillars,
  .sixtyone-gap {
    padding-left: 20px;
    padding-right: 20px;
  }
}