/* Scss Document */
/*VAR*/
body {
  font-family: 'Source Code Pro', monospace; }

.umrandung {
  width: 25px;
  height: 50px;
  border: 2px #141414 solid;
  border-radius: 50px;
  margin-top: 25px; }

.inner {
  margin-top: 10px;
  width: 10px;
  height: 10px;
  background-color: #141414;
  border-radius: 50px;
  animation: runter;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite; }

@-webkit-keyframes runter {
  from {
    margin-top: 10px; }
  to {
    margin-top: 30px; } }
@keyframes runter {
  from {
    margin-top: 10px; }
  to {
    margin-top: 30px; } }
header {
  z-index: -10;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  margin-top: -10px; }
  header h1 {
    color: #141414;
    font-weight: lighter; }
  header .umrandung {
    width: 25px;
    height: 50px;
    border: 2px #141414 solid;
    border-radius: 50px;
    margin-top: 25px; }
  header .inner {
    margin-top: 10px;
    width: 10px;
    height: 10px;
    background-color: #141414;
    border-radius: 50px;
    animation: runter;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite; }
@keyframes runter {
  from {
    margin-top: 10px; }
  to {
    margin-top: 30px; } }
.layer_container {
  width: 100%;
  height: 800px; }

.layer {
  width: 100%;
  height: 1000px;
  position: relative;
  left: 0;
  top: 100px;
  background-position: bottom center;
  background-size: cover; }

.layer-1 {
  width: 100%;
  z-index: -10;
  position: fixed;
  background-image: url("../img/frodo-games.png"); }

.layer-2 {
  width: 100%;
  z-index: -9;
  background-image: url("../img/frodo-games-fg.png"); }

.layer-3 {
  width: 100%;
  z-index: -8;
  position: fixed;
  background-image: url("../img/blank.png"); }

.section_head {
  background-image: url("../img/foreground_01.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0; }

.headline {
  text-transform: uppercase;
  border-bottom: 2px #141414 solid;
  margin-left: 18px;
  border-right: 2px #141414 solid;
  width: 200px; }

footer {
  position: fixed;
  bottom: 50vh;
  transform: rotate(-90deg);
  height: 150px;
  width: 200px;
  left: -25px;
  right: 0px;
  overflow: hidden; }
  footer .impressum_dse {
    color: #141414; }
    footer .impressum_dse a {
      color: #141414;
      font-size: 17px; }
    footer .impressum_dse a:hover {
      text-decoration: overline;
      text-decoration-color: #141414; }

.about {
  margin-top: 50px;
  font-size: 25px; }

.projects {
  margin-top: 500px;
  padding-top: 50px;
  background-color: #ffffff;
  height: 100%; }
  .projects img {
    width: 400px;
    margin-top: 10px; }
  .projects h2, .projects h3 {
    margin-top: 50px;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter; }
  .projects p {
    text-align: center;
    padding-bottom: 10px; }

.footer {
  margin-left: -94vw;
  transform: rotate(-90deg);
  position: fixed;
  z-index: -1; }

@media (max-width: 950px) {
  .headline {
    text-transform: uppercase;
    border-bottom: 2px #141414 solid;
    margin-right: 65%;
    border-right: 2px #141414 solid; }

  header {
    margin-top: -285px !important; } }