@font-face {
    font-family: 'cfont'; /*a name to be used later*/
    src: url(../fonts/ZeroesTwo.ttf); /*URL to font*/
}

body {
	color: #fff;
	background: url(../img/page/background03.png) fixed;
	font-family: 'cfont';
}

ul{
  list-style-type: none;
  padding:0;
  margin:0;
}

.logo {
	width: 80%;
}

.nav {
	width: 80%;
    overflow: hidden;
    background: linear-gradient(#555, #222, #000);
	border-radius: 10px 10px 0px 0px;
}

.nav .icon {
    display: none;
}

.nav a {
    display: inline-block;
    color: #999;
    text-align: center;
    padding: 10px 10px;
	font-weight: bold;
    text-decoration: none;
	font-size: 17px;
}

.nav a:hover:not(.active) {
    background-color: rgba(100,100,100,0.2);
	color:#fff;
}

.nav a.active {
    color: #444;
	cursor:default;
	float: left;
}

.content-notes{
    display: block;
	background-color: rgba(50,50,50,0.6);
	width: 80%;
	height: 100%;
	color: #fff;
	border-bottom: 1px solid #000;
    box-shadow: 0 0 3px #000 inset;
}

.content{
    display: block;
	background-color: rgba(255,255,255,0.5);
	width: 80%;
	height: 90%;
	color: #000;
    box-shadow: 0 0 3px #000 inset;
	border-radius: 0px 0px 10px 10px;
}

.content:hover{
    cursor: default;
}

.footer {
	width: 80%;
	font-size: 14px;
	color: #555;
    overflow: hidden;
    background: linear-gradient(#555, #222, #000);
	border-radius: 10px 10px 10px 10px;
	margin-top: 3px;
	padding: 5px 0px 5px 0px;
}

.footer:hover {
	cursor: default;
}

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 25s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused;
	cursor: default;
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}