.header
{
    grid-area: header; display: grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; z-index: 100; height: min-content;
    grid-template-areas: 
        "home search"
        "browse browse";
    background-color: var(--primary);
    font-size: larger;
    filter: drop-shadow(0 4px 8px var(--shadow5));

    .home
    {
        grid-area: home; display: flex;
        justify-content: center; align-items: center; text-align: center;
        cursor: pointer; user-select: none;
    }
    .home:hover
    {
        background-color: var(--shadow1);
    }
    .home:active
    {
        transform: scale(0.98);
    }

    .browse
    {
        grid-area: browse; display: flex;

        .object
        {
            display: flex;
            height: 100%; padding: 0; margin: 0;
            justify-content: center; align-items: center; text-align: center;
            cursor: pointer; user-select: none;
        }
        .object:hover
        {
            background-color: var(--shadow1);
        }
        .object:active
        {
            transform: scale(0.98);
        }
    }
    .search
    {
        grid-area: search;
        background-color: var(--primary-800);
        justify-content: center; align-items: center; text-align: center;
    }
    .random
    {
        grid-area: search; display: flex;
        justify-content: center; align-items: center; text-align: center;
        cursor: pointer; user-select: none;
    }
    .random:hover
    {
        background-color: var(--shadow1);
    }
    .random:active
    {
        transform: scale(0.98);
    }
    .object
    {
        flex-grow: 1; padding: 1rem; margin: 0 1rem;
    }
}

@media (width >= 1800px) 
{
    .header
    {
        grid-template-columns: 1fr .25fr 3fr .25fr 1fr; grid-template-rows: 1fr;
        grid-template-areas: "home  .   browse  .   search";

        .search
        {
            text-align: left;
        }
    }
}