@font-face { font-family: 'CutiveMono';
             src: url('../fonts/CutiveMono-Regular.ttf') format('truetype'); }

body {
	background-color: #1E1F25;
	color : rgb(0, 255, 0);
	font-size: 1.1em;
	font-family: CutiveMono, arial, sans-serif; 
}

header, article, footer {
	padding-left : 1%;
	padding-right : 1%;
	padding-bottom : 2%;
}

#logo, video {
	max-width: 100%;
  	height: auto;
  	display: block;
}

h2, h3, h2 {
	padding-top: 15pt;
}


.feature {
    display: flex;
    align-items: center;
    width: 100%;
}

.feature > div:nth-child(1) {
    width: 60px;
    flex-shrink: 0;
}


.feature >  div:nth-child(2) {
    flex-grow: 1;
    padding-left: 10px;
    box-sizing: border-box;
    vertical-align: middle;
}

h4 {
	font-weight: bold;
	display: block;
	font-size: 1.1em;
}

a {
	color : rgb(0, 255, 0);
	transition: all 0.3s linear;
}

a:hover {
	color: #eeeeee;
}

#screenshot {
	max-width: 100%;
  	height: auto;
}

#title > h1, #title > a {
	width : 100%;
	text-align: center;
	display: block;
}

#title > div {
	padding-top: 2em;
}

#download li {
	vertical-align: middle;
	font-size: 1.5em;
	display: flex;
    flex-direction: row;
    padding: 0.3em;
}

#download img {
	padding-right: 0.5em;
}

footer {
	font-size: 0.7em;
}

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: green; /* old IE */
    background-color: green; /* Modern Browsers */
}

header ul {
	text-align: right;
	width: 40%;
}

header h1 {
	width: 50%;
}

header {
	display: flex;
	flex-direction: row;
	width: 90%;
}

.textCenter {
	text-align: center;
}

.releaseYear {
	width: 100%;
	background-color: green;
	font-size: 1.2em;
	font-weight : bold;
	color: #0f0;
	padding: 5px;
	margin-bottom: 10px;
	cursor: pointer;
}

#quellen > div > ul > li {
	 text-align: center; 
	 float: left;
	 padding: 10px;
	 list-style-type: none;
}

/*--------- Navigation ---------- */
#navigation {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	width: 100%;
	margin: auto;
	justify-content: space-between;
	text-align: center;
	border-top : thin solid;
	border-bottom: thin solid;
	border-color: green;
	flex-direction:row;
	flex-wrap: wrap;
}

#navigation li {
	padding: 1rem 2rem 1.15rem;
	min-width: 80px;
	margin: auto;
	border-radius: 25px;
}

#navigation li:hover {
  background-color: green;
  background-size: 100% 100%;
  animation: spring 300ms ease-out;
  text-shadow: 0 1px 0 rgb(0, 100, 0);
  font-weight: bold;
  border-radius: 25px;
}



#navigation li:active {
  transform: translateY(4px);
}

.checksum {
	font-size: 0.5em;
}

@keyframes spring {
  15% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.2, 1.1);
  }
  40% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(0.95, 0.95);
  }
  75% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.05, 1);
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1, 1);
  }
}