/* Globale Einstellungen */
* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    background-color: #11071e;
    width: 100%;
    height: 100%;
    font: 16px Helvetica, sans-serif;
}

/* Hauptcontainer */
#container {
    margin-left: auto;
    margin-right: auto;
    width: 1400px;
    border-style: none solid none solid;
    border-color: #140a21;
    border-radius: 0px;
    line-height: 25px;
    font-weight: normal;
    font-style: normal;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    box-shadow: #261141 0 2px 20px 8px;
    text-align: left;
    background-color: #160A24;
    background-blend-mode: normal;
    color: #ad8dc7;
}

/* Header */
#header {
    width: 1400px;
    height: auto;
}

.header-logo {
    background-image: url("../images/assets/cover.png");
    width: 1395px;
    height: 442px;
    margin: 0 0 20px 0;
    background-color: #140a21;
    background-position: 0px -105px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 6px 10px #2f1350;
    border-radius: 0;
    max-height: 300px;
}

.header-logo-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9e00ff;
    font: 14px Helvetica, sans-serif;
}

/* Navigation und Content */
#navigation {
    transform: matrix(1, 0, 0, 1, 0, 0);
    font-size: 16px;
    display: block;
    float: left;
    width: 210px;
    padding: 0 10px 15px 15px;
    text-align: left;
    min-height: 1000px;
}

#content {
    margin-left: 225px;
    width: 1162px;
}

/* Footer */
#footer {
    width: auto;
    height: 77px;
    clear: both;
    background-color: rgb(16, 7, 27);
    background-blend-mode: normal;
    opacity: 1;
    text-align: center;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-decoration-line: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    padding-top: 15px;
}

/* Artikel */
article {
    display: block;
    text-align: left;
    font-size: 16px;
    width: 995px;
    margin: 25px auto;
    padding: 10px 20px;
    background-color: #0e0512;
    box-shadow: rgb(53 19 81 / 79%) 0px 0px 10px 2px;
}

/* Links */
a {
    color: plum;
    text-decoration: none;
}

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

/* Überschriften */
h3 {
    text-decoration: underline;
}

/* Textarea */
textarea {
    background-color: #2c1448;
    font-family: Arial;
    font-size: 13.3333px;
    color: #ad8dc7;
    border: none;
    padding: 10px;
    max-height: 150px;
    max-width: 945px;
}

/* HR Element */
hr {
    border: 1px solid #321453;
    margin-bottom: 10px;
}

/* Placeholder */
::placeholder {
    color: #ad8dc7;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #ad8dc7;
}

::-ms-input-placeholder {
    color: #ad8dc7;
}

/* Inputs */
input {
    border: none;
    background: #2f1350;
    color: #ad8dc7;
}

input:focus {
    border: none;
    background: #2f1350;
    color: #bb98d8;
}

/* Labels */
label {
    display: block;
}

/* Select #birthdate */
select#birthdate {
    width: 20%;
    margin: 10px 3px 10px 0;
    display: inline-block;
}

/* Select options */
select option:hover,
option:active,
option:checked {
    border: none;
    background: #2f1350;
    color: #ad8dc7;
}

select option:focus {
    border: none;
    background: #2f1350;
    color: #bb98d8;
}

/* Login-Form */
.loginform {
    font-family: Arial;
    font-size: 12.3333px;
    position: absolute;
    padding: 10px 10px 0px 20px;
    opacity: 1;
    text-align: left;
    height: 60px;
    background-color: rgb(40 20 58 / 76%);
    background-blend-mode: normal;
    width: 860px;
    top: -3px;
    left: 250px;
}

/* Navi Member Picture */
.navi_member_picture {
    margin: 10px 10px 10px 0px;
    box-shadow: rgb(179 135 219 / 79%) 0px 0px 3px 1px;
    border-radius: 10px;
    width: 100%;
}

.navi_member_picture img {
    width: 100%;
    border-radius: 10px;
    display: flex;
}

.navi_member_picture:hover img {
    border: 1px solid #ad8dc7;
}

.navi_member_picture_auth img {
    filter: blur(8px) brightness(0.3);
    width: 100%;
    border-radius: 10px;
}

.navi_member_picture_auth:hover img {
    filter: blur(8px) brightness(0.3);
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ad8dc7;
}

/* Auth Info */
.auth_info {
    position: absolute;
    width: 100%;
    margin: 70px 31px;
    font-size: large;
    z-index: 1;
}

/* Buttons */
.a_registerbtn,
.a_lostpassbtn,
.a_logoutbtn {
    background-color: #2c1448;
    font-family: Arial;
    font-size: 13.3333px;
    color: #ad8dc7;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
}

.loginformbtn {
    font-family: Arial;
    font-size: 13.3333px;
    background-color: #2c1448;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

/* Input fields - Full width */
.input_fields {
    width: 100%;
}

.input_fields textarea {
    width: 100%;
    height: 150px;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields select,
.input_fields input[type=text],
.input_fields input[type=username],
.input_fields input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields.input[type=text]:focus,
select[type=gender]:focus,
input[type=username]:focus,
input[type=password]:focus {
    background-color: #2c1448;
    color: white;
    outline: none;
}

.input_fields select[type=gender] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #180a29;
    color: #ad8dc7;
}

.input_fields.select[type=gender]:focus {
    background-color: #2c1448;
    color: white;
    outline: none;
}

/* Register Button */
.registerbtn {
    background-color: #2c1448;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.registerbtn:hover {
    opacity: 1;
}

/* Signin Section */
.signin {
    background-color: #24103a;
    text-align: center;
}

/* Discord iframe */
.iframe-discord {
    float: right;
}

/* Video Content Layout */
.video-content-50 {
    display: flex;
}

.vc-50-video {
    flex: 0 0 50%;
}

.vc-50-text {
    flex-grow: 1;
    padding-left: 50px;
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-colum {
    margin: 5px 20px 5px 0;
}

/* Note Cards */
.notecard,
.notecard-red,
.notecard-green,
.notecard-yellow {
    background-color: #11071c;
    border-left: 10px solid #200f35;
    border-radius: 10px;
    padding: 5px 20px;
    position: relative;
    color: #ad8dc7;
}

.notecard hr,
.notecard-red hr,
.notecard-green hr,
.notecard-yellow hr {
    border: 1px solid;
}

.notecard hr {
    border-color: #321453;
}

.notecard.space {
    margin: 0 5px;
    width: 50%;
}

.notecard-red {
    color: #ff5757;
    border-left-color: #ff5757;
}

.notecard-red hr {
    border-color: #ff5757;
}

.notecard-green {
    color: green;
    border-left-color: green;
}

.notecard-green hr {
    border-color: #ad8dc7;
}

.notecard-yellow {
    color: yellow;
    border-left-color: yellow;
}

.notecard-yellow hr {
    border-color: #ad8dc7;
}

/* Notecard Wrap */
.notecard-wrap {
    display: flex;
    flex-wrap: nowrap;
}