:root {
	--normal-padding: 1em 2em;
	--tighter-padding: .5em;
}

body{
	background-color: #f8f9fb; /* fallback for non-P3 users. */
	background-color: color(display-p3 0.3 0.3 0.3 / 1);
	text-align: center;
	font-family: ATCArquette, sans-serif;
	height: 95vh;
}
.body-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	max-width: 800px;
}
header { 
	text-align: left;
	background: rgba(255,255,255,.5);
	padding: 1.5em;
	border-radius: 25px;
}
.unsupported {
	padding: 1.5em;
	background: rgba(255,255,255,.5);
}
h1 {
	margin-top: .1em;
	margin-bottom: .1em;
}
h3 {
	margin: .7em 0;
	font-size: 15px;
	font-weight: 400;
}
.output {
	margin: 1em 0;
}

.links a {
	display: inline-block; 
	border: 3px solid black;
	border-radius: 30px;
	padding: .5em 1.2em .5em;
	margin-top: .5em;
	margin-right: .25em;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
	color: #000;
	font-weight: 600;
	transition: all 0.1s ease;
	vertical-align: baseline;
}
.links a:hover{
	background-color: #000;
	color: #fff;
}
.cool-guy {
	margin-top:1em;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	color: #000;
	color: color(display-p3 0.1 0.1 0.1 / .8 );
	font-weight: 600;
}
.cool-guy a {
	color: #111;
	color: color(display-p3 0.1 0.1 0.1 / .6 );
}
.pasteboard {
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	color: #000;
	color: color(display-p3 0.1 0.1 0.1 / .8 );
	font-weight: 600;
}
fieldset{
	border: none;
}
output{
	display: inline-block;
	min-width: 2.5em;
}
label, output{
	padding: var(--tighter-padding);
	border-radius: 3px;
	
	color: #000;
	font-size: 1.1em;
}
input[type=range] {
	width: 250px;
}
label[for=r], output[for=r], label[for=g], output[for=g], label[for=b], output[for=b]{
	background-color: #fff; /* fallback for non-P3 users. */
	background-color: color(display-p3 1 1 1 / .5);
}

.output{
	padding: var(--normal-padding);
	background: rgba(255,255,255,.5);
	border-radius: 25px;
}
#colorValue {
	font-size: 2.5em;
}
.pasteboardPrompt {
	font-size: 1em;
	font-variant: small-caps;;
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	
	.unsupported {
		display: none;
	}
	:root
	{
	--pure-white: color(display-p3 1 1 1 / 1);
	}
}

@media screen and (max-width: 960px) {

	.links a {
		display: block;
	}
	.body-container {
		display: block;
		margin: 2em;
	}
}

/*
 * Font Family
 */
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Regular.woff") format('woff');
	font-weight: 400;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-RegularItalic.woff") format('woff');
	font-weight: 400;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Medium.woff") format('woff');
	font-weight: 500;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-MediumItalic.woff") format('woff');
	font-weight: 500;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Semibold.woff") format('woff');
	font-weight: 600;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Semibolditalic.woff") format('woff');
	font-weight: 600;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Bold.woff") format('woff');
	font-weight: 700;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Bolditalic.woff") format('woff');
	font-weight: 700;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Black.woff") format('woff');
	font-weight: 800;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-BlackItalic.woff") format('woff');
	font-weight: 800;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Light.woff") format('woff');
	font-weight: 300;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-LightItalic.woff") format('woff');
	font-weight: 300;
	font-style:italic;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Extralight.woff") format('woff');
	font-weight: 200;
}
@font-face {
    font-family: "ATCArquette";
    src: url("/font/ATCArquette-Extralightitalic.woff") format('woff');
	font-weight: 200;
	font-style:italic;
}