html,body {
  margin:0;
  background: rgb(0,25,50); /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000033', endColorstr='#0f376f'); /* for IE */
  background-image:-webkit-radial-gradient(90% 60%,ellipse farthest-side, rgba(0,86,255, 0.55) -10%, rgba(0,86,255, 0) 100%),
  -webkit-radial-gradient(0% 0%,ellipse farthest-side, rgba(200, 0, 255, 0.65) -10%, rgba(163, 115, 255, 0) 100%),
  -webkit-radial-gradient(50% 50%,ellipse farthest-side, rgba(255, 255, 255, 0.75) -60%, rgba(255, 255, 255, 0) 55%);
  background-repeat:no-repeat;
	width:100%;
	height:100%;
}

/* Container for buttons, content, AND title */
.centercontain {
  position:absolute;
  top:50%;
  margin-top:-220px;
  left:50%;
  margin-left:-300px;
}

/* Containter for buttons, AND content */
.center {
  background-color:rgba(255, 255, 255, 0.75);
	border: 5px solid rgb(210,210,255);
  width:600px;
  height:400px;
}

/* Container for ALL the buttons */
.buttons {
	float:left;
	z-index:2;
	position:absolute;
}

/* The buttons blue div container */
.buttons div {
	position: relative;
	height:100px;
	background-color:rgba(20,51,114,0.70);
	color:rgb(202,201,217);
	width:250px;
	transition: background-color 0.40s, width 0.1s, color 0.25s;
 }
 
/* THe buttons blue div container on hover */
 .buttons div:hover {
	background-color:rgba(80,111,174,1);
	color:rgb(237,236,252);
	width:275px;
 }

/* THe text inside buttons */
.buttons div span {
    display: block;
    vertical-align: middle;
		text-align: center;
		height:63px; /* (center/#buttons)-(paddingTop) */
		padding-top:37px;
		cursor:pointer;
		font-size:20px;
		font-family: 'Sniglet', cursive;
		font-weight:bold;
}

/* The text inside buttons on hover */
.buttons div span:hover {
	transition: width 0.1s;
}

/* Triangle */
.buttons div::before {
    content:"";
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:40px solid gray;
		position:absolute;
		margin-left:250px;
		transition: margin-left 0.1s, border 0.40s;
}

/* Triangle on hover */
.buttons div:hover::before {
    content:"";
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
		border-left:40px solid rgba(139,104,163,1);
		position:absolute;
		margin-left:275px;
}

/* Copyright */
.copy {
	float:left;
	bottom:0;
	position:absolute;
	color:gray;
}

/* Change stuff when buttons are reduced to triangles */
.buttons div.hidden {width:0px;color:rgba(255, 255, 255, 0);}
.buttons div.hidden span {width:0px;font-size:1px;}
.buttons div.hidden:hover span {width:250px;font-size:20px;}
.buttons div.hidden::before {margin-left:0px;}
.buttons div.hidden:hover {width:250px;color:rgb(237,236,252);}

/* The stuff to the right of buttons */
.content {
	margin-left:50px;
	margin-top:20px;
	margin-right:15px;
	margin-bottom:40px;
	overflow:auto;
	height:360px;/*Center-40*/
	font-family: 'Sniglet', cursive;	
	width:540px;
}

.content input[type=text], input[type=number], select, option, textarea {
	  border: 3px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 11px;
    background: rgba(255,255,255,0.85);
    margin: 0 0 10px 0;
		width:300px;
}

.content select { width: 250px; }
.content textarea { width:400px;height:290px; }

/* The content that is shown at the moment */
.in {
	transition: opacity 1s;
	opacity:1;
	position:absolute;
	z-index:1;
}

/* Previously loaded or preloaded content */
.out {
	transition: opacity 1s;
	opacity:0;
	position:absolute;
	z-index:0;
}

/* My name */
.title {
	text-align:center;
	letter-spacing: 10px;
	font-family: 'Sniglet', cursive;	
	color:white;
	font-size:24px;
}