body {
	font-family: 'Raleway';
	color: #EEE;
	background: #111 url('/images/back/fire.jpg');

    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: fixed;
	background-position:  center;

}

a {
	color: white;
	font-weight: bold;
}

div {
	/*DEBUG/ border: 1px solid red; */
}


img {
	max-width: 100%;
}

h1, h2, h3, h4 {
	font-family: 'Charmonman', cursive;
}

h1 {
	text-align: center;
}
/*
font-family: 'Berkshire Swash', cursive; */

.grid-container {
  display: grid;
  /*Define our columns */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 1em;
	margin: .5em;
	min-height: 100%;

  /* justify-content: space-evenly; */

}

.header, .footer {
  grid-column-start: 1;
  grid-column-end: 5;
	border-radius: 1em;
	background: rgba(0,0,0,.5);
}

.header h1 {

}

.footer {
	text-align: center;
	font-size: smaller;
	padding: .25em;
}


.column {
	border-radius: 2em;
	background: rgba(0,0,0,.5);
	width: 30em;
}

.column .headimage {
	text-align: center;
}

.column img {
	max-height: 300px;
	border-radius: 1em;
	padding: .5em;
}


@media (max-width: 2000px) {
	body {
	    	background-image: url("/images/back/fire.jpg@2000");
	}

	div {
		/*DEBUG/ border: 1px solid white; */
	}
}


@media (max-width: 1800px) {
	body {
	    	background-image: url("/images/back/fire.jpg@1800");
	}

	div {
		/*DEBUG/ border: 1px solid yellow; */
	}
	.column {
		width: auto;
	}
}


@media (max-width: 1200px) {
	body {
	    	background-image: url("/images/back/fire.jpg@1200");
	}

	div {
		/*DEBUG/ border: 1px solid pink; */
	}
}


@media (max-width: 900px) {
	body {
	    	background-image: url("/images/back/fire.jpg@900");
	}

	div {
		/*DEBUG/ border: 1px solid blue; */
	}

}


@media (max-width: 600px) {
	body {
	    	background-image: url("/images/back/fire.jpg@600");
	}

	div {
		/*DEBUG/ border: 1px solid green; */
	}
	.grid-container {
	  grid-template-columns: auto;
	  grid-gap: 1em;
		margin: .5em;
	}
	 .header, .footer {
	  grid-column-start: 1;
	  grid-column-end: 2;
	}
}