@charset "utf-8";
/* CSS Document */

body {
  background-image: url('Illusoryray_Background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#wrapper {
	max-width: 50%;
	margin: auto auto;
	padding-top: 75px;
}

#Title {
	float: initial;
    	background: #38AD86;
    	height: 35px;
}

#Home {
	float: left;
	background: #3CB371;
    	width: 22%;
    	height: 30px;
}

#Books {
	float: left;
	background: #66CDAC;
    	width: 22%;
    	height: 30px;
}

#Universes {
	float: left;
	background: #3CB371;
    	width: 34%;
    	height: 30px;
}

#About {
	float: right;
	background: #66CDAC;
   	width: 22%;
    	height: 30px;
}

#Paragraphs {
	float: left;
}	

.footer-text {
	padding-top: 300px;
	max-width: 50%;
	margin: auto auto;
}

.vertical-center {
	margin: 0;
	position: relative;
  	top: 20%;
	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	min-width: 300px;
}

.vertical-center.paragraphs {
	background: rgba(0, 128, 0, 0.1);
	text-shadow: 2px 2px 5px green;
}

.Boxes {
	margin: auto auto;
}

.Inviso {
	visibility: hidden;
}

h1 {
	color: #003300;
	text-align: center;
}

h2 {
	color: #003300;
	text-align: center;
}

h3 {
	color: black;
	font-size: 130%;
}

p.footer {
	color: black;
	text-align: center;
}

a {
  	text-decoration: none;
}

a.external {
	color: black;
	text-decoration: underline;
}

.dropdown {
  	display: inline-block;
  	position: relative;
}
.dropdown-content {
    	display: none;
    	position: absolute;
    	width: 100%;
    	overflow: auto;
	background: #C6FFB3;
    	box-shadow: 0px 8px 16px 0px green;/*rgba(0,0,0,0.2)*/
}
.dropdown:hover .dropdown-content {
    	display: block;
}
.dropdown-content a {
    	display: block;
    	color: #000000;
    	padding: 5px;
    	text-decoration: none;
}
.dropdown-content a:hover {
    	color: #FFFFFF;
    	background-color: #00A4BD;
}

.books-images {
	padding-top: 20px;
}

.books-text {
	font-size: 130%;
}

.progress {
	border-radius: 25px;
	width: 100%;
	background-color: #ddd;
}

.wip {
	border-radius: 25px;
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
}

.progress1 {
	width: 50%;
	background-color: #04AA6D;
}

.progress2 {
	width: 20%;
	background-color: #04AA6D;
}

.progress3 {
	width: 20%;
	background-color: #04AA6D;
}