:root {	
	/* colors */
	--color-black: #000000;
	--color-black-rgb: 0, 0, 0;
	--color-white: #FFFFFF;
	--color-white-rgb: 255, 255, 255;
	--color-red: #FF0000;
	--color-red-rgb: 255, 0, 0;
	--color-gray: #888;
	--color-gray-rgb: 255, 0, 0;
	
	/* typo */
	--fontsize-base: 14px;
	--fontfamily-base: Arial, Helvetica, sans-serif;
	
	--fontsize-h1: 1.8rem;
	--fontsize-h2: 1.5rem;
	--fontsize-h3: 1.25rem;
	--fontsize-h4: 1.1rem;	
	
	--fontsize-body-1: 1rem;
	--fontsize-body-2: .9rem;
	--fontsize-body-3: .8rem;
	--fontsize-nano: 10px;	
	
	--fontweight-normal: normal;	
	--fontweight-bold: 600;
	
	--lineheight-xs: 1;
	--lineheight-sm: 1.15;
	--lineheight-md: 1.25;
	--lineheight-normal: 1.4;
	--lineheight-lg: 1.6;	
}

/* general */
*,:before,:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;	
}

*:focus { outline: none!important; }

html, body {
	min-width: 320px;	
	min-height:100%;		
	background-color: var(--color-black);	
	color: var(--color-white);
	font-family: var(--fontfamily-base);
	font-weight: var(--fontweight-normal);
	font-size: var(--fontsize-base);
	line-height: var(--lineheight-normal);	
	-webkit-overflow-scrolling: touch;
}
html.touch { cursor: pointer; }

a, a .svg, button, .bt, button .svg, .bt .svg {		
	-webkit-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-ms-transition: 0.2s all;
	transition: 0.2s all;
}

/* headings */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p { 
	margin: 0 0 1rem 0;
	font-family: var(--fontfamily-base);
	font-weight: var(--fontweight-normal);
	color: var(--color-white);
}

h1,.h1 { font-size: var(--fontsize-h1); line-height: var(--lineheight-sm); }
h2,.h2 { font-size: var(--fontsize-h2); line-height: var(--lineheight-sm); }
h3,.h3 { font-size: var(--fontsize-h3); line-height: var(--lineheight-md); }
h4,.h4 { font-size: var(--fontsize-h4); line-height: var(--lineheight-normal); }

/* text */
p { font-size: var(--fontsize-body-1); line-height: var(--lineheight-normal); }
.body-1 { font-size: var(--fontsize-body-1); line-height: var(--lineheight-normal); }
.body-2 { font-size: var(--fontsize-body-2); line-height: var(--lineheight-normal); }
.body-3 { font-size: var(--fontsize-body-3); line-height: var(--lineheight-normal); }
.nano { font-size: var(--fontsize-nano); line-height: var(--lineheight-md); }

/* weights */
strong, .strong, b { font-weight: var(--fontweight-bold)!important; }

/* line-heights */
.lh-xs { line-height: var(--lineheight-xs)!important; }
.lh-sm { line-height: var(--lineheight-sm)!important; }
.lh-md { line-height: var(--lineheight-md)!important; }
.lh-normal { line-height: var(--lineheight-normal)!important; }
.lh-lg { line-height: var(--lineheight-lg)!important; }

/* links */
a, a:visited, a:focus {
	color: var(--color-red);
	text-decoration: underline;
}
a:hover {
	filter: brightness(70%);	
}

/* text colors */
.text-default { color:var(--color-black)!important; }
.text-red { color:var(--color-red)!important; }
.text-gray { color:var(--color-gray)!important; }
.text-white { color:var(--color-white)!important; }
.text-black { color:var(--color-black)!important; }

/* bg colors */
.bg-transparent { background-color: transparent!important; }
.bg-default { background-color: var(--color-black)!important; }
.bg-red { background-color: var(--color-red)!important; }
.bg-gray { background-color: var(--color-gray)!important; }
.bg-white { background-color: var(--color-white)!important; }

/* border colors */
.border-default, .border-default::after { border-color: var(--color-black)!important; }
.border-red, .border-red::after { border-color: var(--color-red)!important; }
.border-gray, .border-gray-light::after { border-color: var(--color-gray)!important; }
.border-white, .border-white::after { border-color: var(--color-white)!important; }

/* margins */
.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: 0.25rem!important; }
.mt-2 { margin-top: 0.5rem!important; }
.mt-3 { margin-top: 1rem!important; }
.mt-4 { margin-top: 1.5rem!important; }
.mt-5 { margin-top: 3rem!important; }

.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: 0.25rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-3 { margin-bottom: 1rem!important; }
.mb-4 { margin-bottom: 1.5rem!important; }
.mb-5 { margin-bottom: 3rem!important; }

/* paddings */
.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: 0.25rem!important; }
.pt-2 { padding-top: 0.5rem!important; }
.pt-3 { padding-top: 1rem!important; }
.pt-4 { padding-top: 1.5rem!important; }
.pt-5 { padding-top: 3rem!important; }

.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: 0.25rem!important; }
.pb-2 { padding-bottom: 0.5rem!important; }
.pb-3 { padding-bottom: 1rem!important; }
.pb-4 { padding-bottom: 1.5rem!important; }
.pb-5 { padding-bottom: 3rem!important; }