body {
	background-image: url("bg.jpg");
	background-color: black;
}

.cat-tab {
	table-layout:fixed;
}

.title {
    font-family: 'Roboto', sans-serif;
	font-size: 40pt;
	text-align: center;
	font-weight: bold;
	color: #eee;
	padding-top: 30px;
	text-shadow: 0px 0px 15px #000;
}

.subtitle {
    font-family: 'Roboto', sans-serif;
	font-size: 24pt;
	text-align: center;
	color: #eee;
	padding-top: 10px;
	padding-bottom: 30px;
	text-shadow: 0px 0px 15px #000;
}

.links {
    font-family: 'Roboto', sans-serif;
	font-size: 18pt;
	text-align: center;
	color: #eee;
	padding-top: 10px;
	padding-bottom: 30px;
	text-shadow: 0px 0px 15px #000;
}

.links a:link {
	color: lightgreen;
}

.links a:visited {
	color: green;
}

.links a:hover {
	color: limegreen;
}

.cat1 {
	background-image: url("tycho.png");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat2 {
	background-image: url("tde.png");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat3 {
	background-image: url("gc.png");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat4 {
	background-image: url("hvs.jpg");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat5 {
	background-image: url("exoplanet.png");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat6 {
	background-image: url("nova.jpg");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat7 {
	background-image: url("kilonova.png");
	background-size: 80px;
	transition: background-image 1s ease-in-out;
}

.cat1:hover {
	background-image: url("cat1.jpg");
	background-size: 80px;
}

.cat2:hover {
	background-image: url("cat2.jpg");
	background-size: 80px;
}

.cat3:hover {
	background-image: url("cat3.jpg");
	background-size: 80px;
}

.cat4:hover {
	background-image: url("cat4.jpg");
	background-size: 80px;
}

.cat5:hover {
	background-image: url("cat5.jpg");
	background-size: 80px;
}

.cat6:hover {
	background-image: url("cat6.jpg");
	background-size: 80px;
}

.cat7:hover {
	background-image: url("cat7.jpg");
	background-size: 80px;
}

.note {
    font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	text-align: center;
	color: #eee;
	padding-top: 20px;
	font-style: oblique;
	text-shadow: 0px 0px 15px #000;
}

.main {
	width:400;

	background-color:rgba(0,0,0,0.75);
	padding:15px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
	padding-left: -70px;
}
.hvr-fade {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
}

.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
	background-color: #2098d1;
	color: white;
}

[class^="hvr-"] {
    display: inline-block;
    vertical-align: middle;
	margin: 0.4em;
	padding: 1em;
	padding-bottom: 0;
    cursor: pointer;
    background: #333;
    text-decoration: none;
    color: #eee;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

p, [class^="hvr-"] {
    font-family: 'Roboto', sans-serif;
}

.titles {
	width: 200;
	height: 34;
}

.gits {
	margin-left: 0;
	width: 40;
	height: 34;
	padding: 0.5em;
	padding-top: 0.3em;
	padding-bottom: 0.7em;
}

.circle { 
	background-color:black;
	display:block;
	width:80px;
	height:80px;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,1) inset;
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,1) inset;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,1) inset;
	-o-box-shadow: 0px 0px 10px 5px rgba(0,0,0,1) inset;
	border-radius:80px;
}

.middiv {
	width: 50px;
}

.rightdiv {
	width: 60px;
}

.gh {
	width: 40px;
}