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

@media screen and (min-width : 1024px) {
    .intro{
        float: left;
        width: 35%;
	max-width: 550px
    }
    .intro h1 { margin-top: 25px }
 
    .robot{
        float: right;
        width: 65%;
	margin-top: 25px;
    }
}

@media screen and (min-width : 768px) {
    div.right, div.left { width: 50%; float: left; }
}

:root {
  --canvbgcol: #e9eae8;
  --canvhcol : #800000;
  --canvtcol : #101010;
  --white: #ffffff; 
  --h1col: #D2002E;
  --h2col: #50535a;
  --ppcol: #010101;
  --ibgcol: #fffdf0;
  --ipcol: #0f0f0f;
  --butcol: #202020;
  --butbgcol: #e9eae8;
  --linknorm : #00C000;
  --linkvisited : #C0606b;
  --linkhover : #C0000;
}

/* 
  --linknorm : #00ff00;
  --linkvisited : #ffc0cb;
  --linkhover : #ff000;

	butbgcol was #010101 */

/*"canvasback rgb(233, 234, 232)"*/

html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

input[type="number"] {
   width:50px;
	color: var(--butcol);
	background-color: var(--butbgcol);
}
input[type="text"] {
	color: var(--butcol);
	background-color: var(--butbgcol);
}
body{
	background-color: var(--ibgcol);
	margin: 0;
    overflow-y: scroll;
    height: 100%
}

	/* was background-color: #FFF */	

#wrapper {
	background-color: var(--ibgcol);		
	margin: 0 auto 0 auto;
	position: relative;
}

p {
    font-family: Arial;
    color: var(--ppcol);
    font-size: 16px;
    line-height: 20px;
}

.left {
    float: left;
}

.right {
    float: right;
}


.intro {
    padding: 0 50px 25px 50px;
	background-color: var(--ibgcol);
	color: var(--ipcol);
}

.intro h1 {
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--h1col);
}

.intro h2 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: solid 2px #e9eae8;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--h2col);
	font-size: 18px;
}

.robot {
    padding: 0 50px 25px 50px;
	background-color: var(--ibgcol);
	color: var(--ipcol);

}

.robot h2 {
	margin-top: 10px;
	padding-top: 10px;
	border-top: solid 2px #e9eae8;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--h2col);
	font-size: 18px;
}

.button {
	color: var(--butcol);
	background-color: var(--butbgcol);
}
	
#footer {
	clear: both;
	background-color: #50535a;
	padding: 25px 50px 25px 50px;
	min-height: 100px;
	color: #FFF;
}

#footer img {
    float: right;
}

#footer p {
	color: #FFF;
}

#footer a {
	text-decoration: none;
	color: #FFF;
}

#footer a:hover {
	color: #e9eae8;
	border-bottom: dotted 1px #888989;
}

.logo {
	position: absolute;
	right: 50px;
}

.clearfix {
	overflow: auto;
}

a:link {
  color: var(--linknorm);
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: var(--linkvisited);
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: var(--linkhover);
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}