/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  src: url(/fonts/crimson-text-latin-400-italic.woff2) format('woff2'), url(/fonts/crimson-text-latin-400-italic.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  src: url(/fonts/crimson-text-latin-ext-400-italic.woff2) format('woff2'), url(/fonts/crimson-text-latin-ext-400-italic.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  src: url(/fonts/crimson-text-latin-700-italic.woff2) format('woff2'), url(/fonts/crimson-text-latin-700-italic.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  src: url(/fonts/crimson-text-latin-ext-700-italic.woff2) format('woff2'), url(/fonts/crimson-text-latin-ext-700-italic.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/crimson-text-latin-400-normal.woff2) format('woff2'), url(/fonts/crimson-text-latin-400-normal.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/crimson-text-latin-ext-400-normal.woff2) format('woff2'), url(/fonts/crimson-text-latin-ext-400-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/crimson-text-latin-700-normal.woff2) format('woff2'), url(/fonts/crimson-text-latin-700-normal.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/crimson-text-latin-ext-700-normal.woff2) format('woff2'), url(/fonts/crimson-text-latin-ext-700-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-400-italic.woff2) format('woff2'), url(/fonts/noto-sans-latin-400-italic.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-ext-400-italic.woff2) format('woff2'), url(/fonts/noto-sans-latin-ext-400-italic.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-700-italic.woff2) format('woff2'), url(/fonts/noto-sans-latin-700-italic.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-ext-700-italic.woff2) format('woff2'), url(/fonts/noto-sans-latin-ext-700-italic.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-400-normal.woff2) format('woff2'), url(/fonts/noto-sans-latin-400-normal.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-ext-400-normal.woff2) format('woff2'), url(/fonts/noto-sans-latin-ext-400-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-700-normal.woff2) format('woff2'), url(/fonts/noto-sans-latin-700-normal.woff) format('woff'); 
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/noto-sans-latin-ext-700-normal.woff2) format('woff2'), url(/fonts/noto-sans-latin-ext-700-normal.woff) format('woff'); 
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

* {
  font-weight: normal;
}

html {
  font-family: "Crimson Text", serif;
  background-color: #1a1917;
  color: #a9a6a1;
}

h1, h2, h3 {
  color: #dcd9d0;
}

div.contents, div#agelist {
  border: 1px solid #695433;
  border-radius: 5px;
  margin: 10px auto;
  padding: 5px;
  max-width: 800px;
  border-top: 1px solid #9e804e;
  border-bottom: 2px solid #342717;
  text-align: justify;
}

div#agelist > ul {
  list-style-type: circle;
}

form {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 5px;
}

form > span {
  text-align: center;
  align-self: center;
}

form span:first-of-type {
  text-align: right;
}

form select, form button {
  font-family: "Noto Sans", sans-serif;
}

#formwrapper:after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg,rgba(169,166,161,1) 0%,rgba(0,0,0,0) 100%);
  display: block;
  margin-top: 5px;
}

div#agelist span {
  color: #dcd9d0;
}

#agelist ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 5px;
  text-align: left;
}

.contents-entry {
  color: #dcd9d0;
  border: 1px solid #a9a6a1;
  border-radius: 20px;
  margin: 5px;
  padding: 2px 20px;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.8em;
  display: inline-block;
  background: rgba(0,0,0,0);
  background: linear-gradient(to left, rgba(0,0,0,0) 34%, #a9a6a1 65%) right;
  background-size: 200%;
  transition: .6s ease-out;
}

.contents-entry:hover {
  background-position: left;
}

a, a:hover, a:visited {
  text-decoration: underline;
  color: inherit;
}

.contents-entry a {
  text-decoration: none;
}

#thecharacters li > details {
  display: inline;
  margin-left: 5px;
  border: 1px solid #a9a6a1;
  padding: 0 2px;
  color: #a9a6a1;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.8em;
}

#thecharacters li > details:has(ul:empty) {
  display: none;
}

#thecharacters li > details > summary {
  list-style: none;
  cursor: pointer;
}

#thecharacters li > details[closed] > summary:hover, li > details[open] > summary {
  color: #dcd9d0;
}

#thecharacters li > details[open] > summary:hover {
  color: #a9a6a1;
}

.contents h2:after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg,rgba(169,166,161,1) 0%,rgba(0,0,0,0) 100%);
    display: block;
    margin-top: 5px;
}

.toplink {
     font-family: "Noto Sans", sans-serif;
     font-size: 0.8em;
}

.toplink a {
     text-decoration: none;
}

details h3:after, .entry.single h2:after, .toplink:after, .missive h2:after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg,rgba(169,166,161,1) 0%,rgba(0,0,0,0) 100%);
  display: block;
  margin-top: 5px;
}

.contents blockquote {
  background-color: #dbc4a5;
  background: radial-gradient(ellipse, rgba(219,196,165,1) 0%, rgba(219,196,165,1) 89%, rgba(131,86,55,1) 100%);
  color: #51391f;
  padding: 2px 5px;
}

.contents blockquote a {
     color: #51391f;
}

.contents blockquote a:hover {
     color: #815b31;
}

.contents b {
     font-weight: bold;
}

.contents a {
     text-decoration-style: dotted;
}

.contents summary {
    cursor: pointer;
}

details.contents {
  border: 1px solid #6a6762;
  margin: 10px;
  text-align: center;
}

details.contents > summary {
  cursor: pointer;
  font-size: 1.5em;
  color: #dcd9d0;
  text-align: left;
  background-color: #6a6762;
  padding-left: 5px;
  font-family: "Noto Sans", sans-serif;
}

.entry > details, .entry.single, .missive, .whisper-outer {
  border: 1px solid #695433;
  border-radius: 5px;
  margin: 10px auto;
  max-width: 800px;
  border-top: 1px solid #9e804e;
  border-bottom: 2px solid #342717;
  text-align: justify;
}

.entry > details, .entry.single, .missive {
  padding: 5px;
}

.whisper-inner {
  padding: 2px 5px;
}

.indexpage .entry.single {
  text-align: left;
}

.entry > details.goldframe, .entry.single.goldframe {
  border: 1px solid #e6cb82;
  border-top: 1px solid #e8e5bc;
  border-bottom: 2px solid #e3b047;
}

.entry > details > summary {
  list-style: none;
  text-align: center;
  cursor: pointer;
}

.entry > details > summary:hover, .entry > details[open] > summary {
  color: #dcd9d0;
}

.entry > details[open] > summary:hover {
  color: #a9a6a1;
}

.affiliation {
  font-size: 0.8em;
}

.entry a, .missive a, .item a, .whisper-outer a {
  text-decoration-style: dotted;
}

.entry a:hover, .missive a:hover, .item a:hover, .whisper-outer a {
  color: #dcd9d0;
}

span.anchor {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.6em;
  color: #a9a6a1;
}

span.anchor > a {
  text-decoration: none;
}

::selection {
  background-color: #6a6762;
}
::-moz-selection {
  background-color: #6a6762;
}

ins {
  text-decoration: none;
}

.missive p, .whisper-inner p {
  text-indent: 0.5em;
}

.missive p.noindent {
  text-indent: 0;
}

.missive p.close, .whisper-outer p.close {
  text-indent: 0;
  text-align: right;
}

.missive, .whisper-outer {
  color: #c5c6c1;
  background-color: #1a1f1d;
  background: linear-gradient(152deg, rgba(26,31,29,1) 0%, rgba(46,55,51,1) 21%, rgba(26,31,29,1) 44%, rgba(46,55,51,1) 66%, rgba(26,31,29,1) 84%, rgba(46,55,51,1) 100%);
  border: none;
}

.missive > .missive {
  border: 1px solid #c5c6c1;
}

.missive h2 {
  color: #cfcfbf;
}

.whisper-outer h2 {
  color: #fbf5e7;
}

.missive h2 > span.quest {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.5em;
  margin-left: 10px;
  color: #e8e5bc;
}

.missive h2 > span.quest > a:hover {
  color: #f2f0d9;
}

.item {
  font-family: "Noto Sans", sans-serif;
  border: 2px solid #65605a;
  border-radius: 5px;
  max-width: 300px;
  margin: 0 auto;
  text-align: justify;
  color: #bcc0c1;
  font-size: 0.9em;
}

.item > div {
  border-bottom: 2px solid #65605a;
}

.item h2 {
  margin: 5px;
  font-size: 1em;
  font-weight: bold;
}

.item h2 i {
  font-weight: bold;
}

.item p {
  margin: 5px;
}

.item p.yellow {
  color: #ecc742;
}

.item p.yellow a:hover {
  color: #f4dd8b;
}

.item p.attribution {
  text-align: right;
}

.item > div.red {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(105,55,54,1) 70%, rgba(105,55,54,1) 100%);
}

.item > div.purple {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(46,0,65,1) 70%, rgba(46,0,65,1) 100%);
}

.item > div.green {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(20,51,20,1) 70%, rgba(20,51,20,1) 100%);
}

.item > div.blue {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(54,76,97,1) 70%, rgba(54,76,97,1) 100%);
}

.item > div.grey {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(50,51,46,1) 70%, rgba(50,51,46,1) 100%);
}

.item > div.yellow {
  background: rgb(26,31,29);
  background: linear-gradient(180deg, rgba(26,31,29,0) 0%, rgba(104,90,41,1) 70%, rgba(104,90,41,1) 100%);
}

#item-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.item h2 > span {
  font-weight: bold;
}

span.fire {
  color: #d5615d;
}

span.wind {
  color: #83a772;
}

span.lightning {
  color: #9352ad;
}

span.earth {
  color: #cfbf30;
}

span.light {
  color: #74a496;
}

span.ice {
  color: #7d7cb6;
}

span.dark {
  color: #b57d90;
}

span.water {
  color: #42a7f5; /*improve*/
}

span.creator {
  color: #c9c9c9; /*improve*/
}

.whisper-inner {
  background-color: #dbc4a5;
  background: radial-gradient(ellipse, rgba(219,196,165,1) 0%, rgba(219,196,165,1) 89%, rgba(131,86,55,1) 100%);
  color: #51391f;
}

.whisper-inner a {
  color: #51391f;
}

.whisper-inner a:hover {
  color: #815b31;
}