@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* { font-family: 'Poppins', sans-serif; }

/* RESET */ 

* { border: none; box-sizing: border-box; list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; } 
a:hover { text-decoration: underline; }
button { cursor: pointer; }
button[disabled] { cursor: default; }
img { max-width: 100%; }
textarea { width: 100%; }

/* */

html {
  --gap:       20px;
  --gap-small: 10px;
  --gap-tiny:   5px;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

.fs-small { font-size: 0.8rem; line-height: 0.8rem; }

header                      { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-tiny) var(--gap); }
header > div                { display: flex; align-items: center; gap: var(--gap-small); }
header > div:nth-child(3) a { text-transform: uppercase; }
header #site-logo a         { font-weight: bold; }
header #site-logo span      { opacity: 0.50; text-transform: uppercase; }

header #filter { display: none; }

header { font-size: 1rem; }

header #nav a { position: relative; }
header #nav a.current-parent::after {
    width: 0;
	height: 0;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--bg-filter) transparent;
	border-style: solid;
    content: "";
    position: absolute;
    left: calc( 50% - 8px ); top: calc( 100% - 3px );
}

footer        { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--gap-small); text-align: center; }
#footer-nav   { display: flex; justify-content: center; gap: var(--gap-small); }
#footer-nav a { text-transform: uppercase; }

footer { font-size: 0.8rem; line-height: 0.8rem; }

main {
  align-items: center;
  display: flex;
  flex-basis: 80%;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  text-align: center;
}

#notification { padding: var(--gap); }
@media only screen and ( max-width: 640px ) { #notification { font-size: 1.5rem; } }
@media only screen and ( min-width: 641px ) { #notification { font-size: 3.0rem; } }

#items                      { align-self: flex-start; flex-grow: 1; width: 100%; }
#items .item                { position: relative; }
#items .item .title         { line-height: 1rem; word-break: break-word; }
#items .item .thumbnail a   { display: grid; }
#items .item .thumbnail img { width: 100%; }
#items .item .actions       { --IconColor: var(--color-2); --IconSize: 14px; }
#items .item .actions .icon { opacity: 0.50; }

#items .item[data-isfav="true"] .actions .fav { color: #008800; }

#items[data-grayscale="false"] img { filter: grayscale(0); }
#items[data-grayscale="true"]  img { filter: grayscale(1); }

/* Viewmode: Gallery */

#items[data-viewmode="gallery"]                          { display: grid; grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) ); align-content: center; gap: var(--gap); padding: var(--gap); }
#items[data-viewmode="gallery"] .item                    { display: flex; flex-direction: column; gap: var(--gap-tiny); padding: var(--gap-small); }
#items[data-viewmode="gallery"] .item > div:nth-child(1) { display: flex; flex-direction:    row; gap: var(--gap-tiny); justify-content: space-between; }
#items[data-viewmode="gallery"] .item > div:nth-child(2) { display: flex; flex-direction: column; gap: var(--gap-tiny); justify-content: space-between; flex-grow: 1; }
#items[data-viewmode="gallery"] .item .thumbnail img     { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
#items[data-viewmode="gallery"] .item .title             { font-size: 0.9rem; padding-top: var(--gap-tiny); }
#items[data-viewmode="gallery"] .item .actions           { display: flex; gap: var(--gap-tiny); position: relative; top: -2px; margin-bottom: -2px; }

@media only screen and ( max-width: 640px ) {
  #items[data-viewmode="gallery"]               { grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); }
  #items[data-viewmode="gallery"]               { grid-template-columns: repeat( auto-fill, minmax(120px, 1fr) ); }
  #items[data-viewmode="gallery"]               { gap: var(--gap-small); padding: var(--gap-small); }
  #items[data-viewmode="gallery"] .item         { padding: var(--gap-tiny); }
  #items[data-viewmode="gallery"] .item .title  { font-size: 0.8rem; line-height: 0.9rem; }
  #items[data-viewmode="gallery"] .item .date   { font-size: 0.7rem; line-height: 0.7rem; }
  #items[data-viewmode="gallery"] .item .source { font-size: 0.7rem; line-height: 0.7rem; }
}

/* Viewmode: List */

#items[data-viewmode="list"]                          { display: flex; flex-direction: column; gap: var(--gap-small); padding: var(--gap); max-width: 1280px; margin: auto; }
#items[data-viewmode="list"] .item                    { display: flex; align-items: center; gap: var(--gap-small); }
#items[data-viewmode="list"] .item > div:nth-child(1) { order: 2; display: flex; flex-direction: row; gap: var(--gap-small); align-items: center; justify-content: space-between; padding-right: var(--gap-small); }
#items[data-viewmode="list"] .item > div:nth-child(2) { order: 1; display: flex; flex-direction: row; gap: var(--gap-small); align-items: center; justify-content: space-between; flex-grow: 1; }
#items[data-viewmode="list"] .item .thumbnail         { width: 40px; }
#items[data-viewmode="list"] .item .thumbnail img     { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
#items[data-viewmode="list"] .item .title             { flex-grow: 1; text-align: left; }

/* Viewmode: Masonry */

#items[data-viewmode*="masonry"]                          { display: grid; grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) ); grid-template-rows: masonry; justify-content: center; gap: 1em; grid-gap: 1em; padding: 1em; }
#items[data-viewmode*="masonry"] .item                    { align-self: start; display: flex; flex-direction: column;  gap: var(--gap-small); }
#items[data-viewmode*="masonry"] .item > div:nth-child(1) { order: 2; display: flex; flex-direction:    row; gap: var(--gap-small); align-items: center; justify-content: space-between; padding: var(--gap-small); border-top: 1px solid var(--color-2-tp); }
#items[data-viewmode*="masonry"] .item > div:nth-child(2) { order: 1; display: flex; flex-direction: column; gap: var(--gap-small); align-items: center; justify-content: space-between; flex-grow: 1; }
#items[data-viewmode*="masonry"] .item .title             { padding: 0 var(--gap-small); }
#items[data-viewmode*="masonry"] .item .thumbnail         { width: 100%; }

#items[data-viewmode="masonry-300px"] { grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); }
#items[data-viewmode="masonry-250px"] { grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ); }
#items[data-viewmode="masonry-200px"] { grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); }
#items[data-viewmode="masonry-150px"] { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); }

@media only screen and ( max-width: 640px ) {
  #items[data-viewmode*="masonry"] { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); }
}

/* Viewmode: Mosaik */

#items[data-viewmode*="mosaik"]                          { display: grid; grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) ); gap: var(--gap); padding: var(--gap); }
#items[data-viewmode*="mosaik"] .item > div:nth-child(1) { position: absolute; top: var(--gap-small); right: var(--gap-small); }
#items[data-viewmode*="mosaik"] .item > div:nth-child(2) { }
#items[data-viewmode*="mosaik"] .item .thumbnail         { width: 100%; }
#items[data-viewmode*="mosaik"] .item .thumbnail img     { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
#items[data-viewmode*="mosaik"] .item .title             { position: absolute; bottom: calc( var(--gap-small) + 17px ); left: var(--gap-small); padding: var(--gap-tiny); margin-right: var(--gap-small); text-align: left; }
#items[data-viewmode*="mosaik"] .item .source            { position: absolute; bottom: var(--gap-small); left: var(--gap-small); padding: 3px var(--gap-tiny); }

/* Viewmode: Pixel */

#items[data-viewmode="pixel"]                      { display: grid; grid-template-columns: repeat( auto-fill, minmax(50px, 1fr) ); align-content: center; gap: 0; padding: var(--gap); }
#items[data-viewmode="pixel"] .item                { box-shadow: none!important; }
#items[data-viewmode="pixel"] .item .thumbnail     { width: 100%; }
#items[data-viewmode="pixel"] .item .thumbnail img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
#items[data-viewmode="pixel"] .item .actions       { display: none; }
#items[data-viewmode="pixel"] .item .date          { display: none; }
#items[data-viewmode="pixel"] .item .title         { display: none; }
#items[data-viewmode="pixel"] .item .source        { display: none; }


i { cursor: pointer; }

.item .actions         { font-size: 0.8em; }
.item .actions i       { opacity: 0.50; }
.item .actions i:hover { opacity: 1.00; }


#loadMoreRecipes {
  border-top: 2px solid var(--color-2);
  margin: calc( var(--gap) * 1 ) 0 0 0;
  opacity: 0.9;
  width: 100%;
}
#loadMoreRecipes button {
  background: var(--color-2);
  border-radius: var(--radius);
  color: var(--color-1);
  padding: var(--gap-tiny) var(--gap-small);
  position: relative;
  top: calc( -1 * ( 50% + 1px ) );
  text-transform: uppercase;
  display: inline-flex; flex-direction: column;
  align-items: center;
}
#loadMoreRecipes button #loadMoreInfo      { font-size: 0.65rem; opacity: 0.50; margin-bottom: -3px; }
#loadMoreRecipes button #loadMoreInfo span { font-weight: bold; }
#loadMoreRecipes button #loadMoreText      { display: inline-flex; gap: var(--gap-tiny); align-items: center; }
#loadMoreRecipes button #loadMoreText span { font-weight: bold; }


#filter2 button             { background: none; color: var(--color-filter); }
#filter2 input[type='text'] { background: none; color: var(--color-filter); border-bottom: 1px solid var(--color-filter); }
#filter2 select             { background: none; color: var(--color-filter); border: 1px solid var(--color-filter); }

#filter2.big            { width: 100%; }
#filter2.big .inner     { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-small); padding: 50px var(--gap); width: 100%; }
#filter2.big .inner > * { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap-small); }
#filter2.big .inner h1  { font-size: 5rem; }

#filter2.big .inner .search        { width: 100%; }
#filter2.big .inner .search input  { font-size: 2rem; max-width: 400px; border-bottom: 2px solid var(--color-filter); }
#filter2.big .inner .search button { font-size: 2rem; }

#filter2.small .inner       { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-tiny) var(--gap); width: 100%; position: sticky; top: 0; z-index: 99999; }
#filter2.small .inner > *   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-small); }
#filter2.small .inner label { text-align: left; font-size:0.7rem; opacity: 0.5; text-transform: uppercase; }
#filter2.small .inner form  { align-items: flex-end; }
#filter2.small .inner h1    { display: none; }


#sponsors     { display: flex; gap: var(--gap-small); width: 100%; padding: 0; }
#sponsors div { flex-basis: 10%; flex-grow: 1; border-left: 1px solid var(--color-header); }
#sponsors div:first-child { border-left: none; }
#sponsors a   { display: block;  padding: var(--gap-tiny) var(--gap-small); }
#sponsors a::before   { content: "sponsored by:"; opacity: 0.50; display: block; font-size: 0.65rem; text-transform: uppercase; margin-bottom: -7px; }

#sponsors     { color: var(--color-header); background: var(--bg-header); }
#sponsors a   { color: var(--color-header); }

@media only screen and ( max-width: 640px ) {
  #sponsors a   { font-size: 0.7rem; line-height: 0.8rem; padding: var(--gap-tiny) var(--gap-tiny); }
}



/* #filter2       { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-tiny) var(--gap); width: 100%; position: sticky; top: 0; z-index: 99999; }
#filter2 > *   { display: flex; align-items: center; gap: var(--gap-small); }
#filter2 label { text-align: left; font-size:0.7rem; opacity: 0.5; text-transform: uppercase; }
#filter2 form  { align-items: flex-end; } */


#taxonomies                 { display: flex; align-items: center; }
#taxonomies .taxonomy       { display: flex; align-items: center; padding: var(--gap-tiny); }
#taxonomies .taxonomy ul    { display: flex; align-items: center; padding: var(--gap-tiny); }
#taxonomies .taxonomy ul li { background: var(--color-2); color: var(--color-1); padding: var(--gap-tiny); }


#sources         { display: grid; grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) ); gap: var(--gap); padding: var(--gap); width: 100%; }
#sources .source { background: var(--color-1); box-shadow: var(--shadow); padding: var(--gap); }

#tags {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
}
#tags .char {
  display: flex;
  align-items: stretch;
  gap: var(--gap-small);
}
#tags .char .title {
  flex-grow: 0;
  padding: var(--gap-small);
}
#tags .char .terms {
  flex-grow: 1;
  text-align: left;
}
#tags a.tag {
  display: inline-block;
  background: #FFFA;
  border: 1px solid #0004;
  margin: 0 0 var(--gap-tiny) 0;
  padding: var(--gap-tiny);
}

.title {
  font-weight: bold;
}

#settings {
  display: flex;
  justify-content: center;
}
#settings #accentcolor {
  display: flex;
  gap: var(--gap-tiny);
}
#settings #accentcolor .color {
  border-radius: 100%;
  cursor: pointer;
  padding: var(--gap-small);
}

#explore .category { width: 100%; }

.infopage         { display: flex; }
.infopage-content { display: flex; flex-direction: column; gap: var(--gap); max-width: 960px; }
.infopage h1      { display: block; }
.infopage p       { text-align: justify; }

/* Page: Weblinks */

.weblinks                 { padding: 0 var(--gap) var(--gap) var(--gap); width: 100%; }
.weblinks .category       { display: inline-block; text-align: left; margin-top: var(--gap); width: 100%;}
.weblinks .category > div { border-top: 1px solid var(--color-2-tp); padding: var(--gap-tiny) var(--gap-small); }

#weblinks h1 { font-size: 3.5rem; margin-top: var(--gap); }
#weblinks h2 { font-size: 2.5rem; }
#weblinks h3 { padding: var(--gap-small); text-align: center; }
#weblinks h4 { padding: var(--gap-small); text-align: center; opacity: 0.50;  }

.weblinks .category p                     { padding: var(--gap); text-align: justify; font-size: 0.75rem; line-height: 1rem;}
.weblinks .category > div:nth-child(2n+2) { background: var(--zebra); }
.weblinks .category > div:hover           { background: var(--color-2); color: var(--color-1); }
.weblinks .category > div:hover a         { color: var(--color-1); }
.weblinks .category > div .about          { display: none; }
.weblinks .category > div .domain         { font-size: 0.75em; }

.weblinks .category       { background: var(--color-1); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0.95;  }

@media only screen and ( min-width:    0px ) { .weblinks { column-count: 1; column-gap: var(--gap-small); } }
@media only screen and ( min-width:  720px ) { .weblinks { column-count: 2; column-gap: var(--gap-small); } }
@media only screen and ( min-width: 1080px ) { .weblinks { column-count: 3; column-gap: var(      --gap); } }
@media only screen and ( min-width: 1440px ) { .weblinks { column-count: 4; column-gap: var(      --gap); } }
@media only screen and ( min-width: 1800px ) { .weblinks { column-count: 5; column-gap: var(      --gap); } }

/* Page: Donate */

#donate-buttons {
  display: flex;
  gap: var(--gap-small);
}

form.standard {
  background: var(--color-1);
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  padding: var(--gap);
  opacity: 0.9;
  width: 100%; max-width: 360px;
}
form.standard label {
  display: block;
  font-size: 0.8rem;
  opacity: 0.5;
}
form.standard input[type='text'],
form.standard select,
form.standard textarea {
  background: none;
  color: var(--color-2);
  border: 1px solid var(--color-2);
  padding: var(--gap-small);
  width: 100%;
}
form.standard textarea { min-height: 100px; }

form.standard button {
  background: var(--color-2);
  color: var(--color-1);
  padding: var(--gap-small);
  border-radius: var(--radius);
}

form.standard          .checkbox         { text-align: left; }
form.standard .subCats .checkbox::before { content: "– "; }

form#addWeblink             { display: flex; flex-direction: row; flex-wrap: nowrap; max-width: calc( 100% - 40px ); margin: 0 var(--gap); }
form#addWeblink button      { width: 100%; }
form#addWeblink label       { text-align: left; }
form#addWeblink .mainFields { display: flex; flex-direction: column; gap: var(--gap-small); }

.modal        { background: rgba( 0, 0, 0, 0.90 ); background: var(--color-2); opacity: 0.95; padding: var(--gap); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999999; display: flex; align-items: center; justify-content: center; }
.modal .inner { background: var(--color-1); color: var(--color-2); border-radius: var(--radius); padding: var(--gap); max-width: 720px; position: relative; }
.modal .close { font-weight: bold; position: absolute; top: var(--gap-small); right: var(--gap-small); cursor: pointer; display: inline-block; }

.modal form          { display: flex; flex-direction: column; gap: var(--gap-small); }
.modal form label    { opacity: 0.75; font-size: 0.8rem; }
.modal form select   { background: none; border: 2px solid var(--color-2); color: var(--color-2); width: 100%; }
.modal form textarea { background: none; border: 2px solid var(--color-2); color: var(--color-2); width: 100%; height: 100px; }
.modal form button   { background: var(--color-2); color: var(--color-1); padding: var(--gap-tiny); border-radius: var(--radius); }

.yeah { padding: var(--gap); width: 100%; }

/*////////////////////////////// LAYOUT: MOBILE /////////////////////////////*/

@media only screen and ( max-width: 640px ) {

  html {
    --gap:       10px;
    --gap-small: 10px;
    --gap-tiny:   5px;
  }

  body { font-size: 14px; }

  header      { padding: var(--gap-tiny) var(--gap-small); }
  header #nav { font-size: 1rem; }

  #loadMoreRecipes { margin-top: calc( var(--gap) * 2 ); }

  header #filter {
    justify-content: space-between;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--color-1);
    box-shadow: var(--shadow);
    padding: var(--gap-tiny) var(--gap-small);
  }
  header #filter input { flex-grow: 1; font-size: 1rem; }

  footer { flex-direction: column; align-items: center; gap: var(--gap-tiny); margin-bottom: 33px; }

  #donate-buttons {
    flex-direction: column;
  }

}

/*////////////////////////////// DESIGN & COLORS /////////////////////////////*/

html[data-stylemode='veganml']{

  --accent-1: #880088; --accent-2: #aace62;

  --bg-body:   #EEEEEE;
  --bg-header: var(--accent-1); --color-header: var(--accent-2);
  --bg-filter: var(--accent-2); --color-filter: var(--accent-1);
  --bg-yeah:   var(--accent-2); --color-yeah:   var(--accent-1);
  --bg-footer: var(--accent-1); --color-footer: var(--accent-2);
  --bg-item:    var(--color-1); --color-item:    var(--color-2);


  --color-1: #FFF;
  --color-2: #222; --color-2-tp: #22222233;
  --accent: #008800;
      --zebra: #0001;
          --shadow-color: rgba(0, 0, 0, 0.20);
  --welcome-shadow-color: rgba(0, 0, 0, 0.25);
}
html[data-stylemode='dark']{
  --color-1: #272725;
  --color-2: #F4EDE5; --color-2-tp: #403f3e33;

  --bg-body:   #1d1d1b;
  --bg-header: var(--color-1); --color-header: var(--color-2);
  --bg-filter: #111111;      --color-filter: var(--color-1);
  --bg-yeah:   transparent;    --color-yeah:   var(--color-2);
  --bg-footer: transparent;    --color-footer: var(--color-2);
  --bg-item:   var(--color-1); --color-item:   #bcc1ca;

  --accent: #008800;
   --zebra: #FFF1;
   --shadow-color: rgba(255, 255, 255, 0.25);
   --shadow-color: rgba(0, 0, 0, 0.25);
   --welcome-shadow-color: rgba(255, 255, 255, 0.25);
}
html[data-stylemode='grey']{
  --color-1: #090909;
  --color-2: #F4EDE5; --color-2-tp: #e8d1b633;

  --bg-body:   #2c3338;
  --bg-header: var(--color-1); --color-header: var(--color-2);
  --bg-filter: #111111;      --color-filter: var(--color-1);
  --bg-yeah:   transparent;    --color-yeah:   var(--color-2);
  --bg-footer: transparent;    --color-footer: var(--color-2);
  --bg-item:   #3b4148;      --color-item:   #bcc1ca;

  --accent: #008800;
   --zebra: #FFF1;
   --shadow-color: rgba(255, 255, 255, 0.10);
   --welcome-shadow-color: rgba(255, 255, 255, 0.25);
}
html[data-stylemode='light']{
  --color-1: #FFF;
  --color-2: #222; --color-2-tp: #22222233;

  --bg-body:   #EEEEEE;
  --bg-header: var(--color-2); --color-header: var(--color-1);
  --bg-filter: #CCCCCC;      --color-filter: var(--color-2);
  --bg-yeah:   transparent;    --color-yeah:   var(--color-2);
  --bg-footer: transparent;    --color-footer: var(--color-2);
  --bg-item:   var(--color-1); --color-item:   var(--color-2);

  --accent: #008800;
   --zebra: #0001;
          --shadow-color: rgba(0, 0, 0, 0.20);
  --welcome-shadow-color: rgba(0, 0, 0, 0.25);
}
html {
  --radius: 3px;
  --shadow: 0 0 5px var(--shadow-color);
  --shadow-accent: 0 0 5px var(--shadow-color-accent);
}

a,
header a {
  color: var(--color-2);
}
header #nav a.current,
header #nav a.current-parent,
#footer-nav a.current, 
#footer-nav a.current-parent {
  font-weight: bold;
}

body     { background: var(--bg-body);   color: var(--color-2); }
header   { background: var(--bg-header); color: var(--color-header); } header a { color: var(--color-header); }
#filter2 { background: var(--bg-filter); color: var(--color-filter); }
.yeah    { background: var(--bg-yeah);   color: var(--color-yeah);   }
footer   { background: var(--bg-footer); color: var(--color-footer); } footer a { color: var(--color-footer); }
.item    { background: var(--bg-item);   color: var(--color-item);   }  .item a { color: var(--color-item);   }

#filter2.big { background: linear-gradient( 0deg, rgba(170, 206, 98, 0.9), rgba(170, 206, 98, 0.9) ), url(https://vegan.ml/lib/img/bg/webp_85/1.webp) center center fixed; }




#tags .char .title { background: var(--color-2); color: var(--color-1); }

#sources .source,
#items[data-viewmode="gallery"] .item,
#items[data-viewmode="gallery"] .item .thumbnail,
#items[data-viewmode="gallery"] .item .thumbnail img,
#items[data-viewmode="mosaik"] .item,
#items[data-viewmode="mosaik"] .item .thumbnail,
#items[data-viewmode="mosaik"] .item .thumbnail img {
  border-radius: var(--radius);
}
#items[data-viewmode="list"] .item,
#items[data-viewmode="list"] .item .thumbnail,
#items[data-viewmode="list"] .item .thumbnail img {
  border-radius: var(--radius) 0 0 var(--radius);
}
#items[data-viewmode*="masonry"] .item,
#items[data-viewmode*="masonry"] .item .thumbnail,
#items[data-viewmode*="masonry"] .item .thumbnail img {
  border-radius: var(--radius) var(--radius) 0 0;
}

#items[data-viewmode*="mosaik"] .item .actions { opacity: 0.95; background: var(--color-1); color: var(--color-2); font-size: 1.00rem; }
#items[data-viewmode*="mosaik"] .item .date    { opacity: 0.95; background: var(--color-1); color: var(--color-2); font-size: 0.75rem; }
#items[data-viewmode*="mosaik"] .item .source  { opacity: 0.95; background: var(--color-1); color: var(--color-2); font-size: 0.75rem; line-height: 0.75rem; }
#items[data-viewmode*="mosaik"] .item .title   { opacity: 0.95; background: var(--color-2); color: var(--color-1); font-size: 1.00rem; border: 1px solid var(--color-1); }

#items[data-viewmode*="mosaik"] .item .actions a { color: var(--color-2); }
#items[data-viewmode*="mosaik"] .item .date a    { color: var(--color-2); }
#items[data-viewmode*="mosaik"] .item .source a  { color: var(--color-2); }
#items[data-viewmode*="mosaik"] .item .title a   { color: var(--color-1); }

.item { box-shadow: var(--shadow); }

#items .item .thumbnail { background: var(--color-1) url("../img/no_img.png"); background-size: contain; }

#items[data-viewmode="gallery"] .item .date,
#items[data-viewmode="gallery"] .item .source {
  opacity: 0.5;
}

#artworkby       { opacity: 0.75; }
#artworkby:hover { opacity: 1.00; }
#artworkby .name { font-weight: bold; }

/*////////////////////////////////// WELCOME /////////////////////////////////*/

main#welcome {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
}

#welcome-logo {
  font-size: 80px;
  font-weight: bold;
  line-height: 80px;
  padding: var(--gap);
  text-shadow: 0 0 5px var(--color-1);
  text-transform: uppercase;
}
#welcome-logo span {
  display: block;
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 13px;
  text-transform: uppercase;
}

#welcome #filter {
  border-radius: var(--radius);
  display: flex;
  gap: var(--gap-small);
  align-items: center;
  color: var(--color-2);
  padding: var(--gap-small);
  --IconColor: var(--color-2);
  opacity: 0.9;
}
#welcome #filter input,
#welcome #filter select {
  font-size: 30px;
  padding: var(--gap-tiny) var(--gap-small);
  background: none;
  color: var(--color-2);
}
#welcome #filter input  { border-bottom: 2px solid var(--color-2); min-width: 50px; padding: var(--gap-tiny) 0!important; /*flex-basis: 400px; width: 400px;*/ }
#welcome #filter select { border: 2px solid var(--color-2); border-radius: 5px; }
#welcome #filter button { background: none; color: var(--color-2); font-size: 48px; }
#welcome #filter label  { display: none; }

#welcome-languages            { display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--gap); text-shadow: 0 0 5px var(--color-1); }
#welcome-languages a          { display: inline-block; }
#welcome-languages span       { display: block; }
#welcome-languages span.count { font-size: 0.7rem; line-height: 0.7rem; /* opacity: 0.5; */ text-transform: uppercase; }

#welcome #stylemode       { position: fixed; right: var(--gap-small); top: var(--gap-small); --IconColor: var(--color-2); }
#welcome #stylemode .icon { --IconSize: 18px; }

#welcome-artworkby { position: fixed; left: var(--gap-small); top: var(--gap-small); }

@media only screen and ( max-width: 640px ) {

  #welcome #filter        { flex-wrap: wrap; max-width: 300px; }
  #welcome #filter input  { order: 1; flex-basis: calc( 100% - 32px - var(--gap-small) ); }
  #welcome #filter button { order: 2; font-size: 32px; }
  #welcome #filter select { order: 3; --IconSize: 32px; flex-basis: 100%; flex-grow: 1; }
  #welcome #filter input,
  #welcome #filter select { font-size: 18px; }

  #welcome-languages {
    display: grid; grid-template-columns: repeat( auto-fill, minmax(70px, 1fr) );
    gap: var(--gap-tiny); padding: var(--gap-small);
    width: 100%;
  }

  #welcome-artworkby ,
  #welcome #stylemode {
    display: none;
  }

  #welcome-logo      { font-size: 50px; line-height: 50px; }
  #welcome-logo span { font-size: 10px; line-height: 10px; letter-spacing: 2px; }

  #welcome-languages            { font-size: 0.80rem; line-height: 0.90rem; }
  #welcome-languages span.title { font-size: 0.80rem; line-height: 0.90rem; }
  #welcome-languages span.count { font-size: 0.55rem; line-height: 0.65rem; }

}

/* ANIMATIONS & EFFECTS */

@keyframes myFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes myFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes myFadeOutIn { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.myFadeIn    { animation: myFadeIn  1s normal linear; }
.myFadeOut   { animation: myFadeOut 1s normal forwards ease-in-out; }
.myFadeOutIn { animation: myFadeOutIn 1s normal forwards line; }

/* body   { transition: background-color linear 0.5s; } */
body * { transition: opacity linear 0.5s; } /* body * { transition: color linear 0.5s, opacity linear 0.5s; } */
.item  { transition:   scale linear 0.1s; }

/* #items[data-viewmode="gallery"] .item:hover {
  transform: scale(1);
	animation: pulse 1s 1;
}

@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 #00880055;
	}

	70% {
		transform: scale(0.95);
		box-shadow: 0 0 0 10px #008800;
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 #008800;
	}
} */

@keyframes shake {
  10%, 90%      { transform: translate3d(-1px, 0, 0); }  
  20%, 80%      { transform: translate3d( 2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60%      { transform: translate3d( 4px, 0, 0); }
}

/* html { animation: animatedBackground 90s linear infinite; } */

@keyframes animatedBackground {
      0% { background-size: cover; background-position: 100%  0%; background-size: 100%; }
     50% { background-size: cover; background-position:  85% 15%; background-size: 130%; }
    100% { background-size: cover; background-position: 100%  0%; background-size: 100%; }
}

/* ICONS (FontAwesome) */

:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../assets/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"),url(../assets/fontawesome/webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

.fa { font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); }
.fa-solid, .fa-brands { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; }
.fa-solid { font-family: 'Font Awesome 6 Free'; }
.fa-brands { font-family: 'Font Awesome 6 Brands'; }
 
.fa-spin {
    -webkit-animation-name: fa-spin;
            animation-name: fa-spin;
    -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
    -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
    -webkit-animation-duration: var(--fa-animation-duration, 2s);
            animation-duration: var(--fa-animation-duration, 2s);
    -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
            animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    -webkit-animation-timing-function: var(--fa-animation-timing, linear);
            animation-timing-function: var(--fa-animation-timing, linear); 
}
  
.fa-spin-reverse { --fa-animation-direction: reverse; }
  
@media (prefers-reduced-motion: reduce) {
    .fa-spin {
        -webkit-animation-delay: -1ms;
                animation-delay: -1ms;
        -webkit-animation-duration: 1ms;
                animation-duration: 1ms;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
        transition-delay: 0s;
        transition-duration: 0s; 
    } 
}
    
@-webkit-keyframes fa-spin {
      0% { -webkit-transform: rotate(  0deg); transform: rotate(  0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@keyframes fa-spin {
      0% { -webkit-transform: rotate(  0deg); transform: rotate(  0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
.fa-angle-left::before { content: "\f104"; }
.fa-angle-right::before { content: "\f105"; }
.fa-book::before { content: "\f02d"; }
.fa-eye::before { content: "\f06e"; }
.fa-flag::before { content: "\f024"; }
.fa-gear::before { content: "\f013"; }
.fa-ghost::before { content: "\f6e2"; }
.fa-hand-point-right::before { content: "\f0a4"; }
.fa-hand-point-left::before { content: "\f0a5"; }
.fa-heart::before { content: "\f004"; }
.fa-magnifying-glass::before { content: "\f002"; }
.fa-moon::before { content: "\f186"; }
.fa-poo::before { content: "\f2fe"; }
.fa-share-nodes::before { content: "\f1e0"; }
.fa-shuffle::before { content: "\f074"; }
.fa-sliders::before { content: "\f1de"; }
.fa-spinner::before { content: "\f110"; }
.fa-sun::before { content: "\f185"; }
.fa-wheelchair::before { content: "\f193"; }
.fa-xmark::before { content: "\f00d"; }