/* :root {
--bgcolor: #352726;
--fgcolor: #ffd5a9;
--totals-bgcolor: #FFFFA0;
--editable-div-outline-color: #582c14;
} */

@import url('/static/fonts/AvenirNext/fonts.css');
@import url('/static/fonts/fonts.css');


:root {
    /*--font: 'Avenir Next';*/
    --font: 'PlayfairDisplay';
    --font: 'Nunito Sans';
    --bgcolor: #352726;
    --fgcolor: #ffd5a9;

    --page-header-fgcolor: var(--fgcolor);
    --page-header-bgcolor: var(--bgcolor);

    --page-title-color: var(--fgcolor);
    /*
    --page-title-font: normal 100 40px JosefinSans-Italic, sans-serif;
    --page-title-font: normal 100 50px MouseMemoirs-Regular, sans-serif;
    */
    --page-title-font: normal 100 48px 'JosefinSans', sans-serif;

    --page-menu-fgcolor: var(--page-header-fgcolor);
    --page-menu-bgcolor: var(--page-header-bgcolor);
    --page-menu-font: normal 300 10px 'Nunito Sans', sans-serif;

    --section-header-fgcolor: var(--page-title-color);
    --section-header-bgcolor: var(--bgcolor);

    --control-fgcolor: var(--bgcolor);
    --control-bgcolor: var(--fgcolor);

    --totals-bgcolor: #ffffa0;
    --totals-fgcolor: #000000;

    --title-fgcolor: var(--page-title-color);
    --title-bgcolor: var(--bgcolor);

    --editable-div-outline-color: #582c14;

    --border-radius: 8px;
    --navigator-border-radius: 16px;

    --motd-font: italic 100 18px 'Nunito Sans', sans-serif;
    --quote-font: var(--motd-font);
    
    --notification-font: italic 800 28px 'Nunito Sans', sans-serif;
    --notification-bgcolor: #33F;
    --notification-fgcolor: #FFF;

    --private-color: #9090FF;
    --rant-color: #FF9090;
    --rant-font: normal fantasy, sans-serif;
}

/*
:root {
--fgcolor: #c53e3e;
--bgcolor: #ffffff;

--page-header-fgcolor: #FFFFFF;
--page-header-bgcolor: #000000;

--page-title-color: #4d66bf;
--page-title-font: normal 100 32px fantasy, sans-serif;

--page-menu-fgcolor: var(--page-header-fgcolor);
--page-menu-bgcolor: var(--page-header-bgcolor);

--section-header-fgcolor: var(--page-title-color);
--section-header-bgcolor: var(--bgcolor);

--control-fgcolor: #4d66c0;
--control-bgcolor: #ffffff;

--totals-bgcolor: #ffffa0;
--totals-fgcolor: #000000;

--title-fgcolor: var(--page-title-color);
--title-bgcolor: var(--bgcolor);

--editable-div-outline-color: #582c14;

--border-radius: 0px;
--navigator-border-radius: 0px;
}
 */

* {
    font-family: var(--font);
}

body, 
.grid input,
.grid input:not(.button),
header ul a,
.diaryActivity .header.goals {
    background-color: var(--bgcolor);
    color: var(--fgcolor);
}

#logo h1 {
    color: var(--page-title-color);
    font: var(--page-title-font);
    letter-spacing: 0.3em;
    font-weight: 10;
    transform: scaleY(1.5);
    font-style: italic;
    margin-top: 12px;
}

header {
    background-color: var(--page-header-bgcolor);
    color: var(--page-header-fgcolor);
}

.topMenu a {
    background-color: var(--page-menu-bgcolor);
    color: var(--page-menu-color);    
    font: var(--page-menu-font) !important;    
}

.subHeaderRow h1 {
    background-color: var(--title-bgcolor);
    color: var(--title-fgcolor);
}

.grid .entryRow.selected {
    color: var(--bgcolor);
    background-color: var(--fgcolor);  
    border-radius: var(--border-radius);
}

.grid .entryRow.selected input{
    color: inherit;
    background-color: inherit;  
    border-radius: var(--border-radius);
}

.grid .action {
        border-radius: var(--border-radius);
}

[contenteditable=true]:focus{
    outline: 1px dashed var(--editable-div-outline-color);
}

.grid .headerRow {
    background-color: var(--section-header-fgcolor);
    color: var(--section-header-bgcolor);    
}

input,
textarea,
.pageNavigator,
.pageNavigator a,
.button,
form h1 {
    background-color: var(--control-bgcolor);
    color: var(--control-fgcolor);    
}

[contenteditable=true]:empty,
input::placeholder {
    background-color: var(--bgcolor);
    color: var(--fgcolor);
}

input[type="search"] {
	border: none;
}

.diaryActivity .calories .total,
.diaryActivity .entryRow .calories{
    background-color: var(--totals-bgcolor);
    color: var(--totals-fgcolor);
}

textarea,
input[type="text"],
input[type="search"],
form input[type="text"],
form input[type="search"],
form input[type="password"],
form input[type="submit"],
form input[type="button"],
form input[type="number"],
form input[type="date"],
form input[type="time"],
.grid .entryRow.selected,
.grid .headerRow,
.grid :not(.headerRow) .action *,
.diaryActivity .headerRow .total, 
.diaryActivity .entryRow .calories,
form h1 {
    border-radius: var(--border-radius);
}

.pageNavigator {
    border-radius: var(--navigator-border-radius);
}

.journal::first-letter {
    font-size: 24px;
    padding: 4px 3px 0px 3px;
    margin-left: 8px;
    letter-spacing: -3px;
    text-transform: uppercase;
    color: var(--fgcolor);
}

.diaryJournal .private,
.diaryJournal .private .journal::first-letter {
    color: var(--private-color);
}

.diaryJournal .rant,
.diaryJournal .rant .journal::first-letter {
    font: var(--rant-font);
    color: var(--rant-color);
}

.diaryGallery .galleryImage {
    border-radius: var(--border-radius);
    border: solid 3px var(--fgcolor);
}


.notificationList .notification {
    color: var(--notification-fgcolor);
    background-color: var(--notification-bgcolor);
}