/* display compatibility */

html {
height: 100%;
}

/* navigation bar on the top*/

#navigation {
z-index: 10;
position: fixed;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 14px;
top: 0;
width: 100%;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 1);
}

#navigation a {
	color: rgba(193, 203, 230, 1);
	text-decoration: none;
}

#navigation a:link {
	color: rgba(132, 151, 208, 1);
}

#navigation a:visited {
	color: rgba(132, 151, 208, 1);
}

#navigation a:hover {
	color: rgba(200, 222, 72, 1);
}

/* background */

.zero-project {
padding: 0;
margin: 0;
color: #C1CBE6;
background: #001565;
background-image: url('../interface/background/bottom.webp'), linear-gradient(to bottom, #000000 11%,#0828c2 60%,#0828c2 100%);
background-repeat: no-repeat, no-repeat;
background-position: bottom, 100% 100%;
background-attachment: fixed, fixed;
background-size: 100%, 100%;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
text-shadow: 0px 0px 2px black;
}

/* hover effect */

.hover-effect .mask {
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.hover-effect:hover .mask {
opacity: 0.7;
}