.icon-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 16px;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-family: 'DotGothic16';
  max-width: 100%;
}

.nekoweb-icon::before {
  content: url("../assets/images/nekoweb-icon.png");
  text-align: center;
  display: block;
}
.nekoweb-icon::after {
  content: "Nekoweb";
  display: block;
}

.discord-icon::before {
  content: url("../assets/images/discord-icon.png");
  text-align: center;
  display: block;
}
.discord-icon::after {
  content: "Discord";
  display: block;
}

.github-icon::before {
  content: url("../assets/images/github-icon.png");
  text-align: center;
  display: block;
}
.github-icon::after {
  content: "GitHub";
  display: block;
}

.youtube-icon::before {
  content: url("../assets/images/youtube-icon.png");
  text-align: center;
  display: block;
}
.youtube-icon::after {
  content: "YouTube";
  display: block;
}

.reddit-icon::before {
  content: url("../assets/images/reddit-icon-new.png");
  text-align: center;
  display: block;
}
.reddit-icon::after {
  content: "Reddit";
  display: block;
}

.neocities-icon::before {
  content: url("../assets/images/neocities-icon.png");
  text-align: center;
  display: block;
}
.neocities-icon::after {
  content: "Neocities";
  display: block;
}

.atabook-icon::before {
  content: url("../assets/images/atabook-icon32.png");
  text-align: center;
  display: block;
}
.atabook-icon::after {
  content: "Atabook";
  display: block;
}

.mail-icon::before {
  content: url("../assets/images/mail-icon.png");
  text-align: center;
  display: block;
}
.mail-icon::after {
  content: "E-Mail";
  display: block;
}

.rss-icon::before {
  content: url("../assets/images/rss-icon-32.png");
  text-align: center;
  display: block;
}
.rss-icon::after {
  content: "RSS Feed";
  display: block;
}

.itch-icon::before {
  content: url("../assets/images/itchio-icon.png");
  text-align: center;
  display: block;
}
.itch-icon::after {
  content: "itch.io";
  display: block;
}

.faq-icon::before {
  content: url("../assets/images/faq-icon.png");
  text-align: center;
  display: block;
}
.faq-icon::after {
  content: "FAQ";
  display: block;
}

.book-icon::before {
  content: url("../assets/images/book-icon.png");
  text-align: center;
  display: block;
}
.book-icon::after {
  content: "Guestbook";
  display: block;
}


.mastodon-icon::before {
  content: url("../assets/images/mastodon-icon.png");
  text-align: center;
  display: block;
}
.mastodon-icon::after {
  content: "Mastodon";
  display: block;
}

.notepad-icon::before {
  content: url("../assets/images/notepad-icon.png");
  text-align: center;
  display: block;
}
.notepad-icon::after {
  content: "Notepad";
  display: block;
}


.yt-thmb-dwnld-icon::before {
  content: url("../assets/images/yt-thmb-dwnld-icon.png");
  text-align: center;
  display: block;
}
.yt-thmb-dwnld-icon::after {
  display: block;
}

.webphone-icon::before {
  content: url("../assets/images/phone-icon.png");
  text-align: center;
  display: block;
}
.webphone-icon::after {
  display: block;
  content: "Webphone";
}


.folder-icon::before {
  content: url("../assets/images/folder_closed.png");
  text-align: center;
  display: block;
}

.folder-icon:hover::before {
  content: url("../assets/images/folder-open.png");
  text-align: center;
  display: block;
}

.flower::before {
  content: url("../assets/banners/250x250/sunflower_dithered_big.png");
  display: block;
  text-align: center;
  transition: transform 0.2s ease;
  
}


.dark .flower::before {
  content: url("../assets/banners/250x250/dark_dithered_flower.png");
  transform: scaleX(-1);
}

.x-icon::before {
  content: url("../assets/images/x-icon.svg");
  text-align: center;
  display: block;
}
.x-icon::after {
  content: "X";
  display: block;
}
.pumpfun-icon::before { content: url("../assets/images/pumpfun.png"); text-align: center; display: block; }
.pumpfun-icon::after { content: "pump.fun"; display: block; }

.dex-icon::before { content: url("../assets/images/dexscreener.png"); text-align: center; display: block; }
.dex-icon::after { content: "DEXScreener"; display: block; }

.magiceden-icon::before { content: url("../assets/images/magiceden.png"); text-align: center; display: block; }
.magiceden-icon::after { content: "Magic Eden"; display: block; }