jsheedy/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    <title>brown</title>
    <style type="text/css">
      html, body {
        height: 100%;
        background-color: brown;
        margin: 0px;
        padding: 0px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: 100%;
      }
      span {
        font-size: 25pt;
        font-family: 'Press Start 2P', cursive;
        color: white;
        height: 100px;
        line-height: 100px;
        white-space: nowrap;
        text-decoration: none;
        user-select: none;
      }
      #rgb {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>
      <span id='brown'>CSS BROWN</span>
      <span id='rgb'>LEGIT BROWN rgb(100,50,0)</span>
    </div>
    <script type="text/javascript">
      var css_brown = true;
      var body = document.getElementsByTagName('body')[0];
      var elements = document.getElementsByTagName('span');

      function click() {
        css_brown = ! css_brown;
        if (css_brown) {
          body.style.backgroundColor = 'brown';
          elements[0].style.display = 'block';
          elements[1].style.display = 'none';
        } else {
          body.style.backgroundColor = 'rgb(100,50,0)';
          elements[0].style.display = 'none';
          elements[1].style.display = 'block';
        }
      }

      var elements = document.getElementsByTagName('span');
      for(var i=0; i<elements.length; i++) {
        elements[i].onclick = click;
      }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
	<title>brown</title>
	<style type="text/css">
	html, body {
	height: 100%;
	background-color: brown;
	margin: 0px;
	padding: 0px;
	}
	div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	height: 100%;
	}
	span {
	font-size: 25pt;
	font-family: 'Press Start 2P', cursive;
	color: white;
	height: 100px;
	line-height: 100px;
	white-space: nowrap;
	text-decoration: none;
	user-select: none;
	}
	#rgb {
	display: none;
	}
	</style>
	</head>
	<body>
	<div>
	<span id='brown'>CSS BROWN</span>
	<span id='rgb'>LEGIT BROWN rgb(100,50,0)</span>
	</div>
	<script type="text/javascript">
	var css_brown = true;
	var body = document.getElementsByTagName('body')[0];
	var elements = document.getElementsByTagName('span');

	function click() {
	css_brown = ! css_brown;
	if (css_brown) {
	body.style.backgroundColor = 'brown';
	elements[0].style.display = 'block';
	elements[1].style.display = 'none';
	} else {
	body.style.backgroundColor = 'rgb(100,50,0)';
	elements[0].style.display = 'none';
	elements[1].style.display = 'block';
	}
	}

	var elements = document.getElementsByTagName('span');
	for(var i=0; i<elements.length; i++) {
	elements[i].onclick = click;
	}

	</script>
	</body>
	</html>