:root {
    --page-background-color: white;
    --item-container-background-color: #f6f7f8; /* very light grey */
    --item-title-color: black;
    --item-button-filter: opacity(50%);
    --item-button-filter-hover: opacity(100%);
    --footer-bar-text-color: #0366d6; /* blue */
    --filter-regex-icon-game: url('/images/catgame.png');
    --filter-regex-icon-movie: url('/images/catmovie.png');
    --filter-regex-icon-music: url('/images/catmusic.png');
    --filter-regex-icon-tv: url('/images/cattv.png');
    --sort-icon-opacity-layer: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
    --sort-icon-az: url('../images/sortaz48.png');
    --sort-icon-za: url('../images/sortza48.png');
    --sort-icon-asc: url('../images/sorttimeasc48.png');
    --sort-icon-desc: url('../images/sorttimedesc48.png');
}
[theme="dark"] {
    --page-background-color: black;
    --item-container-background-color: #222222; /* dark grey */
    --item-title-color: white;
    --item-button-filter: opacity(50%) invert(1);
    --item-button-filter-hover: opacity(100%) invert(1);
    --footer-bar-text-color: #0366d6;
    --filter-regex-icon-game: url('/images/catgame_darktheme.png');
    --filter-regex-icon-movie: url('/images/catmovie_darktheme.png');
    --filter-regex-icon-music: url('/images/catmusic_darktheme.png');
    --filter-regex-icon-tv: url('/images/cattv_darktheme.png');
    --sort-icon-opacity-layer: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    --sort-icon-az: url('../images/sortaz48_darktheme.png');
    --sort-icon-za: url('../images/sortza48_darktheme.png');
    --sort-icon-asc: url('../images/sorttimeasc48_darktheme.png');
    --sort-icon-desc: url('../images/sorttimedesc48_darktheme.png');
}

/* The complete list of RSS items 
    Use smaller margins on a mobile device.
*/
.rssItemList {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 1.5rem;
}
@media screen and (max-width: 640px) {
    .rssItemList {
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 0.75rem;
    }
}

/* Align title left, settings button right */
.feedTitleContainer {
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    justify-content: space-between;
    align-items: center;
}

/* Define image behavior of all <svg> tags (icons) in filterRegexContainer */
.headerBar svg {
    background-size: cover;
    background-color: var(--page-background-color);
    background-blend-mode: luminosity;
    width: 32px;
    height: 32px;
    margin-top: 2px;
}

.sortButtonAZ {
    background: var(--sort-icon-opacity-layer), var(--sort-icon-az);
}
    .sortButtonAZ:hover {
        background-image: var(--sort-icon-az);
    }
.sortButtonZA {
    background: var(--sort-icon-opacity-layer), var(--sort-icon-za);
}
    .sortButtonZA:hover {
        background-image: var(--sort-icon-za);
    }
.sortButtonASC {
    background: var(--sort-icon-opacity-layer), var(--sort-icon-asc);
}
    .sortButtonASC:hover {
        background-image: var(--sort-icon-asc);
    }
.sortButtonDESC {
    background: var(--sort-icon-opacity-layer), var(--sort-icon-desc);
}
    .sortButtonDESC:hover {
        background-image: var(--sort-icon-desc);
    }

.settingsButton {
    font-family: Icons;
    font-size: 26px;
    opacity: 50%;
    color: var(--item-title-color);
    text-decoration: none;
}
    .settingsButton:before {
        content: '\e041'
    }


.headerBar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    max-width: 1000px;
}

/* Footer bar used to display the link "mark all items as read". */
.footerBar {
    text-align: right;
    max-width: 1000px;
}
p.footerBar a {
    /* The !important is needed to override the parent style definition for 'a' tags (links) */
    color: var(--footer-bar-text-color) !important
}
p.footerBar a:hover {
    text-decoration: underline !important
}

.itemContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    /* Width : Not full width on desktop, but still full width on mobile.*/
    /*width: 80%;*/
    /* max-width: 1200px; Tablet in portrait only 1200px wide including navbar.*/
    max-width: 1000px;
    padding: 10px;
    border: 1px solid var(--item-container-background-color);
    border-radius: 5px;
    background-color: var(--item-container-background-color);
}

    .itemContainer:hover {
        border: 1px solid lightgreen;
    }

.hidden {
    display: none;
}

/* textContainer contains the titleContainer and the description  */
.itemTextContainer {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    width: 100%;
}

/* make sure long strings (e.g. urls) do not break out of their container.
    tested, working fine with MS Edge.
*/
article.itemTextContainer {
    word-break: break-word;
}

/* Define image behavior of all <img> tags (icons) in filterRegexContainer */
.filterRegexContainer img {
    padding: 15px; /* creates an image of 30px by 30px */
    background-size: contain;
}
.filterRegexIconGame {
    background: var(--filter-regex-icon-game);
}
.filterRegexIconMovie {
    background: var(--filter-regex-icon-movie);
}
.filterRegexIconMusic {
    background: var(--filter-regex-icon-music);
}
.filterRegexIconTv {
    background: var(--filter-regex-icon-tv);
}

.filterRegexPrefix {
    width: 10%;
    margin-left: 5px;
    margin-right: 5px
}

.filterRegex {
    width: 35%;
    margin-left: 5px;
    margin-right: 5px
}

.filterRegexSuffix {
    width: 25%;
    margin-left: 5px;
    margin-right: 5px
}

/*.filterRegexIcon {
    height: 30px;
}*/


/* titleContainer contains both the title as the button box */
.itemTitleContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    border: 0px solid black;
}

.itemTitle {
    width: 90%;
    font-weight: bold;
    text-decoration: none; /* Do not underline the title (<a> elements are underlined by default) */
    color: var(--item-title-color);
}

    /* The default behavior of a link on hover is coloring blue.*/
    .itemTitle:hover {
        color: var(--item-title-color);
    }

.itemButton {
    /* 20px is a bit small on phone screen. Often I click (touch) next to it.*/
    width: 25px;
    height: 25px;
    margin-left: 25px; /* In order to make sure the title does not come too close. When you touch the X button, you don't want to accidentially click the title. */
    background-size: 25px 25px;
    filter: var(--item-button-filter);
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.576%204.574L10%209.15%205.424%204.574l-.849.85%204.577%204.574-4.577%204.576.85.85L10%2010.846l4.576%204.576.85-.849-4.577-4.576%204.577-4.575-.85-.849z%22%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

    .itemButton:hover {
        filter: var(--item-button-filter-hover);
        transform: rotate(90deg);
        transition-duration: 100ms;
    }

/* Modal container */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    align-content: center; /* vertically center the image */
}

/* Modal content (full-size image) */
.mymodal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
}

/* Close button */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

    .close:hover {
        color: #ccc;
    }