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

body {
    background-color: white;
    color: #000;
}

div.body {
    background-color: #ffffff;
    color: #3E4349;
}

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

  div.body {
    color: white;
    background-color: #19202b;
    padding-bottom: 24px;
  }
}

a {
    color: #004B6B;
}

a:hover {
    color: #206B8B;
}

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

  a:hover {
    color: #cddfff;
  }
}

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%;
}

/*
 * Custom home page for fkfd.me
 * Created on 2022-12-28
 */

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

div .webring-block-container {
  display: grid;
  gap: 0px;
  grid-template-columns: 120px 120px 120px;
}

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

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

.category-icon, .webring-icon {
  display: block;
  width: 120px;
  height: 120px;
  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;
}

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

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

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

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

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

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

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

#icon-ham {
  mask-image: url("../img/icons/ham.png");
  -webkit-mask-image: url("../img/icons/ham.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");
}