Template:Main box/styles.css

/* main black text box and dependencies for headers (the shadow is inversed as the container goes above) */

.main-txt-box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #3d3d3f;
  box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
  border-radius: 15px;
}

html.skin-theme-clientpref-night .main-txt-box {
  background-color: #161a24;
  box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-box {
    background-color: #161a24;
    box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
  }
}

.main-container {
  width: 100%;
  box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
  margin: auto;
}

html.skin-theme-clientpref-night .main-container {
  box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-container {
    box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
  }
}

.main-txt-h1 {
  color: #f6f5f3;
  font-size: 200%;
  text-align: center;
}

html.skin-theme-clientpref-night .main-txt-h1 {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-h1 {
    color: white;
  }
}

.main-txt-p {
  color: #f6f5f3;
  font-size: 150%;
  text-align: center;
}

html.skin-theme-clientpref-night .main-txt-p {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p {
    color: white;
  }
}

.main-txt-p a {
  color: #f6f5f3;
  text-decoration: underline;
}

html.skin-theme-clientpref-night .main-txt-p a {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p a {
    color: white;
  }
}

.main-txt-p-tiny {
  color: #f6f5f3;
  font-size: 80%;
  text-align: center;
}

html.skin-theme-clientpref-night .main-txt-p-tiny {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p-tiny {
    color: white;
  }
}

.main-txt-p-tiny a {
  color: #f6f5f3;
  text-decoration: underline;
}

html.skin-theme-clientpref-night .main-txt-p-tiny a {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p-tiny a {
    color: white;
  }
}

.main-txt-p-medium {
  color: #f6f5f3;
  font-size: 100%;
  text-align: center;
}

html.skin-theme-clientpref-night .main-txt-p-medium {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p-medium {
    color: white;
  }
}

.main-txt-p-small {
  color: #f6f5f3;
  font-size: 50%;
  text-align: center;
}

html.skin-theme-clientpref-night .main-txt-p-small {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .main-txt-p-small {
    color: white;
  }
}