html{
    height:100vh;
    width: 100vw;
    background: url("/img/background_black.jpg") no-repeat center center fixed;
    overflow-x: hidden;
    background-size: 100% 100%;
}
body{
    font-family: 'bigNoodle' !important;
    background-image: url("/img/background_black.jpg");
    background-size: cover;
    color: #a5a5a5;
}
@font-face {
    font-family: 'bigNoodle';
    src: url('/big_noodle_titling.ttf');
}

input,textarea{
    font-family: 'Roboto', sans-serif !important;
}

legend{
    margin-bottom: 0;
    border: none;
    color: #a5a5a5;
}

a, a:hover{
    color: #a5a5a5;
    text-decoration: none;
}

footer{
    font-size: 20px;
}
.logo{
    height: 135px;
    background: url(/img/logo_darkmode.png) center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.socials{
    position: absolute;
    top: 10px;
    right: 10px;
}

.socials, .mobile-social img{
    height: 40px;
}
.mobile-social img{
    margin: 5px;
}

.social div {
    display: inline-block;
    height: 40px;
}
.social img {
    height: 40px;
}

.mobile-buttons a{
    margin: 0 auto;
    margin-top: 0px;
    display: block;
    width: 95%;
    background: #b6b6b6;
    text-align: center;
    color: #2b2d2f;
    font-size: 20px;
    margin-top: 15px;
    padding: 10px;
}

.mobile-buttons a:hover{
    text-decoration: none;
    background: #b92121;
    color: #FFF;
}

#container-content-mobile{
    width: 95%;
    height: auto;
    background: #b6b6b6;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding: 15px;
    font-size: 16pt;
}

.content-wrapper{
    padding: 25px;
    position: absolute;
    width: 100%;
    height: 100%;
}

.content-center{
    height: 100%;
}

.content-right{
    height: 100%;
}

.console-inner{
    position: absolute;
    background: #1f1f1f;
    height: 90.5%;
    width: 66.6%;
    top: 5.3%;
    left: 16.7%;
    border-radius: 9px;
    overflow-y: auto;
    padding: 10px;
    color: #a5a5a5;
    font-size: 16pt;
}

.console-inner p{
    font-size: 16pt;
}

.container-console .container {
    position: relative;
}

.row{
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}
.container-console .arrow-left,
.container-console .arrow-right,
.container-console .arrow-top,
.container-console .arrow-down {
    border-radius: 100%;
    position: absolute;
}


@media screen and (max-width:990px){
    .console--content{
        top: 10%;
    }
    .arrow-top{
        left: 9.2%;
        top: 26.9%;
    }

    .arrow-left{
        top: 34%;
        left: 6.1%;
    }
    .arrow-right{
        top: 34%;
        left: 12.35%;
    }

    .arrow-down{
        top: 41.5%;
        left: 9.2%;
    }

    .button-home{
        right: 5.03%;
        top: 21.6%;
    }

    .button-board{
        right: 5.03%;
        top: 40%;
    }

    .button-calender{
        right: 5.03%;
        top: 58.5%;
    }

    .button-community{
        right: 5.03%;
        top: 76.9%;
    }

    .small-square{
        width: 20px;
        height: 20px;
    }

    .medium-square{
        width: 28px;
        height: 28px;
    }

    #shownews{
        top: 5%;
    }
}

@media screen and (min-width:990px){
    .arrow-top{
        left: 8.85%;
        top: 26.9%;
    }

    .arrow-left{
        left: 5.6%;
        top: 34%;
    }
    .arrow-right{
        left: 12%;
        top: 34%;
    }

    .arrow-down{
        top: 41.5%;
        left: 8.8%;
    }

    .button-home{
        right: 5.03%;
        top: 21.6%;
    }

    .button-board{
        right: 5.03%;
        top: 40%;
    }

    .button-calender{
        right: 5.03%;
        top: 58.5%;
    }

    .button-community{
        right: 5.03%;
        top: 76.9%;
    }

    .small-square{
        width: 25px;
        height:25px;
    }

    .medium-square{
        width: 32px;
        height: 32px;
    }
}

@media screen and (min-width:1200px){
    .console--content{
        top: 25%;
    }

    .arrow-top{
        left: 8.565%;
        top: 26.8%;
    }

    .arrow-left{
        left: 5.35%;
        top: 34.055%;
    }
    .arrow-right{
        left: 11.75%;
        top: 34.05%;
    }

    .arrow-down {
        top: 41.5%;
        left: 8.565%;
    }

    .button-home{
        right: 4.7%;
        top: 21.6%;
    }

    .button-board{
        right: 4.7%;
        top: 40%;
    }

    .button-calender{
        right: 4.7%;
        top: 58.5%;
    }

    .button-community{
        right: 4.7%;
        top: 76.9%;
    }

    .small-square{
        height:31px;
        width:31px;
    }

    .medium-square{
        width: 40px;
        height: 40px;
    }

}

#animated-text {
    position: relative;
    font-size: 18px;
    color: white;
}

#animated-text span {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #1f1f1f;
    border-left: 1px solid transparent;
    animation: Fwrite 4.5s steps(100, start) infinite, Wbar 0.5s step-end;
    -webkit-animation: Fwrite 4.5s steps(100, start) infinite, Wbar 0.5s step-end;
}

#animated-text > p:hover {
    animation-play-state: paused;
}

@keyframes Fwrite {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes Wbar {
    0% {
        border-left-color: transparent;
    }
    50% {
        border-left-color: #1f1f1f;
    }
    100% {
        border-left-color: transparent;
    }
}

@-webkit-keyframes Fwrite {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@-webkit-keyframes Wbar {
    0% {
        border-left-color: transparent;
    }
    50% {
        border-left-color: black;
    }
    100% {
        border-left-color: transparent;
    }
}

div#text textarea {
  background: rgba(0,0,0,0.3);
  border: 0;
  outline: 0;
  width: 400px;
  padding: 3px;
  font-size: medium;
}

div#text select option {
  letter-spacing: 0.5px;
  font-size: x-large;
}


input#test {
  display: none;
}

#kontakt input, select{
background: #161616;
border: none;
}

div#Achtung {
  color: 	#F6601B;
  text-shadow: 2px 2px black;
}