:root {
    --color-black: #444;
    --color-white: #ccc;

    --color-background-bg: #fff;
    --color-background-fg: #222;
    --color-surface-bg: #fff;
    --color-surface-fg: #222;

    --color-primary-bg: #0b78dd;
    --color-primary-fg: #fff;
    --color-secondary-bg: #074b90;
    --color-secondary-fg: #fff;
}

body.dark-mode {
    --color-background-bg: #121212;
    --color-background-fg: #eee;
    --color-surface-bg: #373737;
    --color-surface-fg: #eee;

    --color-primary-bg: #074b90;
    --color-primary-fg: #eee;
    --color-secondary-bg: #0b78dd;
    --color-secondary-fg: #eee;
}


.theme-background {
    color: var(--color-background-fg);
    background-color: var(--color-background-bg);
}

.theme-surface {
    color: var(--color-surface-fg);
    background-color: var(--color-surface-bg);
}
.theme-primary {
    color: var(--color-primary-fg);
    background-color: var(--color-primary-bg);
}
.theme-secondary {
    color: var(--color-secondary-fg);
    background-color: var(--color-secondary-bg);
}


main {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}

header, .header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.bottom-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.pagination-dropdown {
    appearance: none;
}

.disabled,
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.header-progress {
    height: 0.2em;
    width: 0%;
    opacity: 0.8;
}

.shadow {
    grid-area: shadow;
    background-color: #000;
    cursor:pointer;
    opacity: 0.8;
}

.sidebar-menu {
    grid-area: menu;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.sidebar-wrapper {
    display: grid;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    z-index: 30;
}
.sidebar-right {
    grid-template-columns: auto minmax(20%, max-content);
    grid-template-areas: "shadow menu";
}
.sidebar-left {
    grid-template-columns: minmax(20%, max-content) auto;
    grid-template-areas: "menu shadow";
}

.sidebar-right-wrapper {
    display: grid;
    grid-template-columns: auto minmax(20%, max-content);
    grid-template-areas: "shadow menu";
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    z-index: 30;
}


#sidebar-right-toggle:checked ~ .sidebar-right,
#sidebar-toggle:checked ~ .sidebar-left {
    display: grid;
}
#sidebar-toggle ~ .sidebar-left,
#sidebar-right-toggle ~ .sidebar-right {
    display: none;
}



/* Collapsing Menu items in sidebar */
summary {
    list-style: none
}
details summary .fa-caret-down,
details[open] summary .fa-caret-up {
    display: inline-block;
}
details[open] summary .fa-caret-down,
details summary .fa-caret-up {
    display: none;
}


.display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
}

.w3-button {
    font-size: 1.5rem;
}

/* feed */

.feed-item {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: row;
    align-content: stretch;
    align-items: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

.feed-item > *:first-child {
    flex-grow: 1;
}
.feed-item > a {
    text-decoration: none;
}


/* entry */

#entry img {
    max-width: 100%;
    height: auto;
}

#entry blockquote {
    border-left: 0.5em solid var(--color-primary-bg);
    color: var(--color-background-fg);
    background-color: var(--color-background-bg);
    padding: 0.01em 1em;
    margin: 1em;
}

#entry a {
    opacity: 0.8;
}

#entry .content a:after {
    content: '\f08e';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

#entry .content * {
    max-width: 100%;
}

code, kbd, pre, samp, blockquote {
    overflow-x: auto;
}