/* Kolory strony */
:root {
    --text: rgb(224, 224, 224);
    --button-text: rgb(192, 192, 192);
    --backgroud: rgb(16, 16, 16);
    --border: rgb(64, 64, 64);

    --header-height: 64px;
    /* min 20, font+marker+border */


    background-color: var(--backgroud);
    color: var(--text);
    height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
    text-decoration: none;
    color: var(--button-text);
    cursor: pointer;
}

#hello,
#hello_dot {
    display: inline;
    font-size: 48px;
}

#wip {
    color: grey;
    animation-duration: 500ms;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-name: wipAnimation;
}
@keyframes wipAnimation {
    from {color: transparent;}
    to {color: grey;}
}

h2 {
    margin-top: 16px;
    margin-bottom: 0px;
}



/* kąkuter */
@media only screen and (min-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: center;

        margin: 100px;
        height: calc(100% - 200px);

    }


    main {
        display: flex;
        justify-content: flex-start;
    }

    .topic {
        margin-right: 30px;
    }

    .button_container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .button_container a {
        margin-right: auto;
    }





    /* Animacja przycisków */
    .marker {
        background-color: var(--text);
        height: 2px;
        width: 0%;
        margin: auto;
    
        transition: 0.3s
    }

    .button {
        transition: 0.3s;
    }
    .button:hover  {
        color: var(--text);
    }

    .button:hover > .marker {
        width: 80%;
    }
}



/* mobile */
@media only screen and (max-width: 767px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: center;

        margin: 50px;
        height: calc(100% - 100px);

    }




    main {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .topic {
        margin-right: 30px;
    }

    .button_container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .button_container a {
        margin-right: auto;
    }
}