/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Homenaje&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

*          { box-sizing: border-box; margin: 0; padding: 0; }
a          { text-decoration: none; }
button     { border: none; cursor: pointer; }
i.fa-solid { cursor: pointer; }
img        { max-width: 100%; }
input      { background: none; border: none; }
select     { border: none; }
.hidden    { display: none!important; }

/*////////// COLORS ///////////*/

html {
           --color-1: #43EAA2;
           --color-2: #DA9BCE;
           --color-3: #13264A;
      --shadow-color: #00000055;
  --textshadow-color: none;
  /* ImageFilter */
  --img-brightness: 100%;
  --img-contrast:   100%;
  --img-grayscale:    0%;
}
img {
  filter: brightness(var(--img-brightness)) 
            contrast(var(--img-contrast)) 
           grayscale(var(--img-grayscale));
}

body            { background: var(           --bgcolor); color: var(           --textcolor); }
header          { background: var(    --header-bgcolor); color: var(    --header-textcolor); }
#Filter         { background: var(    --filter-bgcolor); color: var(    --filter-textcolor); }
#Navigation     { background: var(--navigation-bgcolor); color: var(--navigation-textcolor); }
#Settings       { background: var(  --settings-bgcolor); color: var(  --settings-textcolor); }
#Sidebar        { background: var(      --menu-bgcolor); color: var(      --menu-textcolor); }
#Sidebar a      { color: var(--menu-textcolor); }
#Sidebar select { background: var(--menu-textcolor); color: var(--menu-bgcolor); }

#Filter button { color: var(--filter-textcolor); background: none; border: none; }
#Filter input  { /*border-bottom: 2px solid var(--filter-textcolor);*/ color: var(--filter-textcolor); }
#FilterOptions { border-bottom: 1px dashed var(--filter-textcolor); }
#FilterOptions select { background: var(--filter-textcolor); color: var(--filter-bgcolor); }

.items                        article   { color: var(     --item-textcolor); background: var(  --item-bgcolor); }
.items                        article a { color: var(     --item-textcolor); }
.items[data-viewmode*="grid"] article   { color: var(--grid-item-textcolor); background: var(--grid-item-bgcolor); }
.items[data-viewmode*="grid"] article a { color: var(--grid-item-textcolor); }
.items[data-viewmode*="list"] article:nth-child(2n+1) { background: var(--item-nth2-bgcolor, var(--item-bgcolor)); }

#LoadMoreButton { background: var(--textcolor); color: var(--bgcolor); }

#loading svg circle:nth-child(1) { stroke: var(--loading-color-1); }
#loading svg circle:nth-child(2) { stroke: var(--loading-color-2); }

.item[data-is-fav="true"] .fa-heart { color: red; }

/* SHADOWS */

header      { box-shadow: 0 0 5px var(--shadow-color); }
#Filter     { box-shadow: 0 0 5px var(--shadow-color); }
#Navigation { box-shadow: 0 0 5px var(--shadow-color); }
#Settings   { box-shadow: 0 0 5px var(--shadow-color); }
#Sidebar    { box-shadow: 0 0 5px var(--shadow-color); }

.items[data-viewmode*="grid"] .thumbnail img { box-shadow: 0 0 5px var(--shadow-color); }

body { text-shadow: 0 0 2px var(--textshadow-color); }

/* BORDER-RADIUS */ 

button     { border-radius: 5px; }
select     { border-radius: 5px; }
.item      { border-radius: 5px; }
.items[data-viewmode*="grid"]    img { border-radius: 5px; }
.items[data-viewmode*="list"]    img { border-radius: 5px 0 0 5px; }
.items[data-viewmode*="masonry"] img { border-radius: 5px; }

/* FONT & TEXT */

* { font-family: "Saira Condensed"; }
html, body { font-size: 16px; }

#Filter,
#Filter button,
#Filter input         { font-size: 1.50rem; }
#FilterOptions        { font-size: 1.00rem; }
#FilterOptions select { font-size: 1.00rem; }
header                { font-size: 1.50rem; }
#LoadMoreButton       { font-size: 1.00rem; }
#Navigation i         { font-size: 1.50rem; }
#Navigation span      { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
#Settings label       { font-size: 1.00rem; font-weight: bold; text-transform: uppercase; }
#Settings select      { font-size: 1.50rem; }
#Sidebar              { font-size: 1.25rem; }
#Sidebar a            { font-size: 2.00rem; }
#Sidebar select       { font-size: 1.25rem; }

.item .date                              { font-size: 0.8rem; line-height: 0.8rem; opacity: 0.50; }
.item .source                            { font-size: 0.8rem; line-height: 0.8rem; }
.item .title                             {                    line-height: 1.0rem; hyphens: auto; }
.items[data-viewmode="grid-100"] .title  { font-size: 0.7rem; line-height: 0.7rem; }
.items[data-viewmode="grid-100"] .source { font-size: 0.6rem; line-height: 0.6rem; }
.items[data-viewmode="grid-100"] .date   { font-size: 0.6rem; line-height: 0.6rem; }

.items[data-viewmode="list-75"] .date,
.items[data-viewmode="list-75"] .source { font-size: 0.80rem; line-height: 0.80rem; }
.items[data-viewmode="list-75"] .title  { font-size: 1.20rem; line-height: 1.20rem; }

.items[data-viewmode="list-100"] .date,
.items[data-viewmode="list-100"] .source { font-size: 0.90rem; line-height: 0.90rem; }
.items[data-viewmode="list-100"] .title  { font-size: 1.35rem; line-height: 1.35rem; }

html[dir="ltr"] #Sidebar a { text-align: right; }
html[dir="rtl"] #Sidebar a { text-align:  left; }

/*////////// LAYOUT //////////*/

header      { z-index: 101; }
#Footer     { z-index: 101; }
#Filter     { z-index: 102; }
#Navigation { z-index: 103; }
#Settings   { z-index: 100; }
#Sidebar    { z-index: 100; }

html  { min-height: 100%; height: 100%; }
body  { min-height: 100%; height: 100%; }
#wrap { min-height: 100%; }

#wrap   { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; }
header  { flex-grow: 0; }
main    { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
#Footer { flex-grow: 0; position: fixed; bottom: 0; left: 0; right: 0; }

#Footer     { display: flex; flex-direction: column; }
#Filter     { order: 1; }
#Navigation { order: 2; }

#Navigation     { display: flex; }
#Navigation > * { flex-basis: 10%; flex-grow: 1; padding: 10px 5px 5px 5px; }
#Navigation > * { display: flex; flex-direction: column; align-items: center; gap: 0px; }

#Navigation > *             { border-left: 1px solid var(--shadow-color); }
#Navigation > *:first-child { border-left: none; }
#Navigation > *          > * { opacity:  50%; }
#Navigation > *.selected > * { opacity: 100%; }

/* Header */

header   { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; padding: 5px 10px 0px 10px; }
.logo    { margin-top: -5px; }
.iconbar { display: flex; align-items: flex-end; gap: 10px; }

/* Menu */

#Sidebar {
  position: fixed;  top: 0; bottom: 0; width: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 70px 10px;
}
html[dir="ltr"] #Sidebar {  left: 0; }
html[dir="rtl"] #Sidebar { right: 0; }
#Sidebar a { display: block; }
#settings        { display: flex; flex-direction: column; gap: 10px; }
#settings label  { display: block; font-weight: bold; }
#settings select { padding: 5px; width: 100%; }

#Settings {
  position: fixed; top: 0; right: 0; width: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 10px; padding: 50px 10px 10px 10px;
}
#Settings > * { display: flex; flex-direction: column; justify-content: stretch; }
#Settings select { padding: 5px; }

/* Items */

.items         { display: flex; gap: 10px; padding: 10px; width: 100%; }
.items article { display: flex; }
.items .title         { font-weight: bold; }
.items .thumbnail img { width: 100%; }

/* Viewmode: Grid */

.items[data-viewmode*="grid"] img { aspect-ratio: 1; object-fit: cover; }
.items[data-viewmode*="grid"]         { display: grid; grid-template-columns: repeat( auto-fit, minmax(var(--minmax), 1fr) ); }
.items[data-viewmode*="grid"] article { flex-direction: column; gap: 5px; }
.items[data-viewmode="grid"]     { --minmax: 140px; }
.items[data-viewmode="grid-100"] { --minmax: 100px; }
.items[data-viewmode="grid-150"] { --minmax: 150px; }
.items[data-viewmode="grid-200"] { --minmax: 200px; }
.items[data-viewmode="grid-300"] { --minmax: 300px; }

.items[data-viewmode="grid-2"] { grid-template-columns: repeat(2, 1fr); }
.items[data-viewmode="grid-3"] { grid-template-columns: repeat(3, 1fr); }
.items[data-viewmode="grid-4"] { grid-template-columns: repeat(4, 1fr); }
.items[data-viewmode="grid-5"] { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.items[data-viewmode="grid-6"] { grid-template-columns: repeat(6, 1fr); gap: 5px; }

.items[data-viewmode*="grid"] .item {
  container: grid-item / inline-size;
}
.items[data-viewmode*="grid"] .item .title {
  font-size: var(--FS1);
  line-height: var(--FS1);
}
.items[data-viewmode*="grid"] .item .date,
.items[data-viewmode*="grid"] .item .source {
  font-size: var(--FS2);
  line-height: var(--FS2);
}
/*
@container grid-item (min-width: 0px) {
  .title         { --FS1: 0.75rem; }
  .date, .source { --FS2: 0.50rem; }
}
@container grid-item (min-width: 100px) {
  .title         { --FS1: 1.00rem; }
  .date, .source { --FS2: 0.70rem; }
}
@container grid-item (min-width: 150px) {
  .title         { --FS1: 1.25rem; }
  .date, .source { --FS2: 0.90rem; }
}
@container grid-item (min-width: 200px) {
  .title         { --FS1: 1.50rem; }
  .date, .source { --FS2: 1.00rem; }
}
*/

.title { 
  @container grid-item (min-width:   0px) { --FS1: 0.75rem; }
  @container grid-item (min-width: 100px) { --FS1: 1.00rem; }
  @container grid-item (min-width: 150px) { --FS1: 1.25rem; }
  @container grid-item (min-width: 200px) { --FS1: 1.50rem; }
}
.date, .source { 
  @container grid-item (min-width:   0px) { --FS2: 0.50rem; }
  @container grid-item (min-width: 100px) { --FS2: 0.70rem; }
  @container grid-item (min-width: 150px) { --FS2: 0.90rem; }
  @container grid-item (min-width: 200px) { --FS2: 1.00rem; }
}

/* Viewmode: List */

.items[data-viewmode="list"]     { --size:  50px; --gap:  5px; }
.items[data-viewmode="list-50"]  { --size:  50px; --gap:  5px; }
.items[data-viewmode="list-75"]  { --size:  75px; --gap: 10px; }
.items[data-viewmode="list-100"] { --size: 100px; --gap: 10px; }

.items[data-viewmode*="list"]                { flex-direction: column; gap: var(--gap); }
.items[data-viewmode*="list"] article        { flex-direction: row;    gap: var(--gap); flex-wrap: wrap; align-items: center; height: var(--size); /*gap: 10px; align-items: center;*/ position: relative; padding-right: var(--gap); padding-left: calc( var(--size) + var(--gap) ); }
.items[data-viewmode*="list"] .thumbnail     { flex-basis: var(--size); flex-shrink: 0; position: absolute; left: 0; bottom: 0; height: var(--size); width: var(--size); }
.items[data-viewmode*="list"] .thumbnail img { aspect-ratio: 1; object-fit: cover; max-height: 100%; }
.items[data-viewmode*="list"] .title         { order: 2; flex-basis: 100%; flex-grow: 1; }
.items[data-viewmode*="list"] .actions       { order: 3; }
.items[data-viewmode*="list"] .date          { order: 4; }
.items[data-viewmode*="list"] .source        { order: 5; }

/* Viewmode: Masonry */

/* display: flex; flex-wrap: wrap; flex-grow: 1;  flex-basis: 150px;  */
.items[data-viewmode*="masonry"]       { display: block; }
.items[data-viewmode*="masonry"] .item { background: none; flex-direction: column; }

.items[data-viewmode="masonry"]       { --gap: 10px; }
.items[data-viewmode="masonry"] .item { width: 33%; padding: var(--gap); }

.items[data-viewmode*="masonry-gallery"]               { --gap: 10px; padding: var(--gap); text-shadow: 0 0 4px #000; }
.items[data-viewmode*="masonry-gallery"] .item         { padding: var(--gap); width: 33%; }
.items[data-viewmode*="masonry-gallery"] .item .title  { padding: var(--gap); position: absolute;    top:  5px; left: 5px; right: 5px; }
.items[data-viewmode*="masonry-gallery"] .item .date   { padding: var(--gap); position: absolute; bottom:  5px; left: 5px; right: 5px; }
.items[data-viewmode*="masonry-gallery"] .item .source { padding: var(--gap); position: absolute; bottom: 20px; left: 5px; right: 5px; }
.items[data-viewmode*="masonry-gallery"] .item .thumbnail { display: flex; }

#LoadMoreButton      { padding: 5px 10px; margin-bottom: 10px; width: 50%; width: fit-content; align-self: center; display: flex; align-items: center; gap: 5px; }
#LoadMoreButton span { font-weight: bold; text-transform: uppercase; }
#LoadingMoreEnd      { text-align: center; padding: 10px; }

/* Filter */

#Filter        { gap: 10px; padding: 0 10px; display: flex; flex-wrap: wrap; align-items: center; }
#Filter button { position: relative; }
#Filter input  { flex-basis: 50%; flex-grow: 1; padding: 0; }

#FilterOptions        { gap: 10px; display: flex; flex-wrap: wrap; flex-basis: 100%; padding: 10px 0; }
#FilterOptions label  { margin-right: 5px; }
#FilterOptions select { padding: 5px; }

/* Formulare */

.form       { display: flex; flex-direction: column; gap: 10px; }
.form > div { display: flex; flex-direction: column; }

.form .input       { display: flex; flex-direction: row; align-items: stretch; justify-content: center; }
.form .input label { flex-basis: 50px; flex-grow: 0; aspect-ratio: 1; /*align-self: center; justify-self: center;*/ }
.form .input label { background: var(--shadow-color); color: var(--bgcolor); }
.form .input label { font-size: 2.00rem; }
.form .input label { display: flex; align-items: center; justify-content: center; }
.form .input label { order: 2; }
.form .input input { order: 1; }

.form input[type="email"],
.form input[type="password"],
.form input[type="text"] {}
.form button { background: var(--textcolor); color: var(--bgcolor); }
.form input  { box-shadow: inset 0 0 2px var(--shadow-color); }
.form input  { font-size: 1.50rem; padding: 5px 10px; }
.form label  { display: flex; gap: 5px; align-items: center; font-weight: bold; text-transform: uppercase; }

/* Activity: ACCOUNT */

h2 { text-align: center; }

#AccountActivity { max-width: 300px; align-self: center; }

/* Loading */ 
#loading { display: flex; align-items: center; align-self: center; justify-self: center; flex-basis: 100%; }

/*////////// ANIMATIONS //////////*/

/*#Settings.hidden { display: none; }
#Sidebar.hidden  { display: none; }*/

@keyframes slideIn     { from { transform: translateX(-110%); } to { transform: translateX(    0); } }
@keyframes slideOut    { from { transform: translateX(    0); } to { transform: translateX(-110%); } }
@keyframes slideInRTL  { from { transform: translateX(+110%); } to { transform: translateX(    0); } }
@keyframes slideOutRTL { from { transform: translateX(    0); } to { transform: translateX(+110%); } }

html[dir="ltr"] #Sidebar.hide   { animation: slideOut    0.5s forwards; display: flex; }
html[dir="ltr"] #Sidebar.unhide { animation: slideIn     0.5s forwards; display: flex; }
html[dir="rtl"] #Sidebar.hide   { animation: slideOutRTL 0.5s forwards; display: flex; }
html[dir="rtl"] #Sidebar.unhide { animation: slideInRTL  0.5s forwards; display: flex; }