@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: FFF;
  src: url(Fonts/FFF_Tusj.ttf);
}

body 
	{ 
 	background-color: #faf6eb;
	background-image: url("Images/rusty_metal.png");
	margin-left: auto;
	margin-right: auto;
  	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-size: medium;
	width: 100%;
	}

h1
	{
	font-family: FFF,serif;
	font-size: 500%;
	letter-spacing: 3px;
 	 background: -webkit-linear-gradient(#de5b14, #ffdf5e);
	 -webkit-background-clip: text;
 	 -webkit-text-fill-color: transparent;
	}

h2
	{
	font-family: "Arial Black", sans-serif;
	font-size: 200%;
	color: #47372e;
	text-align: left;
	}

a:link, a:visited
	{
	color: #de5b14;
	text-decoration: none;
	}

a:hover
	{
	color: #de5b14;
	text-decoration: none;
	font-weight: bold;
	}

#wrapper
	{
	width: 100%;
	padding: 20px;
	}

header
	{
	background-color: #47372e;
	padding: 20px;
	text-align: center;
	width: 100%;
	min-width: 500px;
	}

#content1
	{
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	color: black;
	width: 100%;
	min-width: 500px;
	}

#commentbox
	{
	width: 500px;
	height: 200px;
	}

@media only screen and (min-width: 768px) {
  /* For desktop: */

#wrapper
	{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .1fr .1fr .1fr;
	grid-template-areas:
	"hd hd"
	"content1 content2"
	"comment content2";
	padding: 20px;
	}

header
	{
	grid-area: hd;
	background-color: #47372e;
	text-align: center;
	}

#content1
	{
	grid-area: content1;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	color: black;
	}

#content1 img
	{
	width: 100%
	}

#content2
	{
	grid-area: content2;
	padding-left: 40px;
	}


#content2 img
	{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

#comment
	{
	grid-area: comment;
	}

#commentbox
	{
	width: 94%;
	height: 200px;
	}

#answerbox
	{
	width: 50px;
	}
}