body { padding: 2rem; background: var(--dark); color: var(--light); font-size: 1.6rem; font-family: 'SegoeUI', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Tahoma, Geneva, Verdana, sans-serif; }

ul { padding: 0 0 0 2rem; }
ol { padding: 0 0 0 2rem; }
h1 { font-size: 150%; }
h2 { font-size: 133%; }
h3 { font-size: 125%; }
img { width: 100%; height: auto; }

a, .link, text-link { color: var(--blue-dark); text-decoration: none; border-bottom: 2px solid; cursor: pointer; }
a:hover, .link:hover, text-link:hover { color: var(--blue-light); }
.brand { border: 0 none; font-weight: 100; }
.brand a { border: 0 none; }

.actionbar,
action-bar { position: fixed; left: 0; top: 0; right: 0; display: flex; background: var(--darker); height: 5.8rem; align-items: center; }
.actionbar .brand,
action-bar .brand { padding: 0 0 0 2rem; margin: 0 auto 0 0; }
.actionbar .brand a,
action-bar .brand a { color: var(--light); }
.actionbar toggle-drawer,
action-bar toggle-drawer { padding: 0 2rem 0 0; }

toggle-drawer { width: 26px; height: 26px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin: 16px; }
toggle-drawer toggle-drawer-bar { display: block; position: absolute; height: 4px; width: 100%; background: var(--light); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
toggle-drawer toggle-drawer-bar:nth-child(1) { top: 0; }
toggle-drawer toggle-drawer-bar:nth-child(2),
toggle-drawer toggle-drawer-bar:nth-child(3) { top: 10px; }
toggle-drawer toggle-drawer-bar:nth-child(4) { top: 20px; }
toggle-drawer.active toggle-drawer-bar:nth-child(1) { top: 8px; width: 0%; left: 50%; }
toggle-drawer.active toggle-drawer-bar:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
toggle-drawer.active toggle-drawer-bar:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
toggle-drawer.active toggle-drawer-bar:nth-child(4) { top: 18px; width: 0%; left: 50%; }