* {
    background: lightgray;
}
p {
	font-size: 18px;
}
img {
	width: 300px;
	height: auto;
	display: block;
	object-fit: cover;
}
#container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 400px 1fr;
    grid-template-rows: auto 1fr 60px auto;
	grid-gap: 10px;
	grid-template-areas:
	". header ."
	". info ."
	". button-area ."
	". footer .";
}
#header {
	grid-area: header;
	justify-self: center;
}
#button-area {
	grid-area: button-area;
	justify-self: center;
}
.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ecedab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ecedab;
	box-shadow:inset 0px 1px 0px 0px #ecedab;
	background-color:#FFCF01;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d9b503;
	display:inline-block;
	cursor:pointer;
	color:#00529C;
	font-family:Verdana;
	font-size:15px;
	font-weight:bold;
	padding:10px 30px;
	text-decoration:none;
    text-shadow:0px 1px 0px #ecedab;
    text-align: center;
}
.button:hover {
	background-color:#e0bb03;
}
.button:active {
	position:relative;
	top:1px;
}
#info {
	grid-area: info;
	justify-self: center;
	text-align: center;
}
#footer-header {
	grid-area: 1/1/2/3;
	text-align: center;
}
#footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 40px 1fr;
	grid-gap: 20px;
	grid-area: footer;
	justify-self: center;
	
}
#klubit {
	text-align: end;
}
#muut {
	text-align: start;
}