body { background-color: #000033;
       color: #33ffff;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 200%;
       text-align: center;
}

button {
	padding: 10px 10px;
//	font-size: 1.2em;
	font-size:115%;
	cursor: pointer;
	width: 90%;
	border-radius: 8px;
}


header {
//      background-color: #FF0000;		
	height: 20%;

}

section {
	height: 47%;
//        background-color: #FFccaa;		
}

article {
        float:left;
//	background-color: #FF00FF;		
	width:40%;
	margin-left: 4%;
	margin-right: 4%;
}

figure {
	width: 40%;
	height: 80%;
//	background-color: #00FFFF;		
	float:right; 
	padding:1px;
	margin-top:1px;
	margin-bottom: 1px;
	margin-left: 4%;
	margin-right: 4%;
}

img	{
	z-index: -1;
}

h1	{
	margin-top:1px;
	margin-bottom: 1px;
	font-size:250%;"
	height:14%;
}

h3	{
	margin-top:1px;
	margin-bottom: 1px;
	font-size:150%;"
	height:12%;
}
footer {
//	background-color: #00FF00;		
	height: 20%;
//	position: absolute;
//	bottom: 2%;
	width: 99%;
}

/* Clear floats after the columns */
section::after {
	content: "";
	display: table;
	clear: both;
}

.centerimage {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

.warningyellow {
	color:orange;
}

.warningred {
	color:DeepPink;
}

@media only screen and (orientation: portrait) {
	header {
		height: 15%
	}
	h1	{		
		height: 15%
	}
	section {
		height: 40%;
	
	}
	article {
		width: 100%;
		height: 45%;
//	  }
	figure {
		width: 90%;
//		height: 45%;
	}
	h3	{		
		height: 10%
	}
	footer {
		height: 20%
	}
	.centerimage {
		width: 45%;
		} 
}

@media only screen and (max-width: 800px), (max-height: 800px) {
	body	{
		font-size:140%
	}
	h1	{
		font-size:180%;"
	}
	h3	{
		font-size:160%;"
	}
	figure {
		height: 35%;
		max-height: 300px;
	}
	img {
		max-height: 300px;
	}
}

@media only screen and (max-width: 600px), (max-height: 600px) {
	body	{
		font-size:100%
	}
	h1	{
		font-size:130%;"
	}
	h3	{
		font-size:110%;"
	}
	figure {
		height: 25%;
		max-height: 250px;
	}
	img {
		max-height: 250px;
	}
}

.button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.done {
	background-color:#ffddcc;
}

.todo {
	background-color:#77bbcc;
	height: 65%;
}

@media only screen and (min-width: 100px) and (orientation: portrait)  {
	button	{
		font-size:135%;
	}
}

@media only screen and (min-width: 800px) and (orientation: portrait)  {
	button	{
		font-size:150%;
	}
}

.bottom {
  width: 99%;
  position: absolute;
  bottom: 18px;
}

#demo {
margin-top: 0px;
margin-bottom: 0px;
}

.cw10p {
  width: 10%;
}

.cw15p {
  width: 15%;
}

.cw20p {
  width: 20%;
}

.cw30p {
  width: 30%;
}

.cw50p {
  width: 50%;
}

.cw60p {
  width: 60%;
}

.cw70p {
  width: 70%;
}