body
{
	margin: 0px;
	background-color:#242526;
	color:white;
}

#header
{
	background-color: #3d3e40;
	
	display: flex;
	  	
  	/* center items horizontally */
  	align-items: center;
  	
  	/* center items vertically */
  	justify-content: space-between;
  	
  	padding: 10px 10%;
}

#header .logo
{
	color: white;
	text-decoration:none;
	display:block;
}

#header ul
{
	display:inline-block;
	
	margin-top: 0px;
	margin-bottom:0px;
}

#header ul li 
{
	display:inline-block;
}

#header ul li a
{
	display:block;
	padding: 10px;
	
	text-decoration:none;
	color: white;
	padding: 10px 20px;
	
	border-radius: 10px;
	
	transition-duration: 0.1s;
	transition-timing-function:linear;
}

#header ul li a:hover
{
	background-color: #6f7c80;
}

#page-content
{
	padding: 50px 100px;
}

#container 
{
	display: inline-block;
	font-size: 20px;
	line-height: 0.2;
}

#container a
{	
	display: block;
	border: 3px solid transparent;
	
	transition-duration: 100ms;
	transition-timing-function:linear;
}

#container a:hover
{	
	border: 3px solid #c4ffff;
	box-shadow:0 0 20px #293eff;
}

#footer
{
	background-color: black;
	color: #FFFFFF;
	
	text-align:center;
	padding: 50px;
}





.button-underline 
{ 
	display:inline-block;
	margin:0;
}

.button-underline:after
{
  display:block;
  content: '';
  border-bottom: solid 3px #c4ffff;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}

.button-underline:hover:after { transform: scaleX(1); }
.button-underline.fromRight:after{ transform-origin:100% 50%; }
.button-underline.fromLeft:after{  transform-origin:  0% 50%; }





.button-rotate
{	
	margin: 10px;

	text-align:left;
	background-color:#666666;

	transform: rotateY(10deg);
	
	transition-duration: 100ms;
	transition-timing-function:linear;
}

.button-rotate a
{
	padding:10px;
	display:block;
	
	color: white;
	text-decoration:none;
}

.button-rotate:hover
{
	transform: translate3d(0, 0, 100px);
	background-color:#FF3300;
	box-shadow:0 0 20px #db2b1f;
}