/* Basic CSS reset */

html,
body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #222;
    background: #f8f8f8;
}

input,
textarea {
    font-size: 1em;
    box-sizing: border-box;
    padding: 6px 8px;
}

button,
code,
kbd,
pre {
    font-size: 1em;
}

code,
kbd,
pre {
    font-family: 'Menlo', 'Monaco', monospace;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 2px 4px 1px 4px;
    background: rgba(0, 0, 0, .1);
}

pre {
    padding: 8px 12px;
}

p {
    line-height: 1.5em;
}

a {
    color: #222;
}

a:hover {
    color: #666;
}


/* util.css
 *  custom utility CSS library for projects by @thesephist */

/* margins */

.m0 {margin: 0}

.mt0, .my0 {margin-top: 0}
.mt1, .my1 {margin-top: .25rem}
.mt2, .my2 {margin-top: .5rem}
.mt3, .my3 {margin-top: .75rem}
.mt4, .my4 {margin-top: 1.5rem}
.mt5, .my5 {margin-top: 2.25rem}
.mt6, .my6 {margin-top: 3.25rem}

.mb0, .my0 {margin-bottom: 0}
.mb1, .my1 {margin-bottom: .25rem}
.mb2, .my2 {margin-bottom: .5rem}
.mb3, .my3 {margin-bottom: .75rem}
.mb4, .my4 {margin-bottom: 1.5rem}
.mb5, .my5 {margin-bottom: 2.25rem}
.mb6, .my6 {margin-bottom: 3.25rem}

.ml0, .mx0 {margin-left: 0}
.ml1, .mx1 {margin-left: .25rem}
.ml2, .mx2 {margin-left: .5rem}
.ml3, .mx3 {margin-left: .75rem}
.ml4, .mx4 {margin-left: 1.5rem}
.ml5, .mx5 {margin-left: 2.25rem}
.ml6, .mx6 {margin-left: 3.25rem}

.mr0, .mx0 {margin-right: 0}
.mr1, .mx1 {margin-right: .25rem}
.mr2, .mx2 {margin-right: .5rem}
.mr3, .mx3 {margin-right: .75rem}
.mr4, .mx4 {margin-right: 1.5rem}
.mr5, .mx5 {margin-right: 2.25rem}
.mr6, .mx6 {margin-right: 3.25rem}

/* paddings */

.p0 {padding: 0}

.pt0, .py0 {padding-top: 0}
.pt1, .py1 {padding-top: .25rem}
.pt2, .py2 {padding-top: .5rem}
.pt3, .py3 {padding-top: .75rem}
.pt4, .py4 {padding-top: 1rem}

.pb0, .py0 {padding-bottom: 0}
.pb1, .py1 {padding-bottom: .25rem}
.pb2, .py2 {padding-bottom: .5rem}
.pb3, .py3 {padding-bottom: .75rem}
.pb4, .py4 {padding-bottom: 1rem}

.pl0, .px0 {padding-left: 0}
.pl1, .px1 {padding-left: .25rem}
.pl2, .px2 {padding-left: .5rem}
.pl3, .px3 {padding-left: .75rem}
.pl4, .px4 {padding-left: 1rem}

.pr0, .px0 {padding-right: 0}
.pr1, .px1 {padding-right: .25rem}
.pr2, .px2 {padding-right: .5rem}
.pr3, .px3 {padding-right: .75rem}
.pr4, .px4 {padding-right: 1rem}

/* typography */

h1, h2, h3, h4, h5, h6 {font-weight: 400}
.bold {font-weight: bold}
.clean {text-decoration: none}
.underline {text-decoration: underline}
.f0 {font-size: .75rem}
.f1 {font-size: 1rem}
.f2 {font-size: 1.25rem}
.f3 {font-size: 1.6rem}
.f4 {font-size: 2rem}
.f5 {font-size: 3rem}
.text-start {text-align: start}
.text-end {text-align: end}
.text-center {text-align: center}

/* flex & layout */

.flex {display: flex}
.flex-row {flex-direction: row}
.flex-column {flex-direction: column}
.flex-wrap {flex-wrap: wrap}
.align-center {align-items: center}
.align-start {align-items: flex-start}
.align-end {align-items: flex-end}
.justify-center {justify-content: center}
.justify-start {justify-content: flex-start}
.justify-end {justify-content: flex-end}
.fill, .fill-width {width: 100%}
.fill, .fill-height {height: 100%}

/* page widths */

.page-xs {max-width: 480px}
.page-s {max-width: 600px}
.page-m {max-width: 800px}
.page-l {max-width: 1200px}
.page-xl {max-width: 1600px}

/* shadows */

.shadow1 {box-shadow: 0 2px 3px rgba(0, 0, 0, .36)}
.shadow2 {box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .34)}
.shadow3 {box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .32)}
.shadow4 {box-shadow: 0 5px 9px -2px rgba(0, 0, 0, .3)}
.shadow5 {box-shadow: 0 7px 12px -3px rgba(0, 0, 0, .28)}

/* list */

ul.list-reset,
ol.list-reset {
    padding-left: 0;
    list-style: none;
}

/* other utility */

.borderless {border: 0 solid transparent}
.rounded {border-radius: 4px}
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.hidden {display: none}
.pointer {cursor: pointer}
.auto-center {margin-left: auto; margin-right: auto}


/* DEFAULT VARIABLES */
body {
  --block-text-color: #222;
  --block-background-color: #fff;
  --block-accent-color: #00ae86;
  --block-shadow-color: #444;
}

/* BASIC BLOCK STYLES */
.block {
  display: block;
  color: var(--block-text-color);
  border: 3px solid var(--block-text-color);
  border-radius: 3px;
  padding: 4px 8px;
  background: var(--block-background-color);
  cursor: pointer;
  box-sizing: border-box;

  position: relative;
  top: -2px;
  left: -2px;
  transition: transform 0.2s;
  margin: 8px 6px 10px 6px;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.block.wrapper,
.block.wrapper.inline {
  display: inline-block;
  padding: 0;
}

.block.wrapper > * {
  margin: 0;
}

/* INTERACTIVE BLOCK STYLES */
.block::before {
  content: "";
  background: var(--block-background-color);
  border: 3px solid var(--block-text-color);
  border-radius: 3px;
  box-sizing: border-box;
  position: absolute;
  top: -3px;
  left: -3px;
  height: calc(100% + 6px);
  width: calc(100% + 6px);
  z-index: -1;
}

.block:hover,
.block:focus {
  transform: translate(2px, 2px);
}

.block::after {
  content: "";
  display: block;
  box-sizing: border-box;
  background: var(--block-shadow-color);
  border: 3px solid var(--block-text-color);
  border-radius: 3px;
  height: calc(100% + 6px);
  width: calc(100% + 6px);
  position: absolute;
  top: 3px;
  left: 3px;
  right: 0;
  z-index: -2;
  transition: transform 0.2s;
}

.block:hover::after,
.block:focus::after {
  transform: translate(-2px, -3px);
}

.block:active {
  color: var(--block-text-color);
  transform: translate(3px, 3px);
}

.block:active::after {
  transform: translate(-4px, -4px);
}

.block:focus {
  outline: none;
}

.block.fixed {
  cursor: initial !important;
}

.block.btn {
  font-weight: bold;
}

/* FIXED STYLES */
.block.fixed:hover,
.block.fixed:hover::before,
.block.fixed:hover::after,
.block.fixed:active,
.block.fixed:active::before,
.block.fixed:active::after,
.block.fixed:focus,
.block.fixed:focus::before,
.block.fixed:focus::after {
  transform: none !important;
}

/* ACCENT STYLES */
.block.accent {
  color: var(--block-background-color);
  background: var(--block-accent-color);
}

.block.accent::before {
  background: var(--block-accent-color);
}

/* INLINE STYLES */
.block.inline {
  display: inline-block;
  font-size: 0.75em;
  padding: 0 6px;
  margin: 3px 2px 1px 4px;
}
.block.inline::after {
  top: -1px;
  left: -1px;
}
.block.inline:hover,
.block.inline:focus {
  transform: translate(1px, 1px);
}
.block.inline:hover::after,
.block.inline:focus::after {
  transform: translate(-1px, -1px);
}
.block.inline:active {
  transform: translate(2px, 2px);
}

/* ROUND STYLES */
.block.round,
.block.round::before,
.block.round::after {
  border-radius: 30px;
}

.block.round::after {
  left: 1px;
}