.black-red{
    margin-top:20px;
    margin-bottom:20px;
    margin:20px auto;
    display:flex;
    justify-content:Center;
    z-index:2;
    position:relative;
}

.black-red div:first-child{
    display:inline-block;
    padding:5px 10px;
    color:#FFF;
    background:#000;
    width:120px;
    text-align:center;
}

.black-red div:last-child{
    display:inline-block;
    padding:5px 10px;
    color:#000;
    background:#fff;
    width:120px;
    text-align:center;
}

#main-wrap-area{
    position:relative;
	/*height:100vh;*/
	padding-top:10vh;
}

#backgroundDisplay{
    position:absolute;
    width:50%;
    margin:0px;
    top:0px;
    left:0px;
    z-index:1;
    height:100%;
    direction:ltr;
    display:flex;
    align-items:flex-end;
    padding:30px;
	box-sizing:border-box;
	display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr;
}

#backgroundDisplay p{
	font-family:"Times New Roman", Times, serif !important;
	font-size:18px !important;
}

p.font2{
	font-family:Verdana, Geneva, sans-serif !important;
	font-size:16px !important;
}

#foregroundDisplay{
    position:absolute;
    width:50%;
    margin:0px;
    top:0px;
    right:0px;
    z-index:1;
    min-height:85vh;
    display:flex;
    align-items:flex-end;
    padding:30px;
	box-sizing:border-box;
	display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr;
}

#swap{
     background:rgba(0,0,0,0.9);
     color:#fff;
     border:0px;
     padding:5px 10px;
     font-weight:bold;
     font-size:1.5em;
}

#swap:focus{
	border:0px solid transparent;
	outline:none;
}
#main-form{
    width:100%;
    margin-top:40px;
    margin-bottom:40px;
    position:relative;
    z-index:2;
    position:relative;
}

#main-form label {
	position: absolute;
}

#main-form label > span {
		display: inline-block;
		padding: .2em .5em;
		border-radius: .3em .3em 0 0;
		background: rgba(0,0,0,.5);
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

#main-form label.background {
		right: 50%;
		text-align: left;
	}

#main-form label.background > span {
			margin-left: 1em;
		}

#main-form label.foreground {
		left: 50%;
		text-align: right;
	}

#main-form label.foreground > span {
			margin-right: 1em;
		}

#swipe{
	text-align: center;
    position: relative;
	z-index: 10;
	padding-top:20px;
}

#main-form input {
		position: relative;
		display: block;
		min-width: 14em;
		width: 8em;
		padding: .4em .5em .4em;
		margin-top: -.1em;
		border: thin solid rgba(0,0,0,.3);
		background: hsla(0,0%,90%,.9);
		color: #333;
		text-shadow: 0 .05em 1px white;
		font: 150% Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace;
		box-shadow: .05em .1em .2em rgba(0,0,0,.4) inset;
	}

#main-form input#background {
			padding-right: 2em;
			margin-right: -.1em;
			border-radius: .3em 0 0 .3em;
			text-align: right;
		}

#main-form input#foreground {
			padding-left: 2em;
			margin-left: -.1em;
			border-radius: 0 .3em .3em 0;
		}

#main-form output {
	display: block;
	position: relative;
	width: 3em;
	padding: 1em 0;
	border: thin solid rgba(0,0,0,.4);
	margin: -.1em auto 0;
	background: hsl(0, 0%, 50%) -35% -35%;
	background-size: 142% 142%;
	text-align: center;
	color: white;
	text-shadow: 0 -.06em .05em rgba(0,0,0,.5);
	font: bold 170%/1 'Arial Unicode MS', sans-serif;
	letter-spacing: -.05em;
	box-shadow: .05em .1em .2em rgba(0,0,0,.4),
	            -.1em -.1em .5em rgba(0,0,0,.4) inset,
	            0 .3em hsla(0,0%,100%,.2) inset;
	border-radius: 50%;
}

#main-form output strong {
		color: white !important;
	}

#main-form output .error {
			position: absolute;
			bottom: 1em;
			left: 0;
			right: 0;
			opacity: .8;
			text-align: center;
			font-size: 45%;
			letter-spacing: normal;
		}

#main-form .color-display {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: -1;
	padding: 13em 1em 1em;
}

#backgroundDisplay.color-display h1{
    font-size:36px;
    font-weight:bold;
    line-height:1.2em;
    color:inherit;
}

#backgroundDisplay.color-display h1,
	#backgroundDisplay.color-display p {
		max-width: 30rem;
		margin-top: 0;
        color:inherit;
	}

	#backgroundDisplay.color-display p {
		font-size: 16px;
        line-height:1.2em;
        color:inherit;
	}

	#backgroundDisplay.color-display a:hover {
		color: black;
		text-decoration: underline;
        color:inherit;
	}
    
    #backgroundDisplay.color-display a {
		text-decoration: underline;
        color:inherit;
	}

    #results {
	position: absolute;
	left: 50%;
	width: 15em;
	padding: 1em 1.5em;
	border: 1px solid gray;
	border-radius: .5em;
	margin-left: -9em;
	margin-top: .7em;
	box-shadow: .1em .1em .8em -.1em black;
	background: white;
	text-align: left;
	font-size: 100%;
	transform: scale(0);
	transform-origin: top;
	transition: .4s transform;
}

output:focus + #results,
output:hover + #results {
	transform: none;
	transition-timing-function: cubic-bezier(.5,0,.7,1.8);
}

	#results:before,
	#results:after {
		content: '';
		position: absolute;
		top: -15px;
		left: 50%;
		width: 0;
		height: 0;

	}

	#results:before {
		margin-left: -17px;
		margin-top: -2px;
		border: 17px solid transparent;
		border-top-width: 0;
		border-bottom-color: gray;
	}

	#results:after {
		margin-left: -16px;
		margin-top: -1px;
		border: 16px solid transparent;
		border-top-width: 0;
		border-bottom-color: white;
	}

	#results p,
	#results ul {
		margin: 0;
	}

	#results ul {
		padding-left: 1em;
	}

#main-wrap-area{
	display:grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 1fr 1fr;
	padding-top:0px;
}

#contrast-form{
	grid-column: 1/3;
	grid-row:1/2;
	padding-top:30px;
	align-self:center;
}

#main-form{
	margin-top:20px;
	margin-bottom:20px;
	z-index:11;
}

#swipe{
	padding-top:0px;
}

#backgroundDisplay{
	grid-column:1/2;
	grid-row:1/3;
	width:100%;
	min-height:85vh;
	position:relative;
}


#foregroundDisplay{
	grid-column:2/3;
	grid-row:1/3;
	width:100%;
	position:relative;
}