/*
PALETTE OPTIONS
https://www.color-hex.com/color-palette/389

CURRENT:
https://www.color-hex.com/color-palette/1079541

CURRENT, BUT DARKER:
https://www.color-hex.com/color-palette/30023
*/

:root
{
    --body_color:   #f8f5f0;
    --div_color:    #dbccb5;
    --h1_color:     #f1eae1;
    --p_color:      #e2d6c4;
    --a_color:      #967259;
    --idle_text:    #634832;
    --bold_text:    #38220f;
}

html
{
    color-scheme: light;
}

body
{
    font-family: Tahoma, Verdana, Arial, sans-serif;
    background-color: var(--body_color);
}


#brandTitle
{
    width: 100%;
    max-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}


#navBar
{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--div_color);
    color: var(--idle_text);
    width: 100%;
    & a
    {
        padding: 10px 40px;
        background-color: var(--h1_color);
        text-decoration: none;
    }

    & a:visited
    {
        background-color: var(--p_color);
        color: var(--bold_text);
    }

    & a:hover
    {
        background-color: var(--div_color);
        color: var(--bold_text);
    }

    & a:active
    {
        background-color: var(--p_color);
        color: var(--bold_text);
    }
}









/*  Responsive navigation menu
    display links on top of each other instead of next to each other (for mobile devices)
@media screen and (max-width: 600px)
{
  #navBar a
  {
    float: none;
    display: block;
  }

  #navBar a
  {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}
*/