/*
 * Light/dark color schemes for fkfd.me
 */

body {
  background-color: white;
  color: #000;
  background-image: url("../img/spectrum.png");
  background-position: top right;
  background-repeat: no-repeat;
}

@media screen and (max-width: 900px) {
  body {
    margin-top: 20px;
    background-image: url("../img/spectrum-horiz.png");
    background-position: top;
    background-repeat: repeat-x;
  }
}

div.body {
  color: #3E4349;
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: #19202b;
  }

  div.body {
    color: white;
    padding-bottom: 24px;
  }
}

a {
  color: #004b6b;
}

a:hover {
  color: #206b8b;
}

a.headerlink {
  color: #004b6b;
  margin-left: 0.5em;
}

a.headerlink:hover {
  color: #206b8b;
  background: none;
}

img.emote {
  display: inline;
  height: 1.5em;
  width: 1.5em;
}

img.sticker {
  display: block;
}

summary {
  color: #004b6b;
}

blockquote {
  padding-left: 20px;
  border-left: 3px solid #656565;
}

@media (prefers-color-scheme: dark) {
  a {
    color: #a5c5ff;
  }

  a:hover {
    color: #cddfff;
  }

  a.headerlink {
    color: #a5c5ff;
  }

  a.headerlink:hover {
    color: #cddfff;
  }

  summary {
    color: #a5c5ff;
  }

  blockquote {
    padding-left: 20px;
    border-left: 3px solid #a5c5ff;
  }
}

div.sphinxsidebar h3,
div.sphinxsidebar h3 a,
div.sphinxsidebar h4,
div.sphinxsidebar a {
  color: #444;
}

div.sphinxsidebar p {
  color: #555;
}

div.sphinxsidebar ul {
  color: #000;
}

@media (prefers-color-scheme: dark) {
  div.sphinxsidebar h3,
  div.sphinxsidebar h3 a,
  div.sphinxsidebar h4,
  div.sphinxsidebar p,
  div.sphinxsidebar a,
  div.sphinxsidebar ul {
    color: #bbb;
  }
}

tt, code {
  background-color: #EEE;
  color: #222;
}

a:hover tt, a:hover code {
  background: #EEE;
}

pre {
  background: #EEE;
}

@media (prefers-color-scheme: dark) {
  tt, code {
    background-color: #202836;
    color: white;
  }

  a:hover tt, a:hover code {
    background: #666;
  }

  pre {
    background-color: #202836;
    border: 1px solid white;
    border-radius: 8px;
  }
}

video {
  max-width: 100%;
}

div.footer,
div.footer a {
  color: #3E4349;
}

@media (prefers-color-scheme: dark) {
  div.footer,
  div.footer a {
    color: #eee;
  }
}

@media screen and (max-width: 900px) {
  div.sphinxsidebar {
    float: none;
    width: 100%;
    margin: 120px -20px 20px;
    padding: 0 20px;
    background-color: transparent;
    color: #ccc;
  }
}

/*
 * Custom home page for fkfd.me
 * Created on 2022-12-28
 * Last revision 2024-09-14
 */

.category-block-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 320px 320px;
}

.webring-block-container {
  display: grid;
  gap: 0px;
  grid-template-columns: 60px 60px 60px;
  padding-top: 20px;
}

.link-block-container {
  display: grid;
  gap: 20px;
  grid-template-columns: 180px;
}

@media screen and (max-width: 720px) {
  .category-block-container {
    /* one column only on narrow screens */
    grid-template-columns: 320px;
  }
}

.webring-block-container a {
  text-decoration: none;
}

.category-block, .webring-block, .link-block {
  display: grid;
  text-align: center;
}

.category-icon, .webring-icon, .link-icon {
  display: block;
  background-color: #3E4349;
  background-size: contain;
  background-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.category-icon {
  width: 120px;
  height: 120px;
}

.webring-icon {
  width: 60px;
  height: 60px;
}

.link-icon {
  width: 60px;
  height: 60px;
}

@media (prefers-color-scheme: dark) {
  .category-icon, .webring-icon, .link-icon {
    background-color: white;
  }
}

.category-text {
  position: absolute;
  margin-left: 130px;
  margin-top: 40px;
  font-size: 1.5em;
}

.webring-text {
  text-align: center;
}

.link-text {
  position: absolute;
  margin-left: 80px;
  margin-top: 20px;
}

/* Category icons */

#icon-projects {
  mask-image: url("../img/icons/projects.png");
  -webkit-mask-image: url("../img/icons/projects.png");
}

#icon-projects:hover {
  mask-image: url("../img/icons/projects-hover.png");
  -webkit-mask-image: url("../img/icons/projects-hover.png");
}

#icon-random {
  mask-image: url("../img/icons/random.png");
  -webkit-mask-image: url("../img/icons/random.png");
}

#icon-random:hover {
  mask-image: url("../img/icons/random-hover.png");
  -webkit-mask-image: url("../img/icons/random-hover.png");
}

#icon-music {
  mask-image: url("../img/icons/music.png");
  -webkit-mask-image: url("../img/icons/music.png");
}

#icon-music:hover {
  mask-image: url("../img/icons/music-hover.png");
  -webkit-mask-image: url("../img/icons/music-hover.png");
}

#icon-umich {
  mask-image: url("../img/icons/umich.png");
  -webkit-mask-image: url("../img/icons/umich.png");
}

#icon-umich:hover {
  mask-image: url("../img/icons/umich-hover.png");
  -webkit-mask-image: url("../img/icons/umich-hover.png");
}

#icon-shitpost {
  mask-image: url("../img/icons/shitpost.png");
  -webkit-mask-image: url("../img/icons/shitpost.png");
}

#icon-shitpost:hover {
  mask-image: url("../img/icons/shitpost-hover.png");
  -webkit-mask-image: url("../img/icons/shitpost-hover.png");
}

#icon-furry {
  mask-image: url("../img/icons/furry.png");
  -webkit-mask-image: url("../img/icons/furry.png");
}

#icon-furry:hover {
  mask-image: url("../img/icons/furry-hover.png");
  -webkit-mask-image: url("../img/icons/furry-hover.png");
}

#icon-ta {
  mask-image: url("../img/icons/ta.png");
  -webkit-mask-image: url("../img/icons/ta.png");
}

#icon-ta:hover {
  mask-image: url("../img/icons/ta-hover.png");
  -webkit-mask-image: url("../img/icons/ta-hover.png");
}

#icon-ham {
  mask-image: url("../img/icons/ham.png");
  -webkit-mask-image: url("../img/icons/ham.png");
}

#icon-ham:hover {
  mask-image: url("../img/icons/ham-hover.png");
  -webkit-mask-image: url("../img/icons/ham-hover.png");
}

/* Sidebar icons */

#icon-about {
  mask-image: url("../img/icons/about.png");
  -webkit-mask-image: url("../img/icons/about.png");
}

#icon-feed {
  mask-image: url("../img/icons/feed.png");
  -webkit-mask-image: url("../img/icons/feed.png");
}

#icon-jam {
  mask-image: url("../img/icons/jam.png");
  -webkit-mask-image: url("../img/icons/jam.png");
}

#icon-links {
  mask-image: url("../img/icons/links.png");
  -webkit-mask-image: url("../img/icons/links.png");
}

#icon-x {
  mask-image: url("../img/icons/x.png");
  -webkit-mask-image: url("../img/icons/x.png");
}

#icon-comics {
  mask-image: url("../img/icons/comics.png");
  -webkit-mask-image: url("../img/icons/comics.png");
}

#icon-fediring-prev {
  mask-image: url("../img/icons/fediring_prev.png");
  -webkit-mask-image: url("../img/icons/fediring_prev.png");
}

#icon-fediring {
  mask-image: url("../img/icons/fediring.png");
  -webkit-mask-image: url("../img/icons/fediring.png");
}

#icon-fediring-next {
  mask-image: url("../img/icons/fediring_next.png");
  -webkit-mask-image: url("../img/icons/fediring_next.png");
}