:root {
  --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Roboto Slab', serif;

  --color-brand: #FCD561;
  --color-brand-light: #ffefbe;
  --color-gray-dark: #888;
  --color-gray: #91949D;
  --color-gray-light: #F1F2F3;
  --color-light: #F7F7F7;
  --color-white: #fff;
  --color-dark: #333336;
  --color-black: #000;
  --color-error: #FF6060;
  --color-green: #51B71D;

  --color-brand-rgb: 252, 213, 97;
  --color-brand-hover-rgb: 253, 223, 118;
  --color-brand-pressed-rgb: 255, 232, 162;
  --color-brand-light-rgb: 255, 239, 190;

  --color-label-red: #FFF0EF;
  --color-label-green: #E3FFE1;
  --color-label-blue: #E7F6FF;
}

/*
  * Media queries breakpoints
  * ======================================================================== */

@custom-media --mobile (max-width: 768px);
@custom-media --notMobile (min-width: 769px);

/*
  * Styles
  * ======================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

input,
button,
textarea,
select {
  font: inherit;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

html {
	width: 100%;
	height: 100%;
	background: #fff;
}

html.grayscale {
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: gray; /* IE6-9 */
	filter: grayscale(100%);
}

body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-main);
	font-size: 1rem; /* ~16px; */
	line-height: 1.5;
	color: var(--color-dark);
	font-display: swap;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

body.no-scroll {
	overflow: hidden;
}

a {
	color: inherit;
}

button {
	cursor: pointer;
	user-select: none;
	outline: none;
}

@media (min-width: 400px) {
	body {
		font-size: 16px;
	}
}

@media print {
  .no-print, .no-print * {
    display: none !important;
  }
}