/*!
Pure v3.0.0
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE
*/
/*!
normalize.css v | MIT License | https://necolas.github.io/normalize.css/
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html {
 line-height:1.15;
 -webkit-text-size-adjust:100%
}
body {
 margin:0
}
main {
 display:block
}
h1 {
 font-size:2em;
 margin:.67em 0
}
hr {
 box-sizing:content-box;
 height:0;
 overflow:visible
}
pre {
 font-family:monospace,monospace;
 font-size:1em
}
a {
 background-color:transparent
}
abbr[title] {
 border-bottom:none;
 text-decoration:underline;
 -webkit-text-decoration:underline dotted;
 text-decoration:underline dotted
}
b,
strong {
 font-weight:bolder
}
code,
kbd,
samp {
 font-family:monospace,monospace;
 font-size:1em
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
img {
 border-style:none
}
button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-size:100%;
 line-height:1.15;
 margin:0
}
button,
input {
 overflow:visible
}
button,
select {
 text-transform:none
}
[type=button],
[type=reset],
[type=submit],
button {
 -webkit-appearance:button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
 border-style:none;
 padding:0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
 outline:1px dotted ButtonText
}
fieldset {
 padding:.35em .75em .625em
}
legend {
 box-sizing:border-box;
 color:inherit;
 display:table;
 max-width:100%;
 padding:0;
 white-space:normal
}
progress {
 vertical-align:baseline
}
textarea {
 overflow:auto
}
[type=checkbox],
[type=radio] {
 box-sizing:border-box;
 padding:0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
 height:auto
}
[type=search] {
 -webkit-appearance:textfield;
 outline-offset:-2px
}
[type=search]::-webkit-search-decoration {
 -webkit-appearance:none
}
::-webkit-file-upload-button {
 -webkit-appearance:button;
 font:inherit
}
details {
 display:block
}
summary {
 display:list-item
}
template {
 display:none
}
[hidden] {
 display:none
}
html {
 font-family:sans-serif
}
.hidden,
[hidden] {
 display:none!important
}
.pure-img {
 max-width:100%;
 height:auto;
 display:block
}
.pure-g {
 display:flex;
 flex-flow:row wrap;
 align-content:flex-start
}
.pure-u {
 display:inline-block;
 vertical-align:top
}
.pure-u-1,
.pure-u-1-1,
.pure-u-1-12,
.pure-u-1-2,
.pure-u-1-24,
.pure-u-1-3,
.pure-u-1-4,
.pure-u-1-5,
.pure-u-1-6,
.pure-u-1-8,
.pure-u-10-24,
.pure-u-11-12,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-2-24,
.pure-u-2-3,
.pure-u-2-5,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24,
.pure-u-3-24,
.pure-u-3-4,
.pure-u-3-5,
.pure-u-3-8,
.pure-u-4-24,
.pure-u-4-5,
.pure-u-5-12,
.pure-u-5-24,
.pure-u-5-5,
.pure-u-5-6,
.pure-u-5-8,
.pure-u-6-24,
.pure-u-7-12,
.pure-u-7-24,
.pure-u-7-8,
.pure-u-8-24,
.pure-u-9-24 {
 display:inline-block;
 letter-spacing:normal;
 word-spacing:normal;
 vertical-align:top;
 text-rendering:auto
}
.pure-u-1-24 {
 width:4.1667%
}
.pure-u-1-12,
.pure-u-2-24 {
 width:8.3333%
}
.pure-u-1-8,
.pure-u-3-24 {
 width:12.5%
}
.pure-u-1-6,
.pure-u-4-24 {
 width:16.6667%
}
.pure-u-1-5 {
 width:20%
}
.pure-u-5-24 {
 width:20.8333%
}
.pure-u-1-4,
.pure-u-6-24 {
 width:25%
}
.pure-u-7-24 {
 width:29.1667%
}
.pure-u-1-3,
.pure-u-8-24 {
 width:33.3333%
}
.pure-u-3-8,
.pure-u-9-24 {
 width:37.5%
}
.pure-u-2-5 {
 width:40%
}
.pure-u-10-24,
.pure-u-5-12 {
 width:41.6667%
}
.pure-u-11-24 {
 width:45.8333%
}
.pure-u-1-2,
.pure-u-12-24 {
 width:50%
}
.pure-u-13-24 {
 width:54.1667%
}
.pure-u-14-24,
.pure-u-7-12 {
 width:58.3333%
}
.pure-u-3-5 {
 width:60%
}
.pure-u-15-24,
.pure-u-5-8 {
 width:62.5%
}
.pure-u-16-24,
.pure-u-2-3 {
 width:66.6667%
}
.pure-u-17-24 {
 width:70.8333%
}
.pure-u-18-24,
.pure-u-3-4 {
 width:75%
}
.pure-u-19-24 {
 width:79.1667%
}
.pure-u-4-5 {
 width:80%
}
.pure-u-20-24,
.pure-u-5-6 {
 width:83.3333%
}
.pure-u-21-24,
.pure-u-7-8 {
 width:87.5%
}
.pure-u-11-12,
.pure-u-22-24 {
 width:91.6667%
}
.pure-u-23-24 {
 width:95.8333%
}
.pure-u-1,
.pure-u-1-1,
.pure-u-24-24,
.pure-u-5-5 {
 width:100%
}
.pure-button {
 display:inline-block;
 line-height:normal;
 white-space:nowrap;
 vertical-align:middle;
 text-align:center;
 cursor:pointer;
 -webkit-user-drag:none;
 -webkit-user-select:none;
 user-select:none;
 box-sizing:border-box
}
.pure-button::-moz-focus-inner {
 padding:0;
 border:0
}
.pure-button-group {
 letter-spacing:-.31em;
 text-rendering:optimizespeed
}
.opera-only :-o-prefocus,
.pure-button-group {
 word-spacing:-0.43em
}
.pure-button-group .pure-button {
 letter-spacing:normal;
 word-spacing:normal;
 vertical-align:top;
 text-rendering:auto
}
.pure-button {
 font-family:inherit;
 font-size:100%;
 padding:.5em 1em;
 color:rgba(0,0,0,.8);
 border:none transparent;
 background-color:#e6e6e6;
 text-decoration:none;
 border-radius:2px
}
.pure-button-hover,
.pure-button:focus,
.pure-button:hover {
 background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
}
.pure-button:focus {
 outline:0
}
.pure-button-active,
.pure-button:active {
 box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
 border-color:#000
}
.pure-button-disabled,
.pure-button-disabled:active,
.pure-button-disabled:focus,
.pure-button-disabled:hover,
.pure-button[disabled] {
 border:none;
 background-image:none;
 opacity:.4;
 cursor:not-allowed;
 box-shadow:none;
 pointer-events:none
}
.pure-button-hidden {
 display:none
}
.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
 background-color:#0078e7;
 color:#fff
}
.pure-button-group .pure-button {
 margin:0;
 border-radius:0;
 border-right:1px solid rgba(0,0,0,.2)
}
.pure-button-group .pure-button:first-child {
 border-top-left-radius:2px;
 border-bottom-left-radius:2px
}
.pure-button-group .pure-button:last-child {
 border-top-right-radius:2px;
 border-bottom-right-radius:2px;
 border-right:none
}
.pure-form input[type=color],
.pure-form input[type=date],
.pure-form input[type=datetime-local],
.pure-form input[type=datetime],
.pure-form input[type=email],
.pure-form input[type=month],
.pure-form input[type=number],
.pure-form input[type=password],
.pure-form input[type=search],
.pure-form input[type=tel],
.pure-form input[type=text],
.pure-form input[type=time],
.pure-form input[type=url],
.pure-form input[type=week],
.pure-form select,
.pure-form textarea {
 padding:.5em .6em;
 display:inline-block;
 border:1px solid #ccc;
 box-shadow:inset 0 1px 3px #ddd;
 border-radius:4px;
 vertical-align:middle;
 box-sizing:border-box
}
.pure-form input:not([type]) {
 padding:.5em .6em;
 display:inline-block;
 border:1px solid #ccc;
 box-shadow:inset 0 1px 3px #ddd;
 border-radius:4px;
 box-sizing:border-box
}
.pure-form input[type=color] {
 padding:.2em .5em
}
.pure-form input[type=color]:focus,
.pure-form input[type=date]:focus,
.pure-form input[type=datetime-local]:focus,
.pure-form input[type=datetime]:focus,
.pure-form input[type=email]:focus,
.pure-form input[type=month]:focus,
.pure-form input[type=number]:focus,
.pure-form input[type=password]:focus,
.pure-form input[type=search]:focus,
.pure-form input[type=tel]:focus,
.pure-form input[type=text]:focus,
.pure-form input[type=time]:focus,
.pure-form input[type=url]:focus,
.pure-form input[type=week]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
 outline:0;
 border-color:#129fea
}
.pure-form input:not([type]):focus {
 outline:0;
 border-color:#129fea
}
.pure-form input[type=checkbox]:focus,
.pure-form input[type=file]:focus,
.pure-form input[type=radio]:focus {
 outline:thin solid #129FEA;
 outline:1px auto #129FEA
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
 margin:.5em 0;
 display:block
}
.pure-form input[type=color][disabled],
.pure-form input[type=date][disabled],
.pure-form input[type=datetime-local][disabled],
.pure-form input[type=datetime][disabled],
.pure-form input[type=email][disabled],
.pure-form input[type=month][disabled],
.pure-form input[type=number][disabled],
.pure-form input[type=password][disabled],
.pure-form input[type=search][disabled],
.pure-form input[type=tel][disabled],
.pure-form input[type=text][disabled],
.pure-form input[type=time][disabled],
.pure-form input[type=url][disabled],
.pure-form input[type=week][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
 cursor:not-allowed;
 background-color:#eaeded;
 color:#cad2d3
}
.pure-form input:not([type])[disabled] {
 cursor:not-allowed;
 background-color:#eaeded;
 color:#cad2d3
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
 background-color:#eee;
 color:#777;
 border-color:#ccc
}
.pure-form input:focus:invalid,
.pure-form select:focus:invalid,
.pure-form textarea:focus:invalid {
 color:#b94a48;
 border-color:#e9322d
}
.pure-form input[type=checkbox]:focus:invalid:focus,
.pure-form input[type=file]:focus:invalid:focus,
.pure-form input[type=radio]:focus:invalid:focus {
 outline-color:#e9322d
}
.pure-form select {
 height:2.25em;
 border:1px solid #ccc;
 background-color:#fff
}
.pure-form select[multiple] {
 height:auto
}
.pure-form label {
 margin:.5em 0 .2em
}
.pure-form fieldset {
 margin:0;
 padding:.35em 0 .75em;
 border:0
}
.pure-form legend {
 display:block;
 width:100%;
 padding:.3em 0;
 margin-bottom:.3em;
 color:#333;
 border-bottom:1px solid #e5e5e5
}
.pure-form-stacked input[type=color],
.pure-form-stacked input[type=date],
.pure-form-stacked input[type=datetime-local],
.pure-form-stacked input[type=datetime],
.pure-form-stacked input[type=email],
.pure-form-stacked input[type=file],
.pure-form-stacked input[type=month],
.pure-form-stacked input[type=number],
.pure-form-stacked input[type=password],
.pure-form-stacked input[type=search],
.pure-form-stacked input[type=tel],
.pure-form-stacked input[type=text],
.pure-form-stacked input[type=time],
.pure-form-stacked input[type=url],
.pure-form-stacked input[type=week],
.pure-form-stacked label,
.pure-form-stacked select,
.pure-form-stacked textarea {
 display:block;
 margin:.25em 0
}
.pure-form-stacked input:not([type]) {
 display:block;
 margin:.25em 0
}
.pure-form-aligned input,
.pure-form-aligned select,
.pure-form-aligned textarea,
.pure-form-message-inline {
 display:inline-block;
 vertical-align:middle
}
.pure-form-aligned textarea {
 vertical-align:top
}
.pure-form-aligned .pure-control-group {
 margin-bottom:.5em
}
.pure-form-aligned .pure-control-group label {
 text-align:right;
 display:inline-block;
 vertical-align:middle;
 width:10em;
 margin:0 1em 0 0
}
.pure-form-aligned .pure-controls {
 margin:1.5em 0 0 11em
}
.pure-form .pure-input-rounded,
.pure-form input.pure-input-rounded {
 border-radius:2em;
 padding:.5em 1em
}
.pure-form .pure-group fieldset {
 margin-bottom:10px
}
.pure-form .pure-group input,
.pure-form .pure-group textarea {
 display:block;
 padding:10px;
 margin:0 0 -1px;
 border-radius:0;
 position:relative;
 top:-1px
}
.pure-form .pure-group input:focus,
.pure-form .pure-group textarea:focus {
 z-index:3
}
.pure-form .pure-group input:first-child,
.pure-form .pure-group textarea:first-child {
 top:1px;
 border-radius:4px 4px 0 0;
 margin:0
}
.pure-form .pure-group input:first-child:last-child,
.pure-form .pure-group textarea:first-child:last-child {
 top:1px;
 border-radius:4px;
 margin:0
}
.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
 top:-2px;
 border-radius:0 0 4px 4px;
 margin:0
}
.pure-form .pure-group button {
 margin:.35em 0
}
.pure-form .pure-input-1 {
 width:100%
}
.pure-form .pure-input-3-4 {
 width:75%
}
.pure-form .pure-input-2-3 {
 width:66%
}
.pure-form .pure-input-1-2 {
 width:50%
}
.pure-form .pure-input-1-3 {
 width:33%
}
.pure-form .pure-input-1-4 {
 width:25%
}
.pure-form-message-inline {
 display:inline-block;
 padding-left:.3em;
 color:#666;
 vertical-align:middle;
 font-size:.875em
}
.pure-form-message {
 display:block;
 color:#666;
 font-size:.875em
}
@media only screen and (max-width :480px) {
 .pure-form button[type=submit] {
  margin:.7em 0 0
 }
 .pure-form input:not([type]),
 .pure-form input[type=color],
 .pure-form input[type=date],
 .pure-form input[type=datetime-local],
 .pure-form input[type=datetime],
 .pure-form input[type=email],
 .pure-form input[type=month],
 .pure-form input[type=number],
 .pure-form input[type=password],
 .pure-form input[type=search],
 .pure-form input[type=tel],
 .pure-form input[type=text],
 .pure-form input[type=time],
 .pure-form input[type=url],
 .pure-form input[type=week],
 .pure-form label {
  margin-bottom:.3em;
  display:block
 }
 .pure-group input:not([type]),
 .pure-group input[type=color],
 .pure-group input[type=date],
 .pure-group input[type=datetime-local],
 .pure-group input[type=datetime],
 .pure-group input[type=email],
 .pure-group input[type=month],
 .pure-group input[type=number],
 .pure-group input[type=password],
 .pure-group input[type=search],
 .pure-group input[type=tel],
 .pure-group input[type=text],
 .pure-group input[type=time],
 .pure-group input[type=url],
 .pure-group input[type=week] {
  margin-bottom:0
 }
 .pure-form-aligned .pure-control-group label {
  margin-bottom:.3em;
  text-align:left;
  display:block;
  width:100%
 }
 .pure-form-aligned .pure-controls {
  margin:1.5em 0 0 0
 }
 .pure-form-message,
 .pure-form-message-inline {
  display:block;
  font-size:.75em;
  padding:.2em 0 .8em
 }
}
.pure-menu {
 box-sizing:border-box
}
.pure-menu-fixed {
 position:fixed;
 left:0;
 top:0;
 z-index:3
}
.pure-menu-item,
.pure-menu-list {
 position:relative
}
.pure-menu-list {
 list-style:none;
 margin:0;
 padding:0
}
.pure-menu-item {
 padding:0;
 margin:0;
 height:100%
}
.pure-menu-heading,
.pure-menu-link {
 display:block;
 text-decoration:none;
 white-space:nowrap
}
.pure-menu-horizontal {
 width:100%;
 white-space:nowrap
}
.pure-menu-horizontal .pure-menu-list {
 display:inline-block
}
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-separator {
 display:inline-block;
 vertical-align:middle
}
.pure-menu-item .pure-menu-item {
 display:block
}
.pure-menu-children {
 display:none;
 position:absolute;
 left:100%;
 top:0;
 margin:0;
 padding:0;
 z-index:3
}
.pure-menu-horizontal .pure-menu-children {
 left:0;
 top:auto;
 width:inherit
}
.pure-menu-active>.pure-menu-children,
.pure-menu-allow-hover:hover>.pure-menu-children {
 display:block;
 position:absolute
}
.pure-menu-has-children>.pure-menu-link:after {
 padding-left:.5em;
 content:"\25B8";
 font-size:small
}
.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after {
 content:"\25BE"
}
.pure-menu-scrollable {
 overflow-y:scroll;
 overflow-x:hidden
}
.pure-menu-scrollable .pure-menu-list {
 display:block
}
.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
 display:inline-block
}
.pure-menu-horizontal.pure-menu-scrollable {
 white-space:nowrap;
 overflow-y:hidden;
 overflow-x:auto;
 padding:.5em 0
}
.pure-menu-horizontal .pure-menu-children .pure-menu-separator,
.pure-menu-separator {
 background-color:#ccc;
 height:1px;
 margin:.3em 0
}
.pure-menu-horizontal .pure-menu-separator {
 width:1px;
 height:1.3em;
 margin:0 .3em
}
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
 display:block;
 width:auto
}
.pure-menu-heading {
 text-transform:uppercase;
 color:#565d64
}
.pure-menu-link {
 color:#777
}
.pure-menu-children {
 background-color:#fff
}
.pure-menu-heading,
.pure-menu-link {
 padding:.5em 1em
}
.pure-menu-disabled {
 opacity:.5
}
.pure-menu-disabled .pure-menu-link:hover {
 background-color:transparent;
 cursor:default
}
.pure-menu-active>.pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
 background-color:#eee
}
.pure-menu-selected>.pure-menu-link,
.pure-menu-selected>.pure-menu-link:visited {
 color:#000
}
.pure-table {
 border-collapse:collapse;
 border-spacing:0;
 empty-cells:show;
 border:1px solid #cbcbcb
}
.pure-table caption {
 color:#000;
 font:italic 85%/1 arial,sans-serif;
 padding:1em 0;
 text-align:center
}
.pure-table td,
.pure-table th {
 border-left:1px solid #cbcbcb;
 border-width:0 0 0 1px;
 font-size:inherit;
 margin:0;
 overflow:visible;
 padding:.5em 1em
}
.pure-table thead {
 background-color:#e0e0e0;
 color:#000;
 text-align:left;
 vertical-align:bottom
}
.pure-table td {
 background-color:transparent
}
.pure-table-odd td {
 background-color:#f2f2f2
}
.pure-table-striped tr:nth-child(2n-1) td {
 background-color:#f2f2f2
}
.pure-table-bordered td {
 border-bottom:1px solid #cbcbcb
}
.pure-table-bordered tbody>tr:last-child>td {
 border-bottom-width:0
}
.pure-table-horizontal td,
.pure-table-horizontal th {
 border-width:0 0 1px 0;
 border-bottom:1px solid #cbcbcb
}
.pure-table-horizontal tbody>tr:last-child>td {
 border-bottom-width:0
}

/* custom styles */

:root {
 --slide: 25em;
 --accent: #129fea;
 --dark-gray: #242424;
 --light-gray: #cad2d3;
 --darker-gray: #191919;
 --black-opacity: rgba(0,0,0,0.4);
 --light: white;
}

body {
 color:var(--light-gray);
 background: var(--dark-gray);
}

.pure-img-responsive {
 max-width:100%;
 height:auto
}

#layout,
#menu,
.menu-link {
 -webkit-transition:all 0.2s ease-out;
 -moz-transition:all 0.2s ease-out;
 -ms-transition:all 0.2s ease-out;
 -o-transition:all 0.2s ease-out;
 transition:all 0.2s ease-out
}
#layout {
 position:relative;
 left:0;
 padding-left:0
}
#layout.active #menu {
 left:var(--slide);
 width:var(--slide)
}
#layout.active .menu-link {
 left:var(--slide)
}
.content {
 margin:0 auto;
 padding:0 2em;
 max-width: 100em;
 margin-bottom: 5em;
 line-height:1.6em
}
.header {
 margin:0;
 color: var(--dark-gray);
 text-align:center
}
.header h1 {
 color: var(--accent);
 margin:.4em 0;
 padding-top: 0.5em;
 font-size: 2em;
 font-weight: bold;
 font-variant-caps: small-caps
}
.header h2 {
 font-weight:300;
 color: var(--light-gray);
 padding:0;
 margin-top:0
}
.content-subhead {
 margin: 5em 0 2em 0;
 font-weight:300;
 color: var(--light-gray)
}
#menu {
 margin-left:calc(var(--slide)* -1);
 width:var(--slide);
 height: 100vh;
 position:fixed;
 top:0;
 left:0;
 bottom:0;
 z-index:1000;
 background: var(--darker-gray);
 overflow-y:auto;
 -webkit-overflow-scrolling:touch
}
#menu a {
 color: var(--light-gray);
 border:none;
 padding:.6em 0.3em .6em 0.6em
}
#menu .pure-menu,
#menu .pure-menu ul {
 border:none;
 background:transparent
}
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
 border-top: 0.1em solid var(--dark-gray)
}
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
 background: var(--dark-gray);
 color: var(--light-gray);
}
#menu .pure-menu-selected,
#menu .pure-menu-heading {
 background: var(--accent);
}
#menu .pure-menu-selected a {
 color: var(--light)
}
#menu .pure-menu-heading {
 letter-spacing:.15em;
 text-transform:uppercase;
 color: var(--light);
 margin:0;
 text-align:center;
 padding:.6em 0.3em .6em 0.3em
}
.menu-link {
 position:fixed;
 display:block;
 top:0;
 left:0;
 background: black;
 background:rgba(0,0,0,0.42);
 font-size: 1em;
 z-index:10;
 width:2em;
 height:auto;
 padding:2.1em 1.6em
}
.menu-link:hover,
.menu-link:focus {
 background: black;
}
.menu-link span {
 position:relative;
 display:block
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
 background-color: var(--accent);
 width:100%;
 height:.2em
}
.menu-link span:before,
.menu-link span:after {
 position:absolute;
 margin-top:-.6em;
 content:" "
}
.menu-link span:after {
 margin-top:.6em
}
@media(min-width:800px) {
 .header,
 .content {
  padding-left:2em;
  padding-right:2em
 }
 #layout {
  padding-left:var(--slide);
  left:0
 }
 #menu {
  left:var(--slide)
 }
 .menu-link {
  position:fixed;
  left:var(--slide);
  display:none
 }
 #layout.active .menu-link {
  left:var(--slide)
 }
}

/* Sliders */

input[type=range] {
 -webkit-appearance:none;
 margin:0 0 0 0;
 width:100%;
 background: transparent;
}

input[type=range]:focus {
 outline:none
}

input[type=range]::-webkit-slider-runnable-track {
 width:100%;
 height: 0.4em;
 cursor:pointer;
 animate:0.2s;
 box-shadow: none
 background: var(--accent);
 border-radius: 0.3em;
 border: none
}

input[type=range]::-webkit-slider-thumb {
 box-shadow: none;
 border: 0.1em solid var(--light-gray)
 height: 2em;
 width: 2em;
 border-radius: 2em;
 background: var(--light-gray)
 cursor:pointer;
 -webkit-appearance:none;
 margin-top: 0.85em
}

input[type=range]:focus::-webkit-slider-runnable-track {
 background: var(--accent)
}

input[type=range]::-moz-range-track {
 width: 100%;
 height: 0.4em;
 cursor: pointer;
 animate:0.2s;
 box-shadow: none;
 background: var(--accent);
 border-radius: 0.3em;
 border: none
}

input[type=range]::-moz-range-thumb {
 box-shadow: none;
 border: 0.1em solid var(--accent);
 height: 2em;
 width: 2em;
 border-radius: 2em;
 background: var(--light-gray);
 cursor:pointer
}

input[type=range]::-ms-track {
 width:100%;
 height: 0.4em;
 cursor:pointer;
 animate:0.2s;
 background:transparent;
 border-color:transparent;
 color:transparent
}

input[type=range]::-ms-fill-lower {
 background: var(--light-gray);
 border: none;
 border-radius: 0.6em;
 box-shadow: none
}

input[type=range]::-ms-fill-upper {
 background: var(--light-gray);
 border: none;
 border-radius: 0.6em;
 box-shadow: none
}

input[type=range]::-ms-thumb {
 margin-top:0.1em;
 box-shadow: nonel
 border: 0.1em solid var(--accent);
 height: 2em;
 width: 2em;
 border-radius: 2em;
 background: var(--light-gray);
 cursor:pointer
}

input[type=range]:focus::-ms-fill-lower {
 background: var(--light-gray);
}

input[type=range]:focus::-ms-fill-upper {
 background: var(--light-gray);
}


.hide {
 display:none
}

/* footer */

footer {
 text-align:center;
 position: absolute;
 bottom: 1rem;
 width: 100%
}
footer a {
 display: inline-block;
 text-decoration: none
}

/* notification button */

.notification {
  position: fixed;
  right: 0.5em;
  top: 0.5em;
  background-color: var(--dark-gray);
  z-index:200;
  word-wrap: anywhere;
  float: right;
 }

/* notification message */

.message {
  position: fixed;
  right: 1em;
  bottom: 0.5em;
  z-index:200;
  float: right;
  color: var(--light);
}

.message-text {
  background-color: var(--dark-gray);
  border:0.2em solid var(--accent);
  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
  word-wrap: anywhere;
  font-weight: bolder;
  font-size: 120%;
  padding: 1em;
  border-radius: 0.5em;
  position: relative;
}

.close-button {
    content: 'X';
    position: absolute;
    right: -1em;
    top: -1em;
    width: 1.2em;
    padding: 0.1em 0.1em 0.1em 0.1em;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    font-weight: bold;
    background: var(--dark-gray);
    color: var(--light);
    border: 0.2em solid var(--accent);
    border-radius: 1em;
    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
}

.fadeout {
    animation: fadeOut 5s ease;
    opacity:0;
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

/* modal dialog */ 
 
.modal {
  position: fixed; /* Stay in place */
  z-index: 2000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: var(--black-opacity); /* Black w/ opacity */
}
.modal-content {
  -webkit-appearance:button;
  cursor:pointer;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--light-gray);
  font-size:90%;
  border:0.2em solid var(--accent);
  border-radius:6px;
  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
  padding: 1em;
  width: max-content;
  min-width: 30%;
  background-color: var(--dark-gray);
  margin: 10% auto;
  padding: 1rem
}

.table-header {
  font-weight: bold;
  font-size: 120%;
  text-align: center;
}

.table-header tr td {
  border-bottom: 0.1em solid var(--light-gray)
}

.modal-content table {
  border-spacing: 0.5em 1em;
}

/* overlapping hint button */

.hinted {
  position: relative;
}

.hint {
  cursor: pointer;
  width: 1rem;
  background: transparent;
  color: var(--dark-gray);
  padding: .5em .6em;
  border: none;
  box-shadow: none;
  position: absolute;
  top: 0em;
  right: 0em;
  line-height: 1.15em;
  font-size: 100%;
}

/* Spacing */
fieldset .pure-u-1 {
  margin-top: 1.5em
}

/* checkbox as a switch */

input[type=checkbox].switch {
    display: none;
}
label.switch.socket {
    position: relative;
    width: auto;
    padding-left: 4em;
}
span.switch.slider {
  display: inline-block;
}
label.switch.socket span.switch.slider:before {
    content: "";
    color: var(--darkgray);
    width: 3em;
    height: 1.4em;
    border-radius: 1em;
    position: absolute;
    left: 0;
    top: 0;
    border:0.2em solid var(--accent);
    box-shadow:inset 0 0.1em 1.1em 0 var(--accent)
}
label.switch span.switch.slider:after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: var(--accent);
    border-radius: 1em;
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    transition: 0.2s;
}
label.switch.socket input[type=checkbox]:checked + span.slider:before {
    background: var(--light-gray);
}

label.switch.socket input[type=checkbox]:checked + span.slider:after {
    background: var(--light);
    left: 1.9em;
}

/* Time setter */

.inline-input.inline-input.inline-input {
  display: inline-block;
  width: calc(100% - 5em)
}

.send-button {
 display:inline-block;
 font-family:inherit;
 font-size:100%;
 line-height: 1.15em;
 padding: .5em 1em;
 color: var(--dark-gray);
 border:none transparent;
 background-color: var(--light-gray);
 text-decoration:none;
 border-radius:2px;
 vertical-align: middle;
 margin-left: 1em;
 width: 2em;
 text-align: center;
}

.pure-button {
 color: var(--dark-gray);
 border:none transparent;
 background-color: var(--light-gray);
 margin: 0.5em 1em 0.5em 1em;
}

/* weekdays */

.week {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.week td {
  padding: 0
}
.weekday, .weekday-selected {
    font-size: min(4vw, 100%rem);
    text-align: center;
    margin: 0.2vw;
    padding: 0.2em;
    border-radius: 5em;
    border:0.2em solid var(--accent);
    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
    color: var(--light-gray)
}
.weekday-selected {
    background: var(--light-gray);
    color: var(--darker-gray);
}

/* Hide arrows */

input[type=number] {
  appearance: textfield;
}

/* fill all screen */

#layout { 
  min-height: 100vh; 
}

/* Text table */

.texttable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.texttable td {
  padding: 0
}

.value-name.value-name {
  width: 50%;
  padding-right: 1em;
}

/* Config */

input[type=file]::file-selector-button {
    display: none;
}

input[type=file]::-webkit-file-upload-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: -100%;
}

input[type=file]::-ms-browse {
    display: none;
}

.row-button.row-button.row-button {
  display: inline-block;
}

/* hr */

hr {
 margin: 0.5em 2em 0.5em 2em;
 color: var(--accent);
}

/* fonts */

@font-face {
  font-family: "icons";
  font-style: normal;
  font-weight: 400;
  src: url("/icons.woff2") format("woff2");
}
.hint, .icon {
  font-family: icons;
}
.icon {
  margin-right: 0.5em;
}