body {
	background-color: #e9ddcb;
	color: #8d3113;
	font-size: 1em;
	max-width: 100%;
}

#header {
	margin-left: auto;
	margin-right: auto;
}

input[type="button"]
{
	font-size: .5em;
	padding: 1em;
    display:block;
    background-color: #c76838;
    color:white;
    border: none;
    outline:none;
    margin-bottom: 1em;
}

input[type="button"]:active {
	background-color: #8d3113;
	border: none;
}

.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}

#gameArea {
	display: flex;
	flex-wrap: wrap;
}

#msgArea {
	background-color: #371f17;
	color: #c76838;
	overflow-y: scroll;
	width: 100%;
	height: 5em;
}

#msgArea p {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: .2em;
	padding-bottom: .2em;
	margin: 0;

}

#msgArea p:first-child {
	padding-top: .8em;
}

#msgArea p:last-child {
	padding-bottom: .8em;
}

#cofyArea {
	box-sizing: border-box;
	padding-left: 1em;
}

#goalArea {
	border-top: .1em solid;
	border-bottom: .1em solid;
	box-sizing: border-box;
	padding-left: 1em;
}

#goalArea h2{
	font-family: sans-serif;
	font-size: 1em;
}

#workArea {
	box-sizing: border-box;
	padding-left: 1em;
}

@media only screen and (min-width: 768px) {
	body {
		font-size: 1em;
	}

	input[type="button"]
	{
		font-size: .8em;
	}

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    #goalArea {
		border-right: .1em solid;
		border-left: .1em solid;
		border-top: 0;
		border-bottom: 0;
		box-sizing: border-box;
		padding-left: 1em;
	}

}

/*[class^="col-s"] {
	height: auto;
}*/