/*
    Name: Tim van Lokven
    Date: 17-11-2025

    algemene styling
*/

/*
    De standaard styling ingesteld voor mobiele aparaten.
*/
@font-face
{
    font-family: arvobold;
    src: url(../fonts/Arvo-BoldItalic.ttf)
}

@font-face
{
    font-family: arvo;
    src: url(../fonts/Arvo-Regular.ttf)
}

body
{
    background-color: #172845;
    transition: 0.5s;
    margin: 0px;
    font-size: 120%;
}

header
{
    background-color: #415873;
    color: #EBEBEB;
    font-family: arvobold;
    transition: 0.5s;
}

main
{
    background-color: #5978A6;
    color: #172845;
    font-family: arvo;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer
{
    background-color: #415873;
    color: #EBEBEB;
    font-family: arvo;
    transition: 0.5s;
    display: flex;
    justify-content: center;
}

.basicList
{
    display: flex;
    flex-direction: column;
    background-color: #87a5c8;
    transition: 0.5s;
}

.avatar li
{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    margin: 0px;
}

.navTabDesk
{
    display: none;
}

.navbar
{
    display: block;
}

a
{
    color: #EBEBEB;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

main h2
{
    display: flex;
    justify-content: center;
}
/*
    Veranderd de styling als de minimale schermgroote 600 pixels of grooter is.
*/
@media (min-width: 600px)
{
    body
    {
        background-color: #261D2B;
        transition: 0.5s;
    }

    .avatar li
    {
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5%;
        margin: 0px;
    }

    .navTabDesk
    {
        display: block;
        justify-content: left;
    }

    .navTabDesk a
    {
        background-color: #8f5057;
        padding: 4%;
        border-radius: 8px;
        transition: 0.3s;
    }

    .navTabDesk a:hover
    {
        background-color: #c37780;
        text-decoration: none;
        padding: 4%;
        border-radius: 8px;
        transition: 0.3s;
    }

    .navTabDesk ul
    {
        display: flex;
        list-style-type: none;
    }

    .navTabDesk li
    {
        margin-left: 5%;
    }

    .navbar
    {
        display: none;
    }

    header
    {
        background-color: #693143;
        color: #FB9460;
        transition: 0.5s;
    }

    main
    {
        background-color: #573A43;
        color: #FB9460;
        transition: 0.5s;
    }

    footer
    {
        background-color: #693143;
        color: #FB9460;
        transition: 0.5s;
    } 

    .basicList
    {
        background-color: #693143;
        transition: 0.5s;
    }

}
/*
    Veranderd de styling als de minimale schermgroote 800 pixels of grooter is.
*/
@media (min-width: 800px)
{
    body
    {
        background-color: #86321D;
        transition: 0.5s;
    }

    .avatar li
    {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 5%;
        margin: 0px;
    }

    .navTabDesk
    {
        display: block;
        justify-content: center;
    }

    .navTabDesk a
    {
        background-color: #df6c32;
        padding: 4%;
        border-radius: 8px;
        transition: 0.3s;
    }

    .navTabDesk a:hover
    {
        background-color: #f55404;
        text-decoration: none;
        padding: 4%;
        border-radius: 8px;
        transition: 0.3s;
    }

    .navTabDesk ul
    {
        display: flex;
        list-style-type: none;
    }

    .navbar
    {
        display: none;
    }

    header
    {
        background-color: #261D2B;
        color: #EBEBEB;
        transition: 0.5s;
    }

    main
    {
        background-color: #D14F2E;
        color: #261D2B;
        transition: 0.5s;
    }

    footer
    {
        background-color: #261D2B;
        color: #EBEBEB;
        transition: 0.5s;
    }

    .basicList
    {
        background-color: #D14F2E;
        transition: 0.5s;
    }

}