screen-0.4.0.css

/* https://screencss.com/ */

/* 6 (0.375), 7 (0.4375), 8 (0.5), 9 (0.5625), 10 (0.625), 11 (0.6875), 12 (0.75), 14 (0.875),
16 (1), 18 (1.125), 21 (1.3125), 24 (1.5), 36 (2.25), 48 (3), 60 (3.75), 72 (4.5)  px (em) */

@import url('https://meyerweb.com/eric/tools/css/reset/reset.css');
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700');

html {
	background-color: white;
}

body {
	font-size: 16px;
	color: black;
	font-family: 'Inter', -system-ui, system-ui, sans-serif;
	font-size-adjust: none;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1.5;
	max-width: 720px;
	margin: 48px auto;
	padding: 0 48px;

	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;

	-moz-font-feature-settings:    "calt" 1, "kern" 1, "liga" 1;
	-ms-font-feature-settings:     "calt" 1, "kern" 1, "liga" 1;
	-o-font-feature-settings:      "calt" 1, "kern" 1, "liga" 1;
	-webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
	font-feature-settings:         "calt" 1, "kern" 1, "liga" 1;
}

a,
a:link,
a.link,
a:visited,
a.visited,
a:hover,
a.hover,
a:active,
a.active,
a:focus,
a.focus {
	color: blue;
}

a.inherit {
	color: inherit;
}

a.inherit:hover {
	color: blue;
}

img {
	max-width: 100%;
}

h1,
.h1 {
	line-height: 1.1;
}

h2,
.h2 {
	line-height: 1.3;
}

h3,
.h3 {
	line-height: 1.4;
}

h4,
.h4 {
	line-height: 1.5
}

h1, h2, h3 {
	margin: 1.5em 0 0.5em 0;
}

hr,
.hr {
	display: flex;
	align-items: center;
	text-align: center;
	border: none;
	margin: unset;
	margin: 23px auto 24px auto;
}

hr span,
.hr span {
	margin: 0 10px;
}

hr:before,
.hr::before,
hr:after,
.hr::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid lightgrey;
}

p,
.p,
.margin {
	margin: 12px 0;
}

.pp,
.xp,
.xmargin {
	margin: 24px 0;
}

.ppp,
.xxp,
.xxmargin {
	margin: 48px 0;
}

.box,
.padding {
	padding: 12px;
}

.xpadding {
	padding: 24px;
}

.xxpadding {
	padding: 48px;
}

s,
del,
.del,
.strike,
.delete {
	text-decoration: line-through;
}

sub,
.sub {
	vertical-align: sub;
}

sup,
.sup {
	vertical-align: super
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
b,
.b,
.bold,
strong,
.strong {
	font-weight: 700;
}

.xb,
.xbold {
	font-weight: 800;
}

.xxb,
.xxbold,
.black {
	font-weight: 900;
}

i,
.i,
.italic,
em,
.em,
.emphasis {
	font-style: italic;
}

mark,
.mark,
.highlight {
	background-color: yellow;
}

.box {
	border-radius: 5px;
}

.box.action { background-color: AliceBlue; }

.box.info { background-color: Moccasin; }
.box.info a { color: Chocolate; }

.box.error { background-color: Salmon; }
.box.error a { color: DarkRed; }

.box.success { background-color: SeaGreen; color: white; }
.box.success a { color: white; }

.xs,
.xsmall {
	font-size: 12px;
}

.s,
small,
.small {
	font-size: 14px;
}

h4,
.h4,
.m,
.medium {
	font-size: 16px;
}

h3,
.h3,
.l,
.large {
	font-size: 18px;
}

h2,
.h2,
.xl,
.xlarge {
	font-size: 24px;
}

h1,
.h1,
.xxl,
.xxlarge {
	font-size: 48px;
}

.mono,
code,
.code {
	font-family: 'Roboto Mono', monospace;
}

code,
.code {
	background-color: gainsboro;
	border-radius: 3px;
	padding: 0 3px;
}

.hidden { display: none; }
.block { display: block; }
.inline { display: inline-block; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.grey,
.gray,
a.grey,
a.gray,
.grey a,
.gray a {
	color: grey;
}

.lightgrey,
.lightgray,
a.lightgrey,
a.lightgray,
.lightgrey a,
.lightgray a {
	color: lightgrey;
}

ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ol.nostyle, ul.nostyle { list-style-type: none; }
li { margin-left: 20px; }
ol.nostyle > li, ul.nostyle > li { margin-left: 0; }

table {
	width: 100%;
	text-align: left;
}

table th {
	font-weight: 600;
}

table th,
table td {
	padding: 5px 0;
	border-bottom: 1px solid #ccc;
}

table .nostyle td { border-bottom: none; }

.emoji {
	max-height: 24px;
	vertical-align: top;
}

.s.emoji,
.s .emoji,
small.emoji,
small .emoji,
.small.emoji,
.small .emoji {
	max-height: 21px;
}

.xs.emoji,
.xs .emoji,
.xsmall.emoji,
.xsmall .emoji {
	max-height: 18px;
}

.narrow {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

form,
input,
button,
textarea {
	font-family: 'Inter', -system-ui, system-ui, sans-serif;
	-webkit-appearance: none;
}

textarea {
	height: 48px;
	width: 100%;
	width: -webkit-fill-available;
	border-color: grey;
	border-radius: 3px;
	padding: 6px;
}

textarea:focus {
	outline-color: blue;
}

button,
input[type="button"],
input[type="submit"] {
	background-color: grey;
	line-height: 24px;
	padding: 0 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	color: white;
}

button.primary,
input[type="button"].primary,
input[type="submit"].primary {
	background-color: blue;
}

button.disabled,
input[type="button"].disabled,
input[type="submit"].disabled {
	background-color: lightgrey;
	cursor: default;
}

@media screen and (max-width: 816px) {
	/* 720 + (48 * 2) = 816 */

	body {
		margin: 24px auto;
		padding: 0 24px;
	}

	.wide {
		display: none;
	}

	.narrow {
		display: inline;
	}
}