webbed-site/static/css/style.css

:root,
:root.light {
  --bgColor: #F3F3F3;
  --fgColor: #484500;
  --metaColor: #FFA7BE;
  --headColor: #c87499;
  --linkColor: #589020;
  --hovColor: #FA809D;
  --bgSelect: #3a2930;
  --bgUrl: url("/img/pale.jpg") repeat;
  --red: #FA7A98;
  --dimRed: #F96889;
  --orange: #ffac12;
  --dimOrange: #ff9012;
  --yellow: #FFD612;
  --dimYellow: #fff41fd2;
  --green: #85b159;
  --dimGreen: #49860B;
  --blue: #04a5e5;
  --dimBlue: #1e66f5;
  --purple: #C4A5FB;
  --dimPurple: #9e82cf;
  --grey: #F1F1F1;
  --dimGrey: #c4c4c4;
  --u01: url("/img/f-ue.gif");
  --s01: url("/img/f-sita.gif");
  --kado1: url("/img/f-kado1.gif");
  --kado2: url("/img/f-kado2.gif");
  --migi: url("/img/f-migi.gif");
  --hidari: url("/img/f-hidari.gif");
  --kado3: url("/img/f-kado3.gif");
  --kado4: url("/img/f-kado4.gif")
}

:root.dark {
  --bgColor: #000040;
  --fgColor: #FFFFC8;
  --metaColor: #ff97f6;
  --headColor: #c87499;
  --linkColor: #99F3A3;
  --hovColor: #B89CF1;
  --bgSelect: #6c7086;
  --bgUrl: url("/img/stars.jpg") repeat;
  --red: #F897FE;
  --dimRed: #DD86E7;
  --orange: #E7CB8C;
  --dimOrange: #D6BB6E;
  --yellow: #F4FF93;
  --dimYellow: #E8FA8E;
  --green: #A1EEAA;
  --dimGreen: #4E8B62;
  --blue: #53D8FF;
  --dimBlue: #3BBBE8;
  --purple: #C5ADFB;
  --dimPurple: #A990E1;
  --grey: #CBD0FF;
  --dimGrey: #A0A8E6;
  --u01: url("");
  --s01:url("");
  --kado1: url("");
  --kado2:url("");
  --migi: url("");
  --hidari:url("");
  --kado3: url("");
  --kado4:url("")
}

@font-face {
  font-family: BabyDoll;
  src: url("/fonts/BabyDoll.ttf")
}

@font-face {
  font-family: Binchotan;
  src: url("/fonts/Binchotan.ttf")
}

@font-face {
  font-family: Daydream;
  src: url("/fonts/Daydream.ttf")
}

.layout {
  width: 65%;
  height: auto;
  margin: auto;
  display: grid;
  grid: "header" auto "main" 1fr "footer" auto / 0.98fr;
  gap: 8px;
  justify-content: center
}

.header {
  grid-area: header
}

.main {
  grid-area: main
}

.footer {
  grid-area: footer
}

.themeButton {
  cursor: pointer;
  border: none;
  font-size: 1rem;
  background-color: transparent
}

.dark .themeButton.dark,
.themeButton.light {
  display: none
}

.dark .themeButton.light {
  display: block
}

.box16 {
  margin: 1em 0;
  width: auto
}

.u01 {
  background: var(--u01) repeat-x;
  height: 37px;
  margin: 0 21px
}

.s01 {
  background: var(--s01) repeat-x;
  height: 37px;
  margin: 0 21px
}

.box-top {
  background-image: var(--kado1), var(--kado2);
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
  height: 37px
}

.box-center {
  background-image: var(--hidari), var(--migi);
  background-position: top right, top left;
  background-repeat: repeat-y, repeat-y;
  padding: 0 21px
}

.box-inner {
  background: var(--bgColor);
  padding: 25px 25px 8px;
  border-radius: 20px
}

.box-bottom {
  background-image: var(--kado3), var(--kado4);
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
  height: 37px
}

.col-wrapper {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center
}

.two-col {
  column-width: 500px;
  gap: 1rem
}

.three-col {
  column-width: 330px;
  gap: 1rem;
  text-align: center
}

.three-col>div,
.two-col>div {
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid
}

.two-col,
img {
  max-width: 100%;
  text-align: center
}

.two-col-left {
  max-width: 100%;
  column-width: 500px;
  gap: 1rem
}

::-moz-selection {
  color: var(--bgColor);
  background: var(--metaColor)
}

::selection {
  color: var(--bgColor);
  background: var(--metaColor)
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  scrollbar-color: var(--metaColor) var(--bgColor);
  scrollbar-width: thin;
  font-size: 0.9rem;
  line-height: 1;
  margin: auto;
  overflow-wrap: break-word;
  background: var(--bgUrl);
  color: var(--fgColor);
  font-family: 'Binchotan', monospace
}

img {
  vertical-align: middle;
  margin: 0;
  padding: 0
}

.navBar>a {
  text-decoration: none;
  padding: 0 0.2rem;
  border-radius: 0.3rem;
  color: var(--linkColor)
}

a {
  padding: 0;
  text-decoration: none;
  color: var(--linkColor)
}

a:active,
a:hover {
  color: var(--hovColor)
}

.head {
  text-align: center;
  align-items: center;
  justify-content: center;
  align-content: center
}

.navBar {
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center
}

.navtoc {
  display: inline;
  font-size: 0.9em;
  text-align: center
}

.ph {
  font-size: 1.4em;
  vertical-align: middle;
  display: inline-block;
  color: var(--linkColor);
  fill: var(--fgColor);
  background-color: transparent
}

.ph:hover {
  background-color: transparent;
  color: var(--hovColor)
}

div.emoji {
  justify-content: space-between;
  text-align: center
}

div.emoji img {
  justify-content: space-between;
  text-align: center;
  width: 50px
}

div.blinkie {
  display: block;
  text-align: center
}

div.blinkie img {
  max-width: 150px;
  padding-bottom: 0.2em
}

div.stamp {
  display: block;
  text-align: center
}

div.stamp img {
  max-width: 100px;
  max-height: 100px;
  margin-bottom: 0.1em
}

div.banner {
  display: block;
  text-align: center;
}

div.banner img {
  max-width: 88px;
  margin-bottom: 0.1em
}

div.fanlist img {
  padding: 2px
}

div.fanlist p {
  margin: 0.3em
}

div.aside {
  font-size: 0.8em
}

div.song {
  font-size: 0.9em;
  text-align: center
}

div.quiz img {
  margin: auto;
  text-align: center;
  max-width: 75%
}

.button {
  background-color: var(--linkColor);
  border-radius: 7px;
  padding: 0.3em;
  text-align: center;
  display: inline-block;
  vertical-align: center;
  margin: 0.2em
}

.button:hover {
  background-color: var(--metaColor)
}

h1 {
  font-family: 'BabyDoll', cursive;
  color: var(--red);
  font-size: 2.5em;
  line-height: 1.3rem;
  margin: 0.2em;
  padding-bottom: 0.3em
}

h2 {
  font-family: 'Daydream', cursive;
  color: var(--purple);
  font-size: 1.4em;
  line-height: 1.5em;
  text-align: center;
  margin: 2px
}

h3 {
  font-family: 'BabyDoll', cursive;
  color: var(--metaColor);
  font-size: 1.8em;
  margin: 0
}

h3::before {
  content: url("/img/sparklestar.gif");
  margin-right: 6px;
  vertical-align: middle
}

h4 {
  font-family: 'BabyDoll', cursive;
  color: var(--hovColor);
  font-size: 1.4em;
  line-height: 0;
  margin: 0;
  text-indent: 0.5em
}

h4::before {
  content: url("/img/heart.png");
  margin-right: 6px;
  vertical-align: middle
}

h5 {
  font-family: "Daydream", monospace;
  font-weight: bold;
  color: var(--red);
  font-size: 1.4em;
  line-height: 0.8em;
  margin: 0;
  text-indent: 0.7em;
  padding-top: 0.6em
}

h6 {
  font-family: "Daydream", cursive;
  color: var(--red);
  font-size: 1em;
  line-height: 1em;
  margin: 0
}

p {
  padding: 0;
  margin-block: 0.8em
}

div.blogdate {
  font-style: italic;
  font-size: 0.9em;
  padding: 2px
}

div.blogauthor {
  font-style: italic;
  padding: 2px
}

hr {
  border: 1px dashed;
  color: var(--hovColor)
}

.toc-list {
  margin-left: 0.3em
}

ul {
  list-style-image: url("/img/tinylightpinkarrow.gif");
  font-size: 12pt;
  line-height: 1.2em
}

.footContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center
}

.footLeft {
  font-size: 16px
}

footer {
  font-size: 0.6em;
  clear: both;
  color: var(--footColor)
}

footer,
td,
th {
  text-align: left
}

#statuscafe {
  padding: 0.5em;
  background-color: var(--bgColor);
  border: 1px solid var(--hovColor);
  border-radius: 1em;
  max-width: fit-content;
  text-align: left;
  margin: auto
}

#statuscafe-username {
  margin-bottom: 0.5em
}

#statuscafe-content {
  margin: 0 1em 0.25em;
}

.last {
  max-width: 90%;
  margin: auto
}