peddlers-of-ketran/src/App.css

body {
  font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
}

.Cards {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-block;
  text-align: right;
  vertical-align: bottom;
  padding: 0.5em;
}

.Stack {
  position: relative;
  display: inline-block;
}

.Stack:not(:first-child) {
  margin-left: -3em;
  transition: margin-left 1s ease-in-out 0.25s;
}

.Stack > * {
  transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
}

.Development:hover,
.Placard:hover,
.Resource:hover {
  filter: brightness(150%);
}

.Stack > *:not(:first-child) {
  margin-left: -4.5em;
}

.Hand {
  min-height: calc(7.2em + 0.5em);
}

.Hand:hover .Stack:hover > *:not(:first-child) {
  margin-left: -2em;
}

.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
  margin-right: 3em;
}

.Placard {
  position: relative;
  width: 9.4em;
  height: 11.44em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0.25em;
  display: inline-block;
}

.Development {
  position: relative;
  display: inline-block;
  width: 4.9em;
  height: 7.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0.25em;
}

.Resource {
  position: relative;
  width: 4.9em;
  height: 7.2em;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0.25em;
}

.Statistics > div:nth-child(2) {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}

.Statistics div:nth-child(2) div {
  padding: 0.25em 0.5em;
}

.MarkdownLoader {
  position: relative;
}

.gitlab-banner {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  overflow: hidden;
  background-color: #252525;
  box-sizing: border-box;
  cursor: pointer;
  height: 1.5em;
  line-height: 0.9em;
  opacity: 0.25;
  transition: opacity 0.5s ease-out;
  text-decoration: none;
  padding: 0.25em 0.5em;
}

.gitlab-banner:hover {
  opacity: 1;
}

.gitlab-banner a {
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  font-variant: all-small-caps;
}

.gitlab-banner:hover a {
  text-decoration: underline;
}

#spinner {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  z-index: 100;
  background-image: url(../assets/vtt-logo.png);
  background-color: #0071C5;
  border-radius: 50%;
}

.Logo {
  width: 52px;
  height: 52px;
  background-image: url(../assets/vtt.svg);
  background-color: #252525;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95% 95%;
  border-radius: 50%;
  display: inline-block;
}

#spinner.spin {
  display: inline-block;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.Header {
  background-color: #252525;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  user-select: none;
}

.Header .Group {
  height: 60px;
  display: flex;
  padding-left: 1em;
  padding-right: calc(1em + 52px);
  background-color: #0071C5;
  align-items: center;
}

.Header .Group .Subtitle {
  font-size: 0.7em;
  line-height: 1.5em;
}

.Header .Group .Heading {
  margin: 0 auto;
  width: calc(100% - 8em);
  max-width: 90em;
}

.Header .Pages {
  height: 60px;
  display: flex;
  margin: 0 auto;
  width: calc(100% - 8em);
  max-width: 90em;
/*  justify-content: space-between;*/
  font-size: 1.2em;
  align-items: center;
}

.Header .Pages .Link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0.5em 1em;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.Header .Pages .Link.Highlight {
  border-bottom-color: #0071C5 !important;
}

.Header .Pages .Link.Active,
.Header .Pages .Link:hover {
  border-bottom-color: #003663; 
  /*border-bottom-color: #00A7FF;*/
}

a.Link {
  font-family: Oswald;
  text-decoration: none;
  color: white;
}

.Footer {
  position: fixed;
  background-color: #252525;
  color: #ffffff;
  height: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.9em;
  font-family: Droid Sans;
  z-index: 20;  
}

.Footer .Copyright {
  position: absolute;
  line-height: 64px;
  text-align: center;
  left: 64px;
  right: 64px;
}

.Footer .Lizard {
  position: absolute;
  width: 100px;
  height: 64px;
  right: 1em;
  background-image: url(../assets/agama.png);
  background-repeat: no-repeat;
  background-position: 98% center;
  background-size: auto 40px;
  cursor: pointer;
}

.Body {
  position: absolute;
  /* .Header's two 60px chunks */
  /*
  margin-top: 120px;
  */
  /* .Footer's 64 px */
  /*
  margin-bottom: 64px;
  */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background-image: linear-gradient(#090B1A, #131524);
  color: #ffffff;
  z-index: 0;
}

.Body > * {
  box-sizing: border-box;
}

.popup {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 5em;
  z-index: 1000;
}

.popped-up {
  display: inline-block;
}

.Board {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

.Board.NoBackground {
  opacity: 0;
}

.Index {
  display: none;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  bottom: 0;
  width: 12em;
  margin-right: 1em;
}

.Index > div {
  padding: 0.25em 0.5em;
  cursor: pointer;
  color: #444;
}

.Index div.story {
  font-size: 0.9em;
  padding-left: 0.5em;
}

.Index div.topic {
  font-size: 1em;
}

.Index .active {
  color: black;
  font-weight: bold;
}

.Index div.inactive:hover {
  text-decoration: underline;
}

.Main {
  display: inline-flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(../assets/vtt-logo.png);
  background-repeat: no-repeat;
  background-position: center;
}


.Main.NoBackground {
  background-image: none;
}

.Content {
  position: relative;
  box-sizing: border-box;
  margin: 1em auto;
  width: calc(100% - 8em);
  max-width: 90em;
  color: black;
  z-index: 10;
  background-color: #fff;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding: 1.5em 1.5em 0 1.5em;
  box-sizing: border-box;
  transition: top 1s ease-in-out;
  top: -100%;
}

.Content #MinBox {
  position: relative;
  box-sizing: border-box;
  min-height: calc(100% - 2.5em);
  padding-bottom: 1.3em;
}

.OnScreen {
  top: 0px;
}

.Markdown pre {
  max-width: 100ex;
}

.Markdown h1 {
  margin-top: 1em;
  font-size: 1.0em;
  font-weight: bold;
}

.Markdown h2 {
  margin-top: 0.8em;
  font-size: 1.0em;
  font-weight: bold;
}

.Markdown h1:first-child,
.Markdown h2:first-child {
      margin-top: 0;
}

.Markdown th {
  font-variant-caps: all-small-caps;
  font-size: 1.1em;
  font-weight: normal;
  padding: 0.25em 0.5em;
}

.Markdown table {
  border-collapse: collapse;
  margin: 0 1em;
}

.Markdown td {
  vertical-align: top;
  padding: 0.25em 0.5em;
  border: 1px solid #f0f0f0;
}