:root {
    --space-big: 1.0em;
    --space-mid: 1.0ch;
    --space-lil: 0.5ch;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.ver, .hor { display: flex; }
.ver { flex-direction: column; }
.hor { flex-direction: row;    }

.fill-width { width: 100%; }
.fill-height { height: 100%; }
.ver > .fill, .hor > .fill { flex-grow: 1; }

.wrap   { flex-wrap:   wrap; }
.nowrap { flex-wrap: nowrap; }

.ver.y-centered, .hor.x-centered { justify-content: center;     }
.ver.x-centered, .hor.y-centered { align-items:     center;     }
.ver.top, .hor.left              { justify-content: flex-start; }
.hor.top, .ver.left              { align-items:     flex-start; }
.ver.bottom, .hor.right          { justify-content: flex-end;   }
.hor.bottom, .ver.right          { align-items:     flex-end;   }

.to-edges { justify-content: space-between; }

.big-gap { gap:     var(--space-big); }
.big-pad { padding: var(--space-big); }
.big-mar { margin:  var(--space-big); }

.mid-gap { gap:     var(--space-mid); }
.mid-pad { padding: var(--space-mid); }
.mid-mar { margin:  var(--space-mid); }

.lil-gap { gap:     var(--space-lil); }
.lil-pad { padding: var(--space-lil); }
.lil-mar { margin:  var(--space-lil); }

.stickable {
    position: relative;
    overflow: visible;
}
.sticky { position: sticky; }
.sticky.top { top: 0; }
.sticky.left { left: 0; }
.sticky.right { right: 0; }
.sticky.bottom { bottom: 0; }

code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #eee;
    border-radius: 3px;
}

input[type="checkbox"], input[type="radio"] {
    height: 13px;
    width: 13px;
}

iframe[title="Feedback Form"] {
    position: fixed;
    bottom: 0;
    right: 0;
    border: none;
    height: 265px;
    width: 280px;
    background: transparent;
    z-index: 10;
}