/*

This CSS file was written by Matt "MCFAN" Gibson for

http://www.mattgibson.id.au/

Home Page

*/

:root
{
	--main-blue: #003f87;
	--main-brown: #d2b58d;
}


#intro, #added-lately
{
	background-color: var(--main-brown);
	border: #999 1px solid;
	border-radius: 5px;
	font: 13px Verdana, Geneva, sans-serif;
	height: 150px;
	margin: 15px 10px;
	padding: 15px 17px 15px;
	width: 900px;
}

#home-page marquee
{
	height: 120px;
}

#home-page a img
{
	border: none;
}

.hp-container
{
	display: flex;
	justify-content: center;
	align-items: top;
}

.hp-container div
{
	flex: 1 1 320px;
	padding: 10px;
	text-align: center;
}

.hp-container img
{
	height: 240px;
}

a.hp-links
{
	border: 2px solid var(--main-brown);
	box-sizing: border-box;
	color: #000;
	display: block;
	font-size: 15px;
	margin: 5px auto;
	padding: 8px;
	position: relative;
	text-decoration: none;
	transition: 0.5s;
	z-index: 1;
	width: 300px;
}

a.hp-links:hover
{
  color: #fff;
  z-index: 1;
}

a.hp-links:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #000;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}

a.hp-links:hover:before
{
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: right;
}

a.hp-links:after
{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #000;
  z-index: -1;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}

a.hp-links:hover:after
{
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: left;
}