:root {
    --nknp-color: #0094ff;
    --font-sans-serif: "Bahnschrift", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ueberuns-border-width: 8px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--font-color);
    background-color: var(--bg-color-body);
}

/*
--color-hinted-grey-1: #0e0e10;
--color-hinted-grey-2: #18181b;
--color-hinted-grey-3: #1f1f23;
--color-hinted-grey-4: #26262c;
--color-hinted-grey-5: #323239;
--color-hinted-grey-6: #3b3b44;
--color-hinted-grey-7: #53535f;
--color-hinted-grey-8: #848494;
--color-hinted-grey-9: #adadb8;
--color-hinted-grey-10: #c8c8d0;
--color-hinted-grey-11: #d3d3d9;
--color-hinted-grey-12: #dedee3;
--color-hinted-grey-13: #e6e6ea;
--color-hinted-grey-14: #efeff1;
--color-hinted-grey-15: #f7f7f8;

--color-orange-1: #050301;
--color-orange-2: #090601;
--color-orange-3: #120d02;
--color-orange-4: #251a04;
--color-orange-5: #372706;
--color-orange-6: #453008;
--color-orange-7: #65470b;
--color-orange-8: #7c570e;
--color-orange-9: #9e6900;
--color-orange-10: #c28100;
--color-orange-11: #e69900;
--color-orange-12: #ffb31a;
--color-orange-13: #ffd37a;
--color-orange-14: #ffdf9e;
--color-orange-15: #ffebc2;
--color-yellow-1: #050501;
--color-yellow-2: #090901;
--color-yellow-3: #0e0e02;
--color-yellow-4: #1c1c03;
--color-yellow-5: #292905;
--color-yellow-6: #373706;
--color-yellow-7: #4e4e09;
--color-yellow-8: #60600b;
--color-yellow-9: #7a7a00;
--color-yellow-10: #949400;
--color-yellow-11: #adad00;
--color-yellow-12: #c7c700;
--color-yellow-13: #e0e000;
--color-yellow-14: #ebeb00;
--color-yellow-15: #f5f500;
--color-green-1: #010503;
--color-green-2: #010906;
--color-green-3: #02120c;
--color-green-4: #042015;
--color-green-5: #063221;
--color-green-6: #074029;
--color-green-7: #0a5738;
--color-green-8: #016b40;
--color-green-9: #018852;
--color-green-10: #00a865;
--color-green-11: #00c274;
--color-green-12: #00db84;
--color-green-13: #00f593;
--color-green-14: #5cffbe;
--color-green-15: #a8ffdc;
--color-cyan-1: #010505;
--color-cyan-2: #010909;
--color-cyan-3: #021212;
--color-cyan-4: #042020;
--color-cyan-5: #052e2e;
--color-cyan-6: #073c3c;
--color-cyan-7: #095353;
--color-cyan-8: #0c6a6a;
--color-cyan-9: #018383;
--color-cyan-10: #00a3a3;
--color-cyan-11: #00b8b8;
--color-cyan-12: #00d6d6;
--color-cyan-13: #00f0f0;
--color-cyan-14: #2effff;
--color-cyan-15: #94ffff;
--color-blue-1: #010205;
--color-blue-2: #020712;
--color-blue-3: #040d20;
--color-blue-4: #071a40;
--color-blue-5: #0a255c;
--color-blue-6: #0d3177;
--color-blue-7: #1345aa;
--color-blue-8: #1756d3;
--color-blue-9: #1f69ff;
--color-blue-10: #528bff;
--color-blue-11: #7aa7ff;
--color-blue-12: #a3c2ff;
--color-blue-13: #c7daff;
--color-blue-14: #d6e4ff;
--color-blue-15: #e5eeff;
--color-magenta-1: #050104;
--color-magenta-2: #12020f;
--color-magenta-3: #20041b;
--color-magenta-4: #37062e;
--color-magenta-5: #4e0941;
--color-magenta-6: #650b55;
--color-magenta-7: #8a0f73;
--color-magenta-8: #ae1392;
--color-magenta-9: #c516a5;
--color-magenta-10: #ff38db;
--color-magenta-11: #ff75e6;
--color-magenta-12: #ffa3ee;
--color-magenta-13: #ffc7f5;
--color-magenta-14: #ffd6f8;
--color-magenta-15: #ffe5fa;
--color-red-1: #050101;
--color-red-2: #120202;
--color-red-3: #200404;
--color-red-4: #3c0807;
--color-red-5: #530a09;
--color-red-6: #6e0e0c;
--color-red-7: #971311;
--color-red-8: #bb1411;
--color-red-9: #eb0400;
--color-red-10: #ff4f4d;
--color-red-11: #ff8280;
--color-red-12: #ffaaa8;
--color-red-13: #ffcdcc;
--color-red-14: #ffdcdb;
--color-red-15: #ffe6e5;
*/

.dark-mode {
    --bg-color-body: #0e0e10;
    --bg-color-base: #18181b;
    --bg-color-alt: #1f1f23;
    --bg-color-alt2: #26262c; 

    --accent-color: #323239;

    --font-color: #efeff1;
    --font-color-inv: #18181b;

    --svg-color: #efeff1;

    --color-black-white: #efeff1;
    --color-white-black: #18181b;
}

.light-mode {
    --bg-color-body: #f7f7f8;
    --bg-color-base: #efeff1;
    --bg-color-alt: #e6e6ea;
    --bg-color-alt2: #e6e6ea;

    --accent-color: #d3d3d9;

    --font-color: #18181b;
    --font-color-inv: #efeff1;

    --svg-color: #18181b;

    --color-black-white: #18181b;
    --color-white-black: #efeff1;
}

/* Green Mode */
.green-mode {
    --bg-color-body: #0a1a0a;
    --bg-color-base: #0e2e0e;
    --bg-color-alt: #164016;
    --bg-color-alt2: #215421;

    --accent-color: #309130;

    --font-color: #e5ffe5;
    --font-color-inv: #0e2e0e;

    --svg-color: #e5ffe5;

    --color-black-white: #e5ffe5;
    --color-white-black: #0e2e0e;
}

/* Red Mode */
.red-mode {
    --bg-color-body: #3b0c0c;
    --bg-color-base: #6f0e0e;
    --bg-color-alt: #a21212;
    --bg-color-alt2: #d01515;

    --accent-color: #ff2020;

    --font-color: #ffebeb;
    --font-color-inv: #6f0e0e;

    --svg-color: #ffebeb;

    --color-black-white: #ffebeb;
    --color-white-black: #6f0e0e;
}

/* Cyan Mode */
.cyan-mode {
    --bg-color-body: #07282a;
    --bg-color-base: #0d4a4d;
    --bg-color-alt: #0e6c6f;
    --bg-color-alt2: #0f8e91;

    --accent-color: #10afb3;

    --font-color: #e0f7f8;
    --font-color-inv: #0d4a4d;

    --svg-color: #e0f7f8;

    --color-black-white: #e0f7f8;
    --color-white-black: #0d4a4d;
}

/* Blue Mode */
.blue-mode {
    --bg-color-body: #070a28;
    --bg-color-base: #0e144a;
    --bg-color-alt: #121c5e;
    --bg-color-alt2: #162372;

    --accent-color: #1e38a1;

    --font-color: #e6e9ff;
    --font-color-inv: #0e144a;

    --svg-color: #e6e9ff;

    --color-black-white: #e6e9ff;
    --color-white-black: #0e144a;
}


/* Magenta Mode */
.magenta-mode {
    --bg-color-body: #2a0720;
    --bg-color-base: #500c3b;
    --bg-color-alt: #751455;
    --bg-color-alt2: #9b176f;

    --accent-color: #c41e9a;

    --font-color: #ffd8f2;
    --font-color-inv: #500c3b;

    --svg-color: #ffd8f2;

    --color-black-white: #ffd8f2;
    --color-white-black: #500c3b;
}

/* Orange Mode */
.orange-mode {
    --bg-color-body: #562000;
    --bg-color-base: #8b2f00;
    --bg-color-alt: #bf4900;
    --bg-color-alt2: #f36100;

    --accent-color: #ff7f29;

    --font-color: #ffecd9;
    --font-color-inv: #8b2f00;

    --svg-color: #ffecd9;

    --color-black-white: #ffecd9;
    --color-white-black: #8b2f00;
}

/* Yellow Mode */
.yellow-mode {
    --bg-color-body: #635b0d;
    --bg-color-base: #a19206;
    --bg-color-alt: #c8b807;
    --bg-color-alt2: #dfd80a;

    --accent-color: #ffff38;

    --font-color: #fffecb;
    --font-color-inv: #a19206;

    --svg-color: #fffecb;

    --color-black-white: #fffecb;
    --color-white-black: #a19206;
}

/** HEADER ################################################################################################# **/

.header {
    margin-bottom: 40px;
    /* position: fixed; */
}

.header-navbar {
    display: grid;
    grid-template-columns: minmax(auto, 1280px) minmax(auto, 500px);

    justify-content: space-between;
    align-items: center;

    min-height: 50px;
    max-width: 1780px;
    margin-left: auto;
    margin-right: auto;
}

.header-nav-logo, 
.header-nav-logo a {
    display: flex;
    align-items: center;

    height: 50px;
}
.header-nav-logo svg {
    height: 40px;
    fill: var(--nknp-color);
}

.header-nav-left {
    margin-top: 10px;
    margin-left: 40px;
}

.header-nav-right {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 10px;
    margin-right: 20px;
}

.header-nav-menu-desktop {
    display: flex;
    align-items: center;

    height: 100%;
}

.header-nav-menu-item {
    display: flex;
    align-items: center;

    padding: 0px 20px;
    height: 50px;

    font-weight: 900;
    font-size: 1.5rem;

    color: var(--font-color);

    text-transform:uppercase;
    text-decoration: none;
}

.header-nav-menu-item:hover {
    color: var(--nknp-color);
}

.header-nav-menu-collection {
    position: relative;
}

.header-nav-menu-collection-dropdown {
    display: none;
    position: absolute;

    top: 50px;
    left: 0;

    background-color: var(--bg-color-alt);

    border-radius: 0 12px 12px 12px;

    z-index: 999;
}
.header-nav-menu-collection:hover .header-nav-menu-collection-dropdown {
    display: block;
}
.header-nav-menu-collection:hover .header-nav-menu-item {
    background-color: var(--bg-color-alt);
    border-radius: 12px 12px 0 0;
}

.header-nav-menu-collection-item {
    display: flex;
    align-items: center;

    padding: 0px 20px;
    height: 50px;

    font-weight: 600;
    font-size: 1.3rem;

    color: var(--font-color);

    text-transform:uppercase;
    text-decoration: none;
}
.header-nav-menu-collection-item:hover {
    color: var(--nknp-color);
}

.header-nav-acc {
    position: relative;

    display: flex;
    align-items: center;

    height: 50px;
    cursor: pointer;

    padding: 0px 20px;
}

.header-nav-acc svg, 
.header-nav-acc img {
    height: 40px;
    width: 40px;
    border-radius: 100%;

    fill: var(--svg-color);
}

.header-nav-acc-dropdown {
    display: none;
    position: absolute;

    top: 50px;
    right: 0;

    background-color: var(--bg-color-alt);

    border-radius: 12px 0 12px 12px;

    z-index: 999;

}

.header-nav-acc-activate {
    background-color: var(--bg-color-alt);
    border-radius: 12px 12px 0 0;
}
.header-nav-acc-dropdown-activate {
    display: block;
}

.header-nav-acc-dropdown-item {
    display: flex;
    align-items: center;

    white-space: nowrap;
    padding: 0px 20px;
    height: 50px;
}
.header-nav-acc-dropdown-item a {
    font-weight: 600;
    font-size: 1.3rem;

    margin-left: 10px;

    color: var(--font-color);

    text-decoration: none;
}
.header-nav-acc-dropdown-item svg {
    fill: var(--svg-color);
    height: 20px;
    width: 20px;
}
.header-nav-acc-dropdown-item:hover a,
.header-nav-acc-dropdown-item:hover svg {
    color: var(--nknp-color);
    fill: var(--nknp-color);
}

.header-nav-acc-logged-in-user {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0px 20px;
    height: 50px;

    font-weight: 600;
    font-size: 1.3rem;
}
.header-nav-acc-logged-in-user img,
.header-nav-acc-logged-in-user svg {
    height: 35px;
    width: 35px;

    border-radius: 100%;
    margin-right: 20px;

    fill: var(--svg-color);
}

.header-nav-acc-logged-in-config,
.header-nav-acc-logged-in-more {
    position: relative;
    padding-top: 2px;
}
.header-nav-acc-logged-in-config::before,
.header-nav-acc-logged-in-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 2px;
    background-color: var(--accent-color);
}

    /*? NAVBAR MOBILE ?*/

.header-nav-menu-icon-mobile {
    display: none;
    align-items: center;

    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.header-nav-menu-icon-mobile svg {
    height: 40px;
    cursor: pointer;
    fill: var(--svg-color);
}

.header-nav-menu-mobile {
    display: none;
    flex-direction: column;
    align-items: center;

    grid-row: 2;
    grid-column: 1 / span 2;
}

.header-activate-dd {
    display: none;
}

@media screen and (max-width: 650px) {
    .header-nav-menu-icon-mobile {
        display: flex;
    }

    .header-nav-menu-desktop {
        display: none
    }
    .header-activate-dd {
        display: flex;
    }

    .header-navbar {
        grid-template-columns: minmax(auto, 369px) minmax(auto, 180px);
    }

    .header-nav-menu-collection-dropdown {
        left: 50%;
        transform: translateX(-50%);

        border-radius: 12px;
    }
}

@media screen and (max-width: 330px) {
    .header-nav-left {
        margin-left: 20px;
    }
    .header-nav-right {
        margin-right: 20px;
    }
}

/** Auth ############################################################################################### **/

    /*? Login / Register?*/

.login,
.register,
.password-reset,
.reset-password,
.reset-email {
    display: flex;
    position: relative;

    align-items: center; 
    justify-content: center;

    height: 100vh;
}

.temporary-deactivated {
    text-align: center;
    margin-top: 20px;
}


.auth-field {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 450px;
    padding: 48px 48px 0px 48px;
    margin: 40px 0;

    background: var(--bg-color-base);
    border-radius: 12px;
}

.auth-logo {
    width: 300px;
    fill: var(--nknp-color);
    margin-bottom: 10px;
}

.auth-form {
    width: 350px;
}

.auth-form-item {
    position: relative;
    margin-top: 40px;
    border-bottom: 2px solid var(--accent-color);
}
.auth-form-item label {
    position: absolute;
    bottom: 0;
    left: 5px;

    transform: translateY(-50%);
    pointer-events: none;
    transition: .5s;
}
.auth-form-item input:focus ~ label,
.auth-form-item input:valid ~ label {
    bottom: 30px;
}
.auth-form-item input {
    width: calc(100% - 26px - 5px);
    height: 50px;

    line-height: 1.25;
    font-size: 1rem;
    font-family: var(--font-sans-serif);
    color: var(--font-color);

    padding: 12px 5px 12px 5px;
    
    background: transparent;
    border: none;
    outline: none;
}
.auth-form-item svg {
    position: absolute;

    height: 26px;

    bottom: 12px;
    right: 5px;

    fill: var(--svg-color);
}

.auth-submit-button {
    height: 46px;
    width: 100%;

    margin-top: 40px;
    
    border-radius: 8px;
    border: none;

    font-size: 1rem;
    font-family: var(--font-sans-serif);

    cursor: pointer;

    background-color: var(--color-black-white);
    color: var(--font-color-inv);
}
.auth-submit-button:hover {
    opacity: 0.8;
}

.auth-back {
    display: flex;
    margin-top: 40px;
    text-decoration: none;
}
.auth-back svg {
    height: 35px;
    width: 35px;
    fill: var(--svg-color);
}
.auth-back p {
    display: flex;
    align-items: center;
    color: var(--font-color);
}
.auth-back:hover {
    opacity: 0.8;
}

.auth-to {
    display: flex;
    margin-top: 40px;
}
.auth-to p {
    margin-right: 5px;
}
.auth-to a  {
    text-decoration: none;
    color: var(--nknp-color);
}
.auth-to a:hover {
    opacity: 0.8;
}

.auth-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 10px;
    color: var(--nknp-color);
    text-decoration: none;
    font-size: 0.9rem;
}
.auth-privacy svg {
    height: 17px;
    width: 17px;
    fill: var(--svg-color);
    margin-right: 3px;
}
.auth-privacy:hover {
    opacity: 0.8;
}

.login-msg,
.password-reset-msg {
    color: greenyellow;
    font-size: 0.9rem;

    margin-top: 10px;
}

.register-error,
.auth-error {
    position: absolute;

    top: 55px;
    left: 5px;

    color: red;
    font-size: 0.9rem;
}
.login-error {
    color: red;
    font-size: 0.9rem;

    margin-top: 10px;
}
.login-error a {
    color: var(--nknp-color);
    text-decoration: none;
}
.login-error a:hover {
    opacity: 0.8;
}

.login-stay {
    display: flex;

    margin-top: 50px;
}
.login-stay p {
    margin-left: 35px;
}
.login-stay a {
    color: var(--nknp-color);
    text-decoration: none;
    margin-left: 5px;
}
.login-stay a:hover {
    opacity: 0.8;
}


.login-forgot-password {
    margin-top: 2px;

    text-decoration: none;
    color: var(--nknp-color);
    float: right;
}
.login-forgot-password:hover {
    opacity: 0.8;
}

    /*? Auth MOBILE ?*/

@media screen and (max-height: 702.783px) {
    .login {
        height: 100%;
    }
}
@media screen and (max-height: 720.783px) {
    .register {
        height: 100%;
    }
}
@media screen and (max-height: 472.783px) {
    .password-reset {
        height: 100%;
    }
}
@media screen and (max-height: 536.783px) {
    .reset-password {
        height: 100%;
    }
}
@media screen and (max-height: 536.783px) {
    .reset-email {
        height: 100%;
    }
}

@media screen and (max-width: 450px) {
    .login,
    .register,
    .password-reset,
    .reset-password,
    .reset-email {
        background: var(--bg-color-base);
    }

    .auth-field {
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    .auth-logo {
        width: 75%;
    }

    .auth-form {
        width: 100%;
        max-width: 350px;
    }
}

@media screen and (max-width: 370px) {
    .auth-to {
        flex-direction: column;
    }
}

/** SETTINGS ############################################################################################### **/

.settings {
    display: flex;
    position: relative;

    align-items: center;
    justify-content: center;

    height: 100vh;
}

.settings-field {
    display: flex;
    align-items: center;

    height: 700px;
    margin: 40px 0 40px 0;

    background: var(--bg-color-base);
    border-radius: 12px;
}

.settings-nav {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    width: 200px;
    height: 100%;

    padding: 20px;

    background: var(--bg-color-alt);
    border-radius: 12px 0 0 12px;
}
.settings-nav-item {
    display: flex;
    line-height: 1.6;
}
.settings-nav-item svg {
    height: 25px;
    width: 25px;

    fill: var(--svg-color);
}

.settings-nav-item a {
    height: 50px;

    font-size: 1rem;

    margin-left: 10px;

    color: var(--font-color);

    text-decoration: none;
}
.settings-nav-item:hover a,
.settings-nav-item:hover svg {
    color: var(--nknp-color);
    fill: var(--nknp-color);
}

.settings-nav-bottom {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.settings-nav-back {
    display: flex;
    margin-bottom: 20px;
    text-decoration: none;
}
.settings-nav-back svg {
    height: 40px;
    width: 40px;
    fill: var(--svg-color);
}
.settings-nav-back p {
    display: flex;
    align-items: center;
    margin-left: 5px;
    color: var(--font-color);
}
.settings-nav-back:hover {
    opacity: 0.8;
}

.settings-nav-logo {
    fill: var(--nknp-color);
}

.settings-account {
    position: relative;
    width: 400px;
    height: 100%;

    padding: 40px;

    display: flex;
    flex-direction: column;
}

.settings-account-login {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: calc(50% - 31.2px / 2);
    left: calc(50% - 129.05px / 2);

    z-index: 999;

    color: var(--font-color);
    text-decoration: none;
}
.settings-account-login a {
    font-size: 1.3rem;

    color: var(--font-color);
    text-decoration: none;

    margin-left: 10px;
}
.settings-account-login svg {
    height: 25px;
    width: 25px;
    fill: var(--svg-color);
}
.settings-account-login:hover a,
.settings-account-login:hover svg {
    color: var(--nknp-color);
    fill: var(--nknp-color);
}

.settings-account-profilepicture {
    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 25px;
}
.settings-account-profilepicture img,
.settings-account-profilepicture svg {
    height: 200px;
    width: 200px;

    margin-bottom: 20px;
    border-radius: 100%;

    fill: var(--svg-color);
}

.settings-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 40px;
}
.settings-account-item-left {
    display: flex;
}
.settings-account-item-left svg {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    fill: var(--svg-color);
}
.settings-account-item-left textarea {
    width: 150px;
    height: 30px;
    resize: none;

    border: 2px solid var(--accent-color);
    border-radius: 5px;
    background: none;

    color: var(--font-color);

    padding: 5px;
}
.settings-account-item button {
    border: none;
    background: none;
    font-family: var(--font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nknp-color);
    cursor: pointer;
}
.settings-account-item a {
    color: var(--nknp-color);
    text-decoration: none;
}
.settings-account-item a:hover,
.settings-account-item button:hover {
    opacity: 0.8;
}

.settings-design {
    width: 400px;
    height: 100%;

    padding: 40px;
}

.settings-design-container-headline {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.settings-design-item {
    display: flex;
    justify-content: space-between;

    margin-bottom: 30px;
}

.settings-design-item-left {
    display: flex;
    margin-left: 10px;
}
.settings-design-item-left-color {
    height: 25px;
    width: 25px;
    margin-right: 10px;

    border-radius: 100%;
    border: 2px solid var(--accent-color);
}
.settings-design-item-left svg {
    height: 25px;
    width: 25px;
    margin-right: 10px;

    fill: var(--svg-color);
}

.settings-cookies {
    width: 400px;
    height: 100%;

    padding: 40px;
}

.settings-cookies-item {
    display: flex;
    justify-content: space-between;

    margin-bottom: 30px;
}

.settings-cookies-item-left {
    display: flex;
}
.settings-cookies-item-left svg {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    fill: var(--svg-color);
}
.settings-cookies-item-left a {
    color: var(--nknp-color);
    text-decoration: none;
    margin-left: 5px;
}
.settings-cookies-item-left a:hover {
    opacity: 0.8;
}

.settings-msg {
    color: greenyellow;
    font-size: 0.9rem;
    margin-top: 10px;
}
.settings-error {
    color: red;
    font-size: 0.9rem;
    margin-top: 10px;
}

    /*? Auth MOBILE ?*/

@media screen and (max-width: 600px) {
    .settings {
        background: var(--bg-color-base);
    }

    .settings-field {
        height: 100%;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }
}

@media screen and (max-width: 550px) { 
    @media screen and (max-height: 840px) { 
        .settings {
            height: 840px;
        } 
    }

    .settings-field {
        flex-direction: column;
    }

    .settings-nav {
        width: 100%;
        height: auto;
    
        border-radius: 12px 0 0 12px;
    }

    .settings-nav-top {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        height: 40px;
        margin-bottom: 20px;
    }
    .settings-nav-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    .settings-nav-item a {
        height: auto;
    }

    .settings-nav-logo {
        height: 40px;
    }

    .settings-nav-back {
        margin: 0;
    }
}

@media screen and (max-width: 450px) {
    @media screen and (max-height: 940px) { 
        .settings {
            height: 940px;
        } 
    }

    .settings-nav-top {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .settings-nav-item {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 400px) {
    .settings-account,
    .settings-design,
    .settings-cookies {
        width: 100vw;
        padding: 20px;
    }
} 

/** INDEX ############################################################################################### **/

.index {
    display: flex;
    position: relative;

    align-items: center;
    justify-content: center;

    height: calc(100vh - 100px);
}

.main-text {
    text-align: center;
    margin-right: 100px;

    max-width: 1000px;

    font-size: 1.5rem;
    color: var(--font-color);
}
.main-text-svg {
    width: 800px;

    margin-bottom: 30px;

    fill: var(--svg-color)
}

.main-discord iframe {
    width: 450px; 
    height: 700px;
}

    /*? INDEX MOBILE ?*/

@media screen and (max-width: 1600px) {
    .index {
        flex-direction: column;

        height: 100%;
        padding-bottom: 40px;
    }

    .main-text {
        margin-right: 0;
        margin-bottom: 100px;
        margin-top: 100px;
    }
}

@media screen and (max-width: 1000px) {
    .main-text {
        width: 800px;

        font-size: 1.2rem;
    }
    .main-text svg {
        width: 650px;
    }
}

@media screen and (max-width: 800px) {
    .main-text {
        width: 650px;

        font-size: 1rem;
    }
    .main-text svg {
        width: 500px;
    
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 650px) {
    .main-text {
        width: 450px;

        margin-top: 50px;
    }
    .main-text svg {
        width: 400px;
    }
}

@media screen and (max-width: 500px) {
    .main-text {
        width: 300px;
    }
    .main-text svg {
        width: 280px;
    }

    .main-discord iframe {
        width: 300px; 
    }
}

/** UEBERUNS ############################################################################################### **/

.ueberuns{
    display: grid;
    grid-template-columns: minmax(auto, 1200px);
    grid-gap: 20px;

    justify-content: center;

    position: relative;
}

.uu-user-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

    position: relative;

    margin-bottom: 70px;
}

.uu-user {
    display: flex;
    align-items: center;
    flex-direction: column;

    z-index: 1;

    padding: 10px;

    border-radius: 12px 12px 0px 0px;
}
.uu-user::after {
    content: "";
    display: none;
    position: relative;
    bottom: -20px;

    height: 20px;
    width: calc(100% + 20px);

    background: var(--ueberuns-primary-color);
    z-index: -2;
}
.uu-user:hover{
    background: var(--ueberuns-primary-color);
}
.uu-user:hover::after {
    display: block;
}


.uu-user-info-p {
    margin: 15px 0;
    text-align: center;

    font-weight: bold;
}

.uu-user-name {
    font-size: 1.25rem;
    font-weight: bold;

    margin-top: 10px;
}

.uu-user-role {
    font-size: 1rem;
    font-weight: bold;

    margin-top: 10px;
}

.uu-user-img {
    height: 150px;
    border-radius: 100%;
}

#NKNP {
    color: #b6b6b6;
}

#SOE {
    color: #34abf3;
}

#TOE {
    color:#d41386;
}

.uu-user-more {
    display: none;
    justify-content: left;
    align-items: center;

    border-radius: 12px;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 150px;

    background: linear-gradient(to right, var(--ueberuns-primary-color), var(--ueberuns-accent-color));
}
.uu-user-more::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: var(--ueberuns-border-width);
    border-radius: inherit;
    background: var(--ueberuns-primary-color);
}

.uu-user-more-before-icon {
    display: flex;
    align-items: center;
}
.uu-user-more-before-icon svg {
    height: 16px;
    width: 16px;

    margin-right: 4px;
}

.uu-user-more-left {
    display: flex;
    align-items: center;
    
    height: 100px;
    min-width: 550px;

    border-right: 2px solid var(--accent-color);

    text-decoration: none;
    color: var(--font-color);
}

.uu-user-more-banner {
    display: flex;
    justify-content: center;

    width: 300px;

    padding: 0 15px;
}
.uu-user-more-banner img {
    width: 270px;
    border-radius: 12px;
}

.uu-user-more-names {
    width: 248px;

    padding-right: 15px;
}
.uu-user-more-displayname p ,
.uu-user-more-nick p {
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

    font-size: 1.2rem;
    font-weight: 900;
}
.uu-user-more-username p {
    white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;

    font-weight: 500;
}

.uu-user-more-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 100px;
    min-width: 200px;

    padding: 0 15px;

    border-right: 2px solid var(--accent-color);
}

.uu-user-more-joined,
.uu-user-more-status {
    display: flex;
    align-items: center;
}

.uu-user-more-status p,
.uu-user-more-joined p {
    line-height: 2;
}

.uu-user-more-right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 100px;

    padding: 0 15px;
}

.uu-user:hover .uu-user-more {
    display: flex;
}

.uu-user-row:hover { /*mag ich nicht aber weiß nicht wie sonst */
    margin-bottom: 220px;
}

    /*? UEBERUNS EDITING ?*/

.editingModeButton {
    height: 30px;
    justify-self: end;
    cursor: pointer;

    fill: var(--svg-color);
}

.ueberuns-editing {
    display: none;
    flex-direction: column;

    align-items: center;

    position: fixed;
    top: 50%;
    left: 50%;

    min-width: 600px;

    padding: 20px;

    transform: translate(-50%, -50%);

    background: var(--bg-color-base);
    border-radius: 12px;

    z-index: 9999;
}

.uu-edit-user-field {
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));

    width: 500px;
    margin-top: 10px;

    cursor: pointer;
}

.uu-edit-user-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.uu-edit-name {
    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

    height: 50px;

    border: 1px solid var(--accent-color);
}
.uu-edit-name:hover {
    opacity: 0.8;
}

.uu-edit-user-data {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row-gap: 10px;

    width: 500px;

    margin-top: 20px;
}
.uu-edit-user-data-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row-gap: 10px;
}

.uu-edit-data-name textarea {
    width: 200px;
    height: 30px;
    resize: none;

    border: 2px solid var(--accent-color);
    border-radius: 5px;
    background: none;

    color: var(--font-color);
    font-style: var(--font-sans-serif);

    padding: 5px;
}

.uu-edit-data-banner img {
    width: 250px;
}
.uu-edit-data-banner input {
    font-size: 0.8rem;
    font-family: var(--font-sans-serif);
}

.uu-edit-data-description {
    grid-column: 1 / span 2;
}
.uu-edit-data-description textarea {
    width: 500px;
    height: 80px;

    resize: none;
    word-wrap: break-word;

    border: 2px solid var(--accent-color);
    border-radius: 5px;
    background: none;

    color: var(--font-color);
    font-style: var(--font-sans-serif);

    padding: 5px;
}

.uu-edit-data-buttons {
    grid-column: 2;
    justify-self: flex-end;

    margin-top: 10px;
}
.uu-edit-data-submit, .uu-edit-data-exit {
    width: 100px;
    height: 25px;
    font-size: 0.9rem;
    border-radius: 5px;
    border: none;
    
    cursor: pointer;
}
.uu-edit-data-submit {
    background: var(--nknp-color);
    margin-left: 5px;
    color: #000000;
}
.uu-edit-data-exit {
    background: var(--accent-color);
    color: var(--color-black-white);
}

.uu-edit-data-submit:hover, .uu-edit-data-exit:hover {
    opacity: 0.8;
}

    /*? UEBERUNS MOBILE ?*/

@media screen and (max-width: 1300px) {
    .ueberuns {
        grid-template-columns: minmax(auto, 1000px);
    }

    .uu-user-more-left {
        min-width:  450px;
    }

    .uu-user-more-banner {
        width: 250px;
    }
    .uu-user-more-banner img {
        width: 220px;
    }

    .uu-user-more-names {
        width: 198px;
    }

    .uu-user-more-description {
        font-size: 0.94rem;
    }
}

@media screen and (max-width: 1100px) {
    .ueberuns{
        grid-template-columns: minmax(auto, 800px);
    }

    .uu-user-img {
        height: 125px;
    }

    .uu-user-more-left {
        min-width:  365px;
    }

    .uu-user-more-banner {
        width: 200px;
    }
    .uu-user-more-banner img {
        width: 170px;
    }

    .uu-user-more-names {
        width: 163px;
    }

    .uu-user-more-displayname p ,
    .uu-user-more-nick p {
        font-size: 1rem;
        font-weight: 700;
    }
    .uu-user-more-username p {
        font-size: 0.94rem;
        font-weight: 400;
    }

    .uu-user-more-middle {
        min-width: 170px;
    }

    .uu-user-more-status p,
    .uu-user-more-joined p {
        font-size: 0.85rem;
    }

    .uu-user-more-description {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 900px) {
    .ueberuns{
        grid-template-columns: minmax(auto, 600px);
    }

    .uu-user-img {
        height: 112.5px;
    }

    .uu-user-more {
        flex-wrap: wrap;

        height: 250px;
    }

    .uu-user-more-left {
        margin-top: 15px;
    }

    .uu-user-more-banner {
        width: 150px;
    }
    .uu-user-more-banner img {
        width: 120px;
    }

    .uu-user-more-names {
        width: 213px;
    }

    .uu-user-more-middle {
        border-right: 0;
        padding-right: 0;

        margin-top: 15px;
    }

    .uu-user-more-status p,
    .uu-user-more-joined p {
        font-size: 1rem;
    }

    .uu-user-more-right {
        padding-bottom: 15px;
    }

    .uu-user-more-description {
        padding: 15px;
        font-size: 1rem;
    }

    .uu-user-row:hover { /*mag ich nicht aber weiß nicht wie sonst */
        margin-bottom: 320px;
    }
}

@media screen and (max-width: 700px) {
    .ueberuns{
        grid-template-columns: 1fr;
    }

    .uu-user-img {
        height: 80px;
    }

    .uu-user-row {
        margin-bottom: 40px;
    }

    .uu-user-more {
        justify-content: center;
        height: 300px;
    }
    
    .uu-user-more-left {
        min-width:  0;
        border-right: 0;
        padding-right: 0;

        justify-content: center;
        width: 100%;
        height: 80px;
    }

    .uu-user-more-banner {
        width: 200px;
    }
    .uu-user-more-banner img {
        width: 170px;
    }

    .uu-user-more-names {
        width: 200px;
    }

    .uu-user-more-middle {
        margin: 0;
        padding: 0;
        height: 70px;
    }

    .uu-user-row:hover { /*mag ich nicht aber weiß nicht wie sonst */
        margin-bottom: 390px;
    }
}

@media screen and (max-width: 620px) {
    .editingModeButton {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    .uu-user-more-description {
        font-size: 0.94rem;
    }
}

@media screen and (max-width: 400px) {
    .uu-user-img {
        height: 60px;
    }

    .uu-user-more {
        height: 430px
    }

    .uu-user-more-left {
        flex-direction: column;

        width: 100%;
        height: 200px;
    }

    .uu-user-more-banner {
        margin: 0;
        width: 250px;
    }
    .uu-user-more-banner img {
        width: 220px;
    }

    .uu-user-more-names {
        margin-top: 15px;
    }

    .uu-user-more-names,
    .uu-user-more-middle {
        width: 220px;
        padding: 0;
    }

    .uu-user-more-displayname p,
    .uu-user-more-nick p,
    .uu-user-more-username p {
        width: 100%;
    }

    .uu-user-more-middle {
        height: 70px;
    }

    .uu-user-more-right {
        height: 150px;
    }

    .uu-user-row:hover { /*mag ich nicht aber weiß nicht wie sonst */
        margin-bottom: 470px;
    }
}

/** DISCORD ################################################################################################### **/

.discord {
    position: relative;

    padding-bottom: 40px;
    height: 100%;
}

.discord-top {
    display: flex;
    justify-content: space-around;
}

.discord-message-counter-list {
    width: 400px;
    height: 600px;

    padding: 20px 0;

    background-color: var(--bg-color-base);
    border-radius: 12px;

    overflow-x: hidden; 
    overflow-y: scroll;
}

.discord-message-counter-list-top3 {
    position: relative;
    padding-bottom: 2px;
    margin-bottom: 20px;

}
.discord-message-counter-list-top3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 2px;
    background-color: var(--accent-color);
}
.discord-message-counter-list-top3 .discord-message-counter-list-item-messages {
    margin-left: 55px;
}

.discord-message-counter-list-item {
    margin: 0 20px 20px 20px;
}
.discord-message-counter-list-item  a {
    text-decoration: none;
    color: var(--font-color);
}
.discord-message-counter-list-item-top {
    display: flex;
    align-items: center;

    font-size: 1.2rem;
}
.discord-message-counter-list-item-top svg {
    margin-right: 10px
}   



.discord-message-counter-list-item-bottom {
    display: flex;
}
.discord-message-counter-list-item-messages {
    margin-left: 25px;
}
.discord-message-counter-list-item-messages-since {
    font-size: 0.8rem;
    margin-left: 5px;
    font-weight: 300;
    line-height: 2.1
}


.discord-message-counter-total {
    display: flex;
    align-items: center;

    width: 400px;
    height: 50px;

    margin-top: 20px;
    padding-left: 20px;

    background-color: var(--bg-color-base);
    border-radius: 12px;
}
.discord-message-counter-total-messages {
    margin: 0 5px;
    font-weight: 500;
    font-size: 1.1rem;
}
.discord-message-counter-total-messages-since {
    font-size: 0.8rem;
    margin-left: 5px;
    font-weight: 300;
    line-height: 2
}

.discord-onlinetime-list  {
    width: 1050px;
    height: 670px;

    padding: 20px 0;

    background-color: var(--bg-color-base);
    border-radius: 12px;

    overflow-x: hidden; 
    overflow-y: scroll;
}



.discord-log {
    height: 95vh;
    width: 95vw;
    background-color: var(--bg-color-base);
    margin: 0 auto;
    border-radius: 12px;
    margin-top: 70px;
    overflow-x: hidden; 
    overflow-y: scroll;
    padding: 0 10px;
}

.discord-log-filter-form {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
.discord-log-filter-select {
    height: 30px;

    font-size: 1rem;
    color: var(--font-color);
    font-family: var(--font-sans-serif);

    border-radius: 5px;
    border: 1px solid var(--accent-color);
    padding: 0px 8px;
    margin-right: 20px;
    background: var(--bg-color-base);
}
.discord-log-container-button {
    height: 30px;
    width: 80px;

    margin-top: 24px;
    color: var(--font-color-inv);
    background: var(--nknp-color);
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
.discord-log-container-button:hover {
    opacity: 0.8;
}

.discord-log-table {
    width: 100%;
    border-collapse: collapse;
}
.discord-log-table-th {
    padding: 0px 10px 0px 10px;
    text-align: left;
    border-bottom: 2px solid var(--accent-color);
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 750px;
    font-size: 1.1rem;
}
.discord-log-table-td {
    padding: 0px 10px 0px 10px;
    text-align: left;
    border-bottom: 1px solid var(--accent-color);
    height: 40px;
    word-wrap: break-word;
    max-width: 750px;
}
.discord-log-table-td a {
    color: var(--font-color);
    text-decoration: none;
}

    /*? DISCORD MOBILE ?*/

@media screen and (max-width: 1500px) {
    .discord-top {
        flex-direction: column;
        align-items: center;
    }
    .discord-onlinetime-list {
        margin-top: 70px;
    }
}

@media screen and (max-width: 1100px) {
    .discord-onlinetime-list {
        width: 95vw;
    }
}

@media screen and (max-width: 700px) {
    .discord-log {
        overflow-x: scroll; 
    }
}
    
/** CLOUD #################################################################################################### **/

.cloud {
    position: relative;

    padding-bottom: 40px;
    height: calc(100vh - 100px);
}

.cloud-field {
    height: 100%;
    width: 75vw;
    background-color: var(--bg-color-base);
    margin: 0 auto;
    border-radius: 12px;
    padding: 20px;
}

.cloud-field-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.cloud-field-path {
    display: flex;
    align-items: center;
}
.cloud-field-path a {
    color: var(--font-color);
    font-size: 1.3rem;
    text-decoration: none;
}
.cloud-field-path a:hover {
    opacity: 0.8;
}
.cloud-field-path svg {
    height: 20px;
    width: 20px;
    fill: var(--svg-color);
    margin: 0 5px;
}

.cloud-field-toolbar {
    display: flex;
    justify-content: space-between;
    width: 150px;
}
.cloud-field-toolbar-upload {
    display: flex;
    justify-content: space-around;
    width: 100px;
}
.cloud-field-toolbar svg {
    height: 40px;
    width: 40px;
    fill: var(--svg-color);
}

.cloud-field-toolbar-upload-input {
    display: none;
}
.cloud-field-toolbar-upload-label {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.cloud-field-toolbar-create-folder {
    cursor: pointer;
}


.cloud-field-filesystem {
    width: 95%;
    margin: 0 auto;
    height: calc(100% - 70px - 70px);
    overflow-x: hidden; 
    overflow-y: scroll;

    position: relative;
}

.cloud-field-filesystem-item {
    display: flex;
    justify-content: space-between;

    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 20px;
}
.cloud-field-filesystem-item-left,
.cloud-field-filesystem-item-right {
    display: flex;
    align-items: center;
}
.cloud-field-filesystem-item-right {
    display: flex;
    justify-content: space-between;
    width: 100px;
}
.cloud-field-filesystem-item-left svg,
.cloud-field-filesystem-item-right svg,
.cloud-field-filesystem-item-right a {
    height: 40px;
    width: 40px;
    fill: var(--svg-color);
}
.cloud-field-filesystem-item-left p {
    margin-left: 150px;
    word-break: break-all;
}
.cloud-field-filesystem-item-left a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--font-color);
}

.cloud-create-folder {
    display: none;
    flex-direction: column;
    align-items: center;

    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 20px;

    background: var(--bg-color-alt);
    border-radius: 12px;

    z-index: 9999;
}

.cloud-create-folder-form {
    width: 250px;
} 
.cloud-create-folder-form-item {
    position: relative;
    margin-top: 10px;
    border-bottom: 2px solid var(--accent-color);
}
.cloud-create-folder-form-item label {
    position: absolute;
    bottom: 0;
    left: 5px;

    transform: translateY(-50%);
    pointer-events: none;
    transition: .5s;
}
.cloud-create-folder-form-item input:focus ~ label,
.cloud-create-folder-form-item input:valid ~ label {
    bottom: 30px;
}
.cloud-create-folder-form-item input {
    width: calc(100% - 26px - 5px);
    height: 50px;

    line-height: 1.25;
    font-size: 1rem;
    font-family: var(--font-sans-serif);
    color: var(--font-color);

    padding: 12px 5px 12px 5px;
    
    background: transparent;
    border: none;
    outline: none;
}
.cloud-create-folder-form-item svg {
    position: absolute;
    height: 26px;
    bottom: 12px;
    right: 5px;

    fill: var(--svg-color);
}

.cloud-create-folder-submit-button {
    height: 46px;
    width: 100%;

    margin-top: 40px;
    
    border-radius: 8px;
    border: none;

    font-size: 1rem;
    font-family: var(--font-sans-serif);

    cursor: pointer;

    background-color: var(--color-black-white);
    color: var(--font-color-inv);
}
.cloud-create-folder-submit-button:hover {
    opacity: 0.8;
}

.cloud-create-folder-back {
    display: flex;
    margin-top: 40px;
    text-decoration: none;
}
.cloud-create-folder-back svg {
    height: 35px;
    width: 35px;
    fill: var(--svg-color);
}
.cloud-create-folder-back p {
    display: flex;
    align-items: center;
    color: var(--font-color);
}
.cloud-create-folder-back:hover {
    opacity: 0.8;
}


.cloud-field-folder-settings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: right;
    height: 40px;
    margin-top: 30px;
}
.cloud-field-folder-settings-item {
    display: flex;
}
.cloud-field-folder-settings-item p {
    margin-right: 20px;
}

    /*? CLOUD MOBILE ?*/

@media screen and (max-width: 1000px) {
    .cloud-field-filesystem-item-left p {
        margin-left: 100px;
    }
}

@media screen and (max-width: 800px) {
    .cloud-field-filesystem-item-left p {
        margin-left: 50px;
    }
}

@media screen and (max-width: 600px) {
    .cloud-field-top {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .cloud-field-filesystem-item {
        flex-direction: column;
    }

    .cloud-field-filesystem-item-left p {
        margin-left: 10px;
        font-size: 0.9rem;
    }

    .cloud-field-filesystem-item-right {
        width: 80px;
    }
}

/** CLOCK ############################################################################################### **/

.clock {
    display: flex;
    position: relative;

    align-items: center;
    justify-content: center;

    height: 100vh;
}

.clock-field {
    font-size: 20rem;
    font-family: Arial, Helvetica, sans-serif;
}

.clock-settings {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px 15px;
    opacity: 0;
    transition: opacity 1s;
    cursor: pointer;
}
.clock-settings svg {
    height: 55px;
    width: 55px;
    fill: var(--svg-color);
    border-radius: 100%;
    background: var(--bg-color-base);
    padding: 7px;
}
.clock-settings:hover {
    opacity: 1;
}

.clock-settings-popup {
    display: none;

    position: absolute;
    bottom: 60px;
    right: 60px;

    max-height: 100%;
    width: 400px;
    padding: 40px;

    border-radius: 12px;

    background: var(--bg-color-base);
}

.clock-settings-popup-item {
    display: flex;
    justify-content: space-between;

    margin-bottom: 30px;
}
.clock-settings-popup-item-left {
    display: flex;
    align-items: center;
}
.clock-settings-popup-item-left svg {
    height: 25px;
    width: 25px;
    margin-right: 10px;
    fill: var(--svg-color);
}

    /*? MOBILE ?*/

@media screen and (max-width: 1300px) {
    .clock-field {
        font-size: 15rem;
    }
}

@media screen and (max-width: 1000px) {
    .clock-field {
        font-size: 10rem;
    }
}

@media screen and (max-width: 700px) {
    .clock-field {
        font-size: 5rem;
    }
}

/** RESISTANCE CALCULATOR ##################################################################################### **/

.res-calc {
    display: grid;
    grid-template-columns: repeat(2, 555px);
    grid-template-rows: repeat(2, auto);
    column-gap: 150px;
    /* row-gap: 100px; */
    justify-content: center;
    /* align-items: center; */

    position: relative;

    height: calc(100vh - 100px);
}


.res-calc-top-links {
    grid-row: 1;
    grid-column: 1;

    width: 555px;
}
.res-calc-rings,
.res-calc-res-value {
    height: 144.4px;
    margin-bottom: 50px;
    border-radius: 12px;
    background: var(--bg-color-base);
    padding: 20px;
}

.res-calc-params {
    grid-row: 1;
    grid-column: 2;

    height: 435.4px;
    width: 555px;
    border-radius: 12px;
    background: var(--bg-color-base);
    padding: 20px;
}

.res-calc-evaluation {
    display: flex;
    
    grid-row: 2;
    grid-column: 1 / span 2;
    margin: 0 auto;

    height: 316.417px;
    width: 1050px;
    
    border-radius: 12px;
    background: var(--bg-color-base);
    padding: 20px;
}

.res-calc-rings-headline,
.res-calc-res-value-headline,
.res-calc-params-headline,
.res-calc-evaluation-output-headline {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.res-calc-rings-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;

}
.res-calc-rings-item-left {
    margin-left: 10px;
}



.res-calc-res-value-item-field {
    display: inline-flex;
    position: relative;
    
    height: 40px;
    width: 100%;
    border: solid 2px var(--bg-color-alt2);
    border-radius: 8px;
}
.res-calc-res-value-item-field svg {
    fill: var(--svg-color);
    height: 36px;
    width: 36px;
}
.res-calc-res-value-item-field-input {
    margin: 4px;
    padding: 0 10px;
    background: none;
    border: none;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    color: var(--font-color);
    font-size: 1rem;
    width: 85%;
}
.res-calc-res-value-item-field-res-unit {
    display: flex;
    align-items: center;
    justify-content: end;
    cursor: pointer;
    width: 60px;
}
.res-calc-res-value-item-field-res-unit-dropdown {
    display: none;
    
    position: absolute;
    top: 38px;
    right: 2.5%;

    /* width: 50px; */
    padding: 5px 5px 0px 5px;

    background: var(--color-black-white);

    border-radius: 8px;
    z-index: 9999;
}
.res-calc-res-value-item-field-res-unit-dropdown li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    height: 30px;
    margin-bottom: 5px;
    border: solid 1px var(--accent-color);
    background: var(--color-white-black);
}



.res-calc-params-rings-item {
    margin-left: 10px;
    margin-bottom: 10px;
}

.res-calc-params-rings-item-selection-field {
    display: inline-flex;
    position: relative;
    
    height: 40px;
    width: 100%;
    border: solid 2px var(--bg-color-alt2);
    border-radius: 8px;
    cursor: pointer;
}
.res-calc-params-rings-item-selection-field svg {
    fill: var(--svg-color);
    height: 36px;
    width: 36px;
}

.res-calc-params-rings-item-selection-field-selection {
    display: flex;
    justify-content: space-between;

    margin: 4px;
    padding: 0 10px;
    width: 90%;
    border-radius: 5px;
    line-height: 1.8;
}

.res-calc-params-rings-item-selection-field-dropdown {
    display: none;
    
    position: absolute;
    top: 38px;
    left: 2.5%;

    width: 95%;
    padding: 5px 5px 0px 5px;

    background: var(--color-black-white);

    border-radius: 8px;
    z-index: 9999;
}
.res-calc-params-rings-item-selection-field-dropdown li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    height: 30px;
    margin-bottom: 5px;
    border: solid 1px var(--accent-color);
}


.res-calc-params-ohm-value {
    margin-top: 35px;
}



.res-calc-evaluation-resistor {
    display: flex;
    flex-direction: column;
    width: 515px;
}

.res-calc-evaluation-resistor-values {
    display: flex;
    width: 515px;
}
#ringAdditon1,
#ringAdditon2,
#ringAdditon3 {
    background: #777;
    opacity: 0.5;
    text-align: center;
    height: 30px;
    width: 50px;
    border-radius: 5px;
    font-size: 1.1em;
    line-height: 1.8;
}
#ringAdditon1 {
    margin-left: 51px;
}
#ringAdditon2 {
    margin-left: 45px;
}
#ringAdditon3 {
    margin-left: 37px;
}

#ringAdditon4,
#ringAdditon5 {
    background: #777;
    opacity: 0.5;
    text-align: center;
    height: 30px;
    width: 75px;
    border-radius: 5px;
    font-size: 1.1rem;
    line-height: 1.8;
}
#ringAdditon4 {
    margin-left: 26px; 
}
#ringAdditon5 {
    margin-left: 15px; 
}

.res-calc-evaluation-output {
    margin-left: 30px;
}
.res-calc-evaluation-output-ohmValue {
    margin-left: 40px;
    font-size: 3rem;
}

    /*? MOBILE ?*/

@media screen and (max-height: 880px) {
    .res-calc {
        row-gap: 20px;
        height: 100%;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 1300px) {
    .res-calc {
        column-gap: 20px;
    }
}

@media screen and (max-width: 1160px) {
    .res-calc {
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, auto);
        row-gap: 20px;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 40px;
    }

    .res-calc-top-links {
        grid-row: 1;
        grid-column: 1;
        margin: 0 auto;
    }

    .res-calc-params {
        grid-row: 2;
        grid-column: 1;
        margin: 0 auto;
    }
    
    .res-calc-evaluation {
        grid-row: 3;
        grid-column: 1;
    }

    .res-calc-rings {
        margin-bottom: 20px;
    }
    .res-calc-res-value {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1070px) {
    .res-calc-evaluation {
        flex-direction: column;

        height: 100%;
        width: 555px;
    }
    .res-calc-evaluation-output {
        margin-left: 0px;
        margin-top: 20px;
    }
}

@media screen and (max-width: 560px) {
    .res-calc-top-links,
    .res-calc-params,
    .res-calc-evaluation {
        display: none;
    }

    .res-calc {
        height: calc(100vh - 100px);
    }
}

/** TREE-DIAGRAM ############################################################################################# **/

.tree-dia {
    position: relative;
    padding-bottom: 40px;
    height: calc(100vh - 100px);

    display: grid;
    grid-template-columns: 500px 1fr;
    grid-template-rows: 1fr;
    gap: 50px;
    
}

.tree-dia-config {
    grid-column: 1;

    height: 100%;
    border-radius: 12px;
    background: var(--bg-color-base);
    padding: 20px;
    margin-left: 50px;
}
.tree-dia-config-headline {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.tree-dia-config-general {
    margin-bottom: 30px;
}

.tree-dia-config-general-passages,
.tree-dia-config-general-options-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    width: 150px;
    margin-left: 10px;
    margin-bottom: 20px;
}
.tree-dia-config-general-options-select,
.tree-dia-config-general-passages-select {
    height: 30px;
    font-size: 1rem;
    color: var(--font-color);
    font-family: var(--font-sans-serif);
    border-radius: 5px;
    border: 1px solid var(--accent-color);
    padding: 0px 8px;
    margin-right: 20px;
    background: var(--bg-color-base);
}

.tree-dia-config-general-options-entities-input {
    display: flex;
}

.tree-dia-config-general-options-entities-input-item {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid var(--nknp-color);
    background: var(--bg-color-base);
    margin: 0px 5px 20px 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    
}
.tree-dia-config-general-options-entities-input-item-input {
    width: 70%;
    background: none;
    border: none;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    color: var(--font-color);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2px;
}

.tree-dia-config-general-generate {
    display: flex;
    justify-content: right;
}
.tree-dia-config-general-generate-button {
    width: 120px;
    height: 35px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin-top: 20px;    
    color: var(--font-color-inv);
    background-color: var(--nknp-color);
    cursor: pointer;
}
.tree-dia-config-general-generate-button:hover {
    opacity: 0.8;
}

.tree-dia-config-editing {
    margin-left: 10px;
}
.tree-dia-config-editing p {
    margin-left: 35px;
}

.tree-dia-output {
    grid-column: 2;

    display: grid;
    grid-template-rows: 40px 1fr 100px;
    grid-template-columns: 1fr;

    height: 100%;
    border-radius: 12px;
    background: var(--bg-color-base);
    padding: 20px;
    margin-right: 50px;
}
.tree-dia-output-headline {
    grid-row: 1;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.tree-dia-output-data {
    grid-row: 2;
    background: var(--bg-color-base);
}

.tree-dia-output-passages {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

.tree-dia-output-block {
    display: flex;
    width: 100%;
    /* width: 142.2px; */
    justify-content: space-around;
}

.tree-dia-output-entities {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid var(--nknp-color);
    background: var(--bg-color-base);

    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;
}
.tree-dia-output-start {
    border: none;
    background: none;
}
.tree-dia-output-entities-input {
    width: 70%;
    background: none;
    border: none;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    color: var(--font-color);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2px;
}

.tree-dia-output-line {
    position: absolute;
    background-color: var(--nknp-color);
    height: 3px;
    transform-origin: 0px 1.5px;

    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */

    z-index: 1;
}
.tree-dia-output-line-input,
.tree-dia-output-line-input-format {
    width: 100px;
    background: none;
    border: none;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    color: var(--font-color);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}
.tree-dia-output-line-input-format {
    display: none;
}

.tree-dia-output-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: none;
    background: none;

    cursor: pointer;

    z-index: 2;
}
.tree-dia-output-placeholder:hover {
    border: 2px solid var(--nknp-color);
    opacity: 0.5;
}

.tree-dia-output-screenshot {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.tree-dia-output-screenshot-button {
    width: 120px;
    height: 30px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin-top: 20px;    
    color: var(--font-color-inv);
    background-color: var(--nknp-color);
    cursor: pointer;
}
.tree-dia-output-screenshot-button:hover {
    opacity: 0.8;
}

.tree-dia-output-contextmenu-entity,
.tree-dia-output-contextmenu-placeholder {
    display: none;
    position: absolute;
    background-color: var(--bg-color-alt2);
    border-radius: 12px;
    padding: 5px;
    z-index: 1000;
}

.tree-dia-output-contextmenu-entity ul,
.tree-dia-output-contextmenu-placeholder ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tree-dia-output-contextmenu-entity ul li,
.tree-dia-output-contextmenu-placeholder ul li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8rem;
}

.tree-dia-output-contextmenu-entity ul li:hover,
.tree-dia-output-contextmenu-placeholder ul li:hover {
    color: var(--nknp-color);
}

    /*? MOBILE ?*/

@media screen and (max-width: 1400px) {
    .tree-dia {
        grid-template-columns: 300px 1fr;
        gap: 20px
    }

    .tree-dia-config {
        margin-left: 20px;
    }

    .tree-dia-output {
        margin-right: 20px;
    }
}

/** URL-SHORTENER ############################################################################################# **/

.url-shortener {
    position: relative;
    padding-bottom: 40px;
    height: calc(100vh - 100px);
}

.url-shortener-field {
    height: 100%;
    width: 75vw;
    background-color: var(--bg-color-base);
    margin: 0 auto;
    border-radius: 12px;
    padding: 20px;
}

.url-shortener-field-toolbar {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 40px;
    width: 100%;
    margin-bottom: 30px;
}
.url-shortener-field-toolbar svg {
    height: 40px;
    width: 40px;
    fill: var(--svg-color);
    cursor: pointer;
}

.url-shortener-field-list {
    width: 95%;
    margin: 0 auto;
    height: calc(100% - 70px); /* toolbar -70px */
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
.url-shortener-field-list-item {
    display: flex;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 20px;
}
.url-shortener-field-list-item-left {
    display: flex;
    align-items: center;
}
.url-shortener-field-list-item-right-short-url {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 210px;
    margin-left: 50px;
    cursor: pointer;
}

.url-shortener-field-list-item-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 20px;
    border-left: 2px solid var(--accent-color);
}

.url-shortener-field-list-item-right-long-url {
    width: 880px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left: 20px;
}
.url-shortener-field-list-item-left svg,
.url-shortener-field-list-item-right svg,
.url-shortener-field-list-item-right a {
    height: 40px;
    width: 40px;
    fill: var(--svg-color);
}


.url-shortener-field-add-url {
    display: none;
    flex-direction: column;
    align-items: center;

    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 20px;

    background: var(--bg-color-alt);
    border-radius: 12px;

    z-index: 9999;
}
.url-shortener-field-add-url-form {
    width: 700px;
} 
.url-shortener-field-add-url-form-item {
    position: relative;
    margin-top: 10px;
    border-bottom: 2px solid var(--accent-color);
}
.url-shortener-field-add-url-form-item label {
    position: absolute;
    bottom: 0;
    left: 5px;

    transform: translateY(-50%);
    pointer-events: none;
    transition: .5s;
}
.url-shortener-field-add-url-form-item input:focus ~ label,
.url-shortener-field-add-url-form-item input:valid ~ label {
    bottom: 30px;
}
.url-shortener-field-add-url-form-item input {
    width: calc(100% - 26px - 5px);
    height: 50px;

    line-height: 1.25;
    font-size: 1rem;
    font-family: var(--font-sans-serif);
    color: var(--font-color);

    padding: 12px 5px 12px 5px;
    
    background: transparent;
    border: none;
    outline: none;
}
.url-shortener-field-add-url-form-item svg {
    position: absolute;
    height: 26px;
    bottom: 12px;
    right: 5px;

    fill: var(--svg-color);
}

.url-shortener-field-add-url-submit-button {
    height: 46px;
    width: 100%;

    margin-top: 40px;
    
    border-radius: 8px;
    border: none;

    font-size: 1rem;
    font-family: var(--font-sans-serif);

    cursor: pointer;

    background-color: var(--color-black-white);
    color: var(--font-color-inv);
}
.url-shortener-field-add-url-submit-button:hover {
    opacity: 0.8;
}

    /*? MOBILE ?*/

@media screen and (max-width: 1830px) {
    .url-shortener-field-list-item-right-long-url {
        width: 780px;
    }
}
@media screen and (max-width: 1690px) {
    .url-shortener-field-list-item-right-long-url {
        width: 680px;
    }
}
@media screen and (max-width: 1550px) {
    .url-shortener-field-list-item-right-long-url {
        width: 580px;
    }
}
@media screen and (max-width: 1420px) {
    .url-shortener-field-list-item-right-long-url {
        width: 480px;
    }
}
@media screen and (max-width: 1260px) {
    .url-shortener-field-list-item-right-long-url {
        width: 380px;
    }
}
@media screen and (max-width: 1120px) {
    .url-shortener-field-list-item-right-long-url {
        width: 280px;
    }
}

@media screen and (max-width: 990px) {
    .url-shortener-field-list {
        overflow-x: scroll;
    }
}

/** MATH GAME ################################################################################################# **/


/** TICTACTOE ################################################################################################# **/

.tictactoe {
    display: flex;
    align-items: center;
    flex-direction: column;

    height: calc(100vh - 100px);
}

.ttt-score-playing {
    width: 70%;
    background: var(--bg-color-base);
    color: var(--font-color);
    text-align: center;
    font-size: 50px;
    border-radius: 12px;
    padding: 20px;
}

#ttt-score {
    font-family: var(--font-sans-serif)
}

#ttt-X-score {
    color: red;
    font-weight: 1000;
    text-shadow: 0 0 15px red;
}

#ttt-O-score {
    color: blue;
}

.ttt-field {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 70%;
    margin-top: 20px;
    background: var(--bg-color-base);
    border-radius: 12px;
    padding: 20px;
}

.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, 220px);
    grid-template-rows: repeat(3, 220px);
    gap: 3px;
    background: var(--color-black-white);
}

.ttt-board-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-color-base);
}

.ttt-board-cell-btn {
    height: 220px;
    width: 220px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.clickedX {
    background-color: transparent;
    cursor: default;
    background-image: url("../img/tictactoe/X.png");
    background-position: center;
    background-size: 160px auto;
    background-repeat: no-repeat;
}

.clickedO {
    background-color: transparent;
    cursor: default;
    background-image: url("../img/tictactoe/O.png");
    background-position: center;
    background-size: 190px auto;
    background-repeat: no-repeat;
}

    /*? MOBILE ?*/

@media screen and (max-height: 980px) {
    .tictactoe {
        position: relative;
        height: 100%;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 1009px) {
    .ttt-score-playing {
        width: 706px;
    }
    .ttt-field {
        width: 706px;
    }
}

@media screen and (max-width: 750px) {
    .tictactoe {
        height: calc(100vh - 100px);
    }
    .ttt-score-playing {
        display: none;
    }
    .ttt-field {
        display: none;
    }
}

/** TETRIS ################################################################################################# **/

.tetris {
    position: relative;
    padding-bottom: 40px;
    height: 100%;

    /* display: flex;
    align-items: center;
    flex-direction: column; */

    display: grid;
    grid-template-columns: 827px auto;
    /* grid-template-columns: auto auto; */
    grid-template-rows: 75px auto;
    justify-content: center;

    column-gap: 100px;
    row-gap: 50px;
}

.t-score {
    width: 100%;
    height: 75px;

    margin: 0 auto;
    grid-column: 2;
    grid-row: 1;

    background-color: var(--bg-color-base);
    color: var(--color-black-white);
    text-align: center;
    font-size: 50px;
    border-radius: 12px;
}

.t-field {
    display: flex;
    align-items: center;
    flex-direction: column;

    margin: 0 auto;
    grid-row: 1 / span 2;
    background-color: var(--bg-color-base);
    border-radius: 12px;
    padding: 20px;
}

.t-grids-container {
    display: grid;
    grid-template-columns: 0fr 1fr;
}

.t-switch-grid {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;

    height: 205px;
    width: 256px;
    border: 1px solid lightgray;
    gap: 1px;
    margin-right: 20px;
    background-color: lightgray;
}

.t-switch-grid-cell {
    height: 50px;
    width: 50px;
    background-color: var(--bg-color-base);
}

.t-grid {
    display: flex;
    flex-wrap: wrap;

    height: 817px;
    width: 511px;
    border: 1px solid lightgray;
    gap: 1px;
    background-color: lightgray;
}

.t-grid-cell {
    height: 50px;
    width: 50px;
    background-color: var(--bg-color-base);
}

.t-rules {
    height: 310px;

    grid-column: 2;
    grid-row: 2;

    margin: 0 auto;

    background-color: var(--bg-color-base);
    color: var(--color-black-white);
    text-align: center;
    font-size: 30px;
    border-radius: 12px;
    padding: 20px;
}

/** 2048 ################################################################################################# **/

.znva {
    position: relative;
    padding-bottom: 40px;
    height: calc(100vh - 100px);

    display: flex;
    justify-content: center;
}

.znva-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    background-color: var(--bg-color-base);

    border-radius: 12px;
    padding: 20px;
    height: 840px;
}

#znva-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

    height: 700px;
    width: 700px;
    border: 1px solid var(--color-black-white);
    gap: 1px;
    background-color: var(--color-black-white);
}

.znva-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    background-color: var(--bg-color-base);
}

.x2 { background-color: red; }
.x4 { background-color: orange; }
.x8 { background-color: lightgreen; }
.x16 { background-color: green; }
.x32 { background-color: turquoise; }
.x64 { background-color: cyan; }
.x128 { background-color: blue; }
.x256 { background-color: indigo; }
.x512 { background-color: violet; }
.x1024 { background-color: magenta; }
.x2048 { background-color: pink; }

.znva-restart-btn {
    font-size: 30px;
    width: 200px;
    height: 50px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    color: var(--bg-color-base);
    background-color: var(--color-black-white);
    cursor: pointer;
}


.znva-victory-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 600px;
    padding: 30px;
    font-size: 30px;
    transform: translate(-50%, -50%);
    text-align: center;
    background: var(--bg-color-base);
    border-radius: 12px;
    border: 3px solid var(--color-black-white);
    z-index: 9999;
}

.znva-victory-popup-btns {
    display: flex;
    justify-content: center;
    align-items: center;
}

.znva-victory-popup-btn {
    width: 170px;
    height: 50px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin: auto;
    color: var(--bg-color-base);
    background-color: var(--color-black-white);
    cursor: pointer;
}

/** PRIVACY-POLICY ########################################################################################### **/

.privacy-policy {
    position: relative;

    padding-bottom: 40px;
    height: 100%;
}

.privacy-policy-content {
    width: 90vw;
    background-color: var(--bg-color-base);
    margin: 0 auto;
    border-radius: 12px;
    padding: 20px;
}

/** FOOTER ################################################################################################## **/

.footer {
    padding: 40px 40px 5px 40px; /* Die 5px + 35px von .footer-copyright */

    background: var(--bg-color-alt)
}

.footer-items {
    display: grid;
    grid-template-columns: auto auto auto auto;

    max-width: 1620px;
    margin: 0 auto;
}

.footer-header {
    position: relative;
    margin-bottom: 20px;

    font-size: 1.5rem;
}
.footer-header::before {
    content: '';
    position: absolute;
    bottom: 0px;
    background: var(--nknp-color);
    height: 2px;
    width: 50px;
}

.footer-logo,
.footer-logo svg {
    height: 300px;
    width: 300px;
    fill: var(--svg-color);
}

.footer-discord iframe {
    width: 400px; 
    height: 293px;
}

.footer-contact {
    height: 300px;
}

.footer-contact-item {
    margin-left: 10px;
    margin-bottom: 15px;
}

.footer-contact-item a {
    display: flex;
    align-items: center;

    font-size: 1.2rem;

    color: var(--font-color);
    text-decoration: none;
}

.footer-contact-item a img {
    height: 50px;
    width: 50px;

    margin-right: 10px;

    border-radius: 100%;
}

.footer-contact-item a:hover {
    color: var(--nknp-color);
}

.footer-infos {
    height: 300px;
}

.footer-infos-item {
    margin-left: 10px;
}

.footer-infos-item p{
    display: inline-block;

    margin: 0;
    padding-right: 8px;
}

.footer-infos-item a{
    color: var(--font-color);
    font-size: 1.2rem;

    text-decoration: none;
}

.footer-infos-item a:hover {
    color: var(--nknp-color);
}

.footer-copyright {
    grid-row: 2;
    grid-column: 1 / span 4;
    text-align: center;

    font-size: 0.9rem;

    margin-top: 13.4px; /*-21.6px textgröße*/
}

    /*? MOBILE ?*/

@media screen and (max-width: 1200px) {
    .footer-items {
        grid-template-columns: auto auto;
        column-gap: 10px;
        row-gap: 30px;
        justify-content: space-around;

        

        text-align: center;
    }

    .footer-logo {
        width: 100%;
    }

    .footer-contact {
        height: 200px;
    }

    .footer-contact-item a {
        justify-content: center;
    }

    .footer-infos {
        height: 100px;
    }

    .footer-copyright {
        grid-row: 3;
        grid-column: 1 / span 2;

        margin-top: 0px;
    }
}

@media screen and (max-width: 800px) {
    .footer-items {
        grid-template-columns: auto;
        
        row-gap: 30px;
    }

    .footer-copyright {
        grid-column: 1;
        grid-row: 5;
    }
}

@media screen and (max-width: 500px) {
    .footer-discord iframe {
        width: 300px; 
        height: 293px;
    }
}

@media screen and (max-width: 400px) {
    .footer-logo,
    .footer-logo svg {
        height: 250px;
        /*width: 200px;*/
    }

    .footer-discord iframe {
        width: 250px; 
        height: 293px;
    }
}

@media screen and (max-width: 350px) {
    .footer {
        padding: 20px 0px 5px 0px;
    }
}


@media screen and (max-width: 300px) {
    body {
        display: none;
    }
}

/** Background Amimation ################################################################################ **/

.background-animation {
    height: 0;
    width: 0 ;
}

.background-animation svg {
    position: absolute;

    
    
    height: calc(100% + 100px);
    width: 100vw;

    right: 0;
    top: -100px;

    z-index: -999;
}

@media screen and (max-width: 650px) {
    .background-animation svg {
      height: calc(100% + 260px);
      top: -260px;
    }
  }

/** Toggle Button ######################################################################################## **/

.toggle-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-button-label {
    background-color: var(--color-black-white);
    width: 50px;
    height: 25px;
    border-radius: 200px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}
.toggle-button-label::before {
    position: absolute;
    content: '';
    background-color: var(--accent-color);
    width: 20px;
    height: 20px;
    border-radius: 100%;

    margin: 2.5px;
    
    transition: 0.2s;
}
.toggle-button-input:checked + .toggle-button-label {
    background-color: var(--nknp-color);
}
.toggle-button-input:checked + .toggle-button-label::before {
    transform: translateX(25px);
}
.toggle-button-input {
    display: none;
}

/** Checkbox ############################################################################################ **/

.checkbox-container {
    position: relative;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkbox-label {
    position: absolute;
    top: 0;
    left: 0;

    cursor: pointer;

    height: 25px;
    width: 25px;

    border: 2px solid var(--accent-color);
    border-radius: 8px;

    background: none;
}

.checkbox-input:checked ~ .checkbox-label {
    background-color: var(--nknp-color);
}

.checkbox-label:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-input:checked ~ .checkbox-label:after {
    display: block;
}

.checkbox-container .checkbox-label:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/** Radiobutton ############################################################################################ **/

.radio-button-container {
    position: relative;
}

.radio-button-input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.radio-button-label {
    position: absolute;
    top: 0;
    right: 0;

    cursor: pointer;


    width: 25px;
    height: 25px;

    border-radius: 100%;
    border: 2px solid var(--accent-color);

    background: none;
}

.radio-button-input:checked ~ .radio-button-label {
    background-color: var(--nknp-color);
}

/** File Button ######################################################################################## **/

.file-upload-container {
    position: relative;
}

.file-upload-input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.file-upload-label {
    position: absolute;
    top: 0;
    right: 10px;

    text-align: center;

    cursor: pointer;

    height: 25px;
    padding: 0 10px;

    border-radius: 5px;

    font-size: 0.9rem;
    font-family: var(--font-sans-serif);
    line-height: 1.9;
    color: var(--font-color);

    background: var(--accent-color);
}

.file-upload-button {
    position: absolute;
    top: 0;
    left: 10px;

    cursor: pointer;

    height: 25px;
    padding: 0 10px;

    border-radius: 5px;
    border: none;

    font-size: 0.9rem;
    font-family: var(--font-sans-serif);
    line-height: 1.9;
    color: var(--font-color);

    background: var(--nknp-color);
}

/** Cookie PopUp ######################################################################################## **/

.cookie-popup {
    display: block;
    
    position: fixed;
    top: 50%;
    left: 50%;

    max-width: 600px;

    padding: 30px;

    transform: translate(-50%, -50%);

    background: var(--bg-color-base);
    border-radius: 12px;

    z-index: 9999;
}

.cookie-popup-headline {
    font-weight: 800;
    font-size: 1.8rem;

    margin-bottom: 10px;
}

.cookie-popup-infotext {
    font-size: 0.85rem;
}
.cookie-popup-infotext a {
    color: var(--nknp-color);
    text-decoration: none;
}
.cookie-popup-infotext a:hover {
    opacity: 0.8;
}

.cookie-popup-checkboxes {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}
.cookie-popup-checkboxs-item p {
    margin-left: 35px;
}

.cookie-popup-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 100px;
}
.cookie-popup-buttons-accept {
    width: 200px;
    height: 50px;
    font-size: 1rem;
    font-weight: 500;

    border: 2px solid var(--accent-color);
    border-radius: 8px;
    color: var(--font-color);
    background: none;
    cursor: pointer;
}
.cookie-popup-buttons-all {
    width: 170px;
    height: 50px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin-left: 40px;

    color: var(--font-color-inv);
    background-color: var(--nknp-color);
    cursor: pointer;
}
.cookie-popup-buttons-accept:hover,
.cookie-popup-buttons-all:hover {
    opacity: 0.8;
}

    /*? MOBILE ?*/

@media screen and (max-width: 470px) {
    .cookie-popup-infotext {
        font-size: 0.9rem;
    }

    .cookie-popup {
        top: 0;
        left: auto;
        transform: none;

        width: 100%;
        height: 100%;

        border-radius: 0;
        overflow: auto;
    }

    .cookie-popup-checkboxes {
        flex-direction: column;
    }
    .cookie-popup-checkboxs-item {
        margin-bottom: 20px;
    }


    .cookie-popup-buttons {
        margin-top: 40px;
    }
    .cookie-popup-buttons-accept,
    .cookie-popup-buttons-all {
        font-size: 0.9rem;
    }
}

/** Scrollbar PopUp ######################################################################################## **/

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #0094ff;

    border-radius: 25px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #0066cc;
}