/* CSS for some other pages... */

/* Page: News */
#bsky-outer{
  background-color: var(--color-bluesky-backdrop);
  color:var(--color-bluesky-text);
  max-width:100%;
}


#news-sns-button-twitter{
  background-color:light-dark(
    var(--color-twitter-light-bg),
    var(--color-twitter-dark-bg));
  color:light-dark(
    var(--color-twitter-light-fg),
    var(--color-twitter-dark-fg));
}
#news-sns-button-twitter > img{
  max-height:1.0em;
  transform:scale(1.1);
  margin-right:0.2em;
}
#news-sns-button-bluesky{
  background-color:light-dark(
    var(--color-bluesky-light-bg),
    var(--color-bluesky-dark-bg));
  color:light-dark(
    var(--color-bluesky-light-fg),
    var(--color-bluesky-dark-fg));
}
#news-sns-button-bluesky > img{
  max-height:1.0em;
  transform:scale(1.2);
  margin-right:0.2em;
}
#news-sns-button-discord{
  background-color:light-dark(
    var(--color-discord-light-blurple),
    var(--color-discord-dark));
  color:var(--color-discord-blurple);
}
#news-sns-button-discord > img{
  max-height:1.0em;
  transform:scale(1.2);
  margin-right:0.2em;
}

.involve-header{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:8px;
  margin-bottom:8px;
}
.involve-header .link-button{
  font-size:1.3em;
}
.involve-header .involve-deadline{
  font-size:0.9em;
  text-align:center;
  line-height:1.4;
}

/* Page: CoC */
.ruledoc-embed{
  width:min(100%,800px);
  height:80svh;
  margin-top:16px;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}