@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
}
/* Variablen */
:root
{
    --black: #000000;
    --black2: #181818;
    --black3: #222222;
    --blackshadow: rgba(0, 0, 0, 0.3);
    --white: #ffffff;
    --white2: #ffffff;
    --white3: #f3f3f3;
    --whiteshadow: rgba(255, 255, 255, 0.4);
    --green: #6d8f6d;
    --green2: #5a745a;
    --headerHight: 80px;
    --footerHight: 50px;
}
.dark
{
    --black : #ffffff;
    --black2: #ffffff;
    --black3: #f3f3f3;
    --blackshadow: rgba(255, 255, 255, 0.1);
    --white: #000000;
    --white2: #181818;
    --white3: #222222;
    --whiteshadow: rgba(0, 0, 0, 0.3);
    --green: #3d4e3d;
    --green2: #536d53;
}
body
{
    background: var(--white3);
    color: var(--black);
    text-align: var(--logged);
    overflow-x: hidden;
}

/* Header */
header
{
    z-index: 1000;
    background: var(--green);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--headerHight);
    box-shadow: 0 5px 10px var(--blackshadow);
    padding: 0 5%;
    h2{
        font-size: 2.5em;
        color: var(--black);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    ul
    {
        .login
        {
            a{
                background: #bd2618;
                color: white!important;
                padding: 10px 20px;
                border-radius: 6px;
            }
            &.register a
            {
                background: #2b2b2b;
            }
        }
        .logout
        {
            a{
                background: #bd2618;
                color: white!important;
                padding: 10px 20px;
                border-radius: 6px;
            }
            &.register
            {
                display: none
            }
        }
    }
    /* Normale Liste */
    .list{
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        li{
            margin: 0 25px;
            font-size: 1.2em;
            a{
                color: var(--black);
                text-decoration: none;
            }
        }
    }
    /* Handyliste */
    i
    {
        font-size: 1.7em;
        display: none!important;
        cursor: pointer;
        &.fa.fa-xmark
        {
            display: none;
        }
    }
    .handylist
    {
        position: fixed;
        background: white;
        flex-direction: column;
        padding: 20px;
        width: 100%;
        right: -100%;
        height: calc(100% - (var(--headerHight) + var(--footerHight)));
        line-height: 60px;
        top: var(--headerHight);
        display: none;
        transition: .5s ease-in-out;
        z-index: 100;
        li
        {
            list-style: none;
            text-align: right;
            font-size: 1.2em;
            a
            {
                color: black;
                text-decoration: none;
            }
        }
        &.collapse
        {
            right: 0%;
        }
    }
}

/* Messagefield */
.messagefield
{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    overflow: hidden;
    box-shadow: 0 0 10px var(--blackshadow);
    border-radius: 15px;
    h2{
        padding: 5px 10px;
        background: #f44336;
    }
    &.warning h2
    {
        background: #ffc107;
    }
    &.success h2
    {
        background: #4caf50;
    }
    p{
        padding: 20px 50px 20px 10px;
        background: var(--white3);
        color: var(--black);
    }
    span{
        width: 100%;
        height: 5px;
        background-color: grey;
        display: block;
        &.startTimer
        {
            animation: messageTimer 5s linear forwards;
        }
    }
}

/* Footer */
footer
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001623;
    color: #00fe78;
    height: var(--footerHight);
    width: 100%;
    bottom: 0;
}

/* Responsive */
@media(max-width: 1050px)
{
    header.login
    {
        .list
        {
            display: none;
        }
        i
        {
            display: block!important;
            &.fa-xmark
            {
                display: none!important;
            }
        }
        i.collapse
        {
            display: none!important;
            &.fa-xmark
            {
                display: block!important;
            }
        }
        .handylist
        {
            display: block;
        }
    }
}
@media(max-width: 850px)
{
    header.logout
    {
        .list
        {
            display: none;
        }
        i
        {
            display: block!important;
            &.fa-xmark
            {
                display: none!important;
            }
        }
        .handylist
        {
            display: block;
        }
    }
}
@media(max-width: 700px)
{
    header
    {
        h2
        {
            font-size: 2em;
        }
    }
}


/* Animations */
@keyframes messageTimer
{
    0%
    {
        width: 100%;
    }
    100%
    {
        width: 0%;
    }
}