html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html{
  --linktones: #DCB;
  --linktonesvisited:#A98;
  --black:#00000F;
}

html{
  height:100%;
background-color:var(--black);
color:#F8F8FF;
text-shadow: -2px 1px 1px #000,
				  1px 2px 1px black,
				 2px -1px 1px #000,
				-1px -2px 1px black;
letter-spacing: -.04em;
  overflow-wrap:break-word;
}

span{
  padding:2px;
  padding-left: 0px;
}

a{
 color:var(--linktones);
  font-weight:bold;
cursor: pointer;
}
a.visited {
  color:#A98;
}

.actionstring a::before{
 content:' ⇒';
}

#next{
  font-size:300%;
}

body{
  font-size:13.5pt;
  margin:0px;
}
h1, h2, h3{
 margin:.1em;
}

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--black);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#opening{
  position:fixed;
  width:100vw;
  height:100vh;
  background-color: rgba(30,30,30,1);
  z-index:10;
  padding:20%;
}


#contentscroll,#contentfader{
  overflow: hidden;
  height:80vh;
  margin:30px;
  padding: 10px;
  background: rgba(40,40,40,.4);
  position: absolute;
  z-index:1;
  width:40vw;
  top:0px;
  left:0px;
}
#contentfader{
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient( var(--black) 10vh , rgba(0,0,0,0) 60vh);
  pointer-events: none;
  z-index: 2;
  backface-visibility: hidden;
}
.content{
  border-radius: 5px;
  background-color:#666;
  padding:5px;
  animation-name:bgfadein;
  animation-fill-mode: forwards;
  animation-duration: .7s;
  margin-bottom: 10px;
  max-height: 30vh;
  overflow-y:scroll;
}
.initialpadding{
  height:30vh;
  width:inherit;
}

#content{
position:absolute;
 background:none;
left:calc(42vw - 30vw);
top:50px;
 text-align:justify;/**/
 z-index:1;
 width:60vw;
 padding-bottom: 100px;
}

#content{
  margin-top: 10px;
  margin-bottom: 10px;
  border: 5px solid rgba(80,80,80,1);
  border-right: 5px solid rgba(40,40,40,1);
  border-bottom: 5px solid rgba(20,20,20,1);
  padding:10px;
  white-space: pre-line;
  background-color: rgba(30,30,30,.7);
  border-radius: 10px;
  backdrop-filter: blur(.5);
  -webkit-backdrop-filter: blur(.5);

}
#qualities{
  position:fixed;
  left:calc(42vw + 30vw + 0px);
  top:55px;
  width:20vw;
  z-index:1;
}

.actionstring, .actionresult {
  /*display:inline-block;*/
}
.actionresult.freshresult,.actionstring,#maindescript.animreset{
  animation-name:bgfadein;
  animation-fill-mode: forwards;
  animation-duration: .7s;
}

.icon{
  text-align: center;
  width:50px;
  height:50px;
  background:#222222;
  float:left;
  border: 2px solid rgba(80,80,80,1);
  border-right: 2px solid rgba(40,40,40,1);
  border-bottom: 2px solid rgba(20,20,20,1);
  border-radius: 4px;
  margin:2px;
  font-size: 130%;
  position:relative;
}
.newflash {
  background-image:radial-gradient( rgba(255,255,0,0),rgba(255,225,180,.2),rgba(255,225,180,1));
  width:inherit;
  height:inherit;
  position:absolute;

  mix-blend-mode: screen;
    opacity:.95;
    animation-name:bgfadeoutsoft;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
}
.achieved{
  border: 2px solid rgba(180,180,180,1);
  border-right: 2px solid rgba(140,140,140,1);
  border-bottom: 2px solid rgba(120,120,120,1);
  border-radius: 4px;
}
.icondescript{
  display:none;
}
.num{
  font-size:70%;
}
.icon:hover .icondescript{
  font-size: 80%;
  width:150px;
  position:absolute;
  top:10px;
  left:-75px;
  padding:5px;
  background-color:inherit;
  background-image:inherit;
  display:block;
  overflow: visible;
  z-index:2;
  border: 1px solid rgba(180,180,180,1);
  border-radius: 4px;
}


#dials{
  position:absolute;
  bottom:calc(100vh - 30px);
  left:calc(40vw + 30px);
  z-index: 1;
  transform: rotate(90deg);
  transform-origin: bottom left;
}
.vertdial{
  background-image:radial-gradient(circle, #ccc 7px, rgba(0, 0, 0, 0) 8px),linear-gradient(to right, #222 150px , rgba(0, 0, 0, 0) 190px);
  background-position: center 190px, center;
  padding:2.5px;
}
.vertbar{
  transform: rotate(180deg);
  transform-origin: center;
  width:150px;
  height:20px;
}
.vertbutton{
  transform: rotate(-20deg);
  transform-origin: center left;
  margin-left: 10px;
}


#memorybox{
  --leftchamfer:70px;
  position:fixed;
  top:30px;
  left:calc(40vw + 90px);
  z-index: 2;
  width:45vw;
  height:350px;
  overflow-y:scroll;
backface-visibility: hidden;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, var(--leftchamfer) 100%, 0% 150px);
  padding:5px;
  background-color: rgba(30,30,30,.9);
  border-radius: 10px;
  padding-left:calc(var(--leftchamfer) - 40px);
}
#memorybox .content{
  white-space: pre-wrap;
  width: 80%;
  font-size: 80%;
  position: relative;
  z-index: 2;
}
#memorybox .content:hover{
  z-index:5;
}

#metabackground {
  overflow: hidden;
  width:100%;
  height:100%;
  opacity:0;
}
#backgrounds, #foregrounds, #dulltiles{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
overflow:hidden;
    width:calc(100% + 55px);
    height:calc(100% + 55px);
    left:calc(50vw - 35vw);
    width:70vw;
    height:70vh;
  backface-visibility: hidden;
}
.fadeedges {
  position:fixed;
  background:linear-gradient( to right, var(--black), transparent 15%, transparent 80%,  var(--black) 95%),linear-gradient( to bottom, transparent 70%, var(--black));
  z-index:0;
  width:70vw;
  height:70vh;
  left:calc(50vw - 35vw);
  top:0px
}
#dulltiles{
  z-index: -3;
}
#backgrounds{
  z-index: 0;
  background: transparent;
}
#foregrounds{
  z-index: 2;
    pointer-events:none;
}

#bgoverlay div{
  position:fixed;
  top:0px;
  left:0px;
  height:100vh;
  width:100vw;
  z-index:0;
  opacity:.5;
}

#bgoverlay .light{
  background:linear-gradient(135deg, rgba(76,76,76,1) 0%,rgba(0,0,0,0.84) 2%,rgba(51,51,51,0.54) 4%,rgba(76,76,76,0.64) 5%,rgba(80,80,80,0.84) 7%,rgba(84,84,84,0) 9%,rgba(89,89,89,0.84) 12%,rgba(69,69,69,0.54) 14%,rgba(30,30,30,0) 18%,rgba(0,0,0,0.54) 21%,rgba(82,82,82,0.84) 25%,rgba(102,102,102,0.42) 26%,rgba(98,98,98,0) 27%,rgba(80,80,80,0.84) 32%,rgba(76,76,76,0.84) 33%,rgba(61,61,61,0.84) 34%,rgba(15,15,15,0.54) 37%,rgba(0,0,0,0.62) 38%,rgba(71,71,71,0.69) 39%,rgba(43,43,43,0.84) 41%,rgba(14,14,14,0) 43%,rgba(0,0,0,0.21) 44%,rgba(22,22,22,0.84) 47%,rgba(44,44,44,0.54) 50%,rgba(22,22,22,0.84) 53%,rgba(0,0,0,0.84) 56%,rgba(17,17,17,0.17) 60%,rgba(29,29,29,0) 61%,rgba(53,53,53,0.84) 63%,rgba(76,76,76,0.84) 65%,rgba(67,67,67,0.84) 68%,rgba(61,61,61,0.54) 70%,rgba(49,49,49,0) 74%,rgba(43,43,43,0.56) 76%,rgba(38,38,38,0.84) 77%,rgba(22,22,22,0.84) 80%,rgba(0,0,0,0.17) 84%,rgba(4,4,4,0) 85%,rgba(16,16,16,0.84) 88%,rgba(28,28,28,0.62) 91%,rgba(27,27,27,0.54) 92%,rgba(23,23,23,0.84) 96%,rgba(19,19,19,1) 100%) ,
  linear-gradient(125deg, rgba(108,108,108,1) 0%,rgba(75,75,75,0.8) 8%,rgba(75,75,75,0.26) 12%,rgba(75,75,75,0.12) 13%,rgba(130,130,130,0.8) 17%,rgba(75,75,75,0.29) 20%,rgba(75,75,75,0.12) 21%,rgba(75,75,75,0.39) 23%,rgba(75,75,75,0.8) 26%,rgba(75,75,75,0.63) 28%,rgba(75,75,75,0.12) 34%,rgba(130,130,130,0.51) 38%,rgba(108,108,108,0.8) 41%,rgba(108,108,108,0.12) 44%,rgba(75,75,75,0.8) 50%,rgba(75,75,75,0.8) 52%,rgba(108,108,108,0.8) 55%,rgba(130,130,130,0.46) 57%,rgba(108,108,108,0.12) 59%,rgba(75,75,75,0.12) 60%,rgba(75,75,75,0.12) 64%,rgba(75,75,75,0.8) 66%,rgba(130,130,130,0.8) 70%,rgba(93,93,93,0.8) 72%,rgba(93,93,93,0.8) 73%,rgba(108,108,108,0.8) 79%,rgba(130,130,130,0.72) 80%,rgba(75,75,75,0.55) 82%,rgba(75,75,75,0.46) 83%,rgba(75,75,75,0.12) 87%,rgba(75,75,75,0.12) 90%,rgba(75,75,75,0.12) 91%,rgba(75,75,75,0.46) 94%,rgba(75,75,75,0.8) 97%,rgba(75,75,75,1) 100%);

}
#bgoverlay .ambient{
  opacity:.3;
  background-image: url(data:image/png;base64,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),
  radial-gradient(ellipse at center, rgba(55,55,55,1) 0%,rgba(19,19,19,0.8) 8%,rgba(19,19,19,0.26) 12%,rgba(19,19,19,0.12) 13%,rgba(55,55,55,0.8) 17%,rgba(19,19,19,0.29) 20%,rgba(19,19,19,0.12) 21%,rgba(19,19,19,0.39) 23%,rgba(19,19,19,0.8) 26%,rgba(19,19,19,0.63) 28%,rgba(19,19,19,0.12) 34%,rgba(55,55,55,0.51) 38%,rgba(19,19,19,0.8) 41%,rgba(19,19,19,0.12) 44%,rgba(19,19,19,0.8) 50%,rgba(19,19,19,0.8) 52%,rgba(31,31,31,0.8) 55%,rgba(55,55,55,0.46) 57%,rgba(31,31,31,0.12) 59%,rgba(30,19,2,0.12) 60%,rgba(19,19,19,0.12) 64%,rgba(19,19,19,0.8) 66%,rgba(55,55,55,0.8) 70%,rgba(31,31,31,0.8) 72%,rgba(19,19,19,0.8) 73%,rgba(55,55,55,0.8) 79%,rgba(55,55,55,0.72) 80%,rgba(19,19,19,0.55) 82%,rgba(19,19,19,0.46) 83%,rgba(19,19,19,0.12) 87%,rgba(19,19,19,0.12) 90%,rgba(19,19,19,0.12) 91%,rgba(19,19,19,0.46) 94%,rgba(19,19,19,0.8) 97%,rgba(19,19,19,1) 100%);
}
#bgoverlay .tracklight{
  background: linear-gradient(90deg, rgba(75,83,102,0.45) 1%,rgba(75,83,102,0.4) 3%,rgba(137,137,186,0.33) 6%,rgba(75,83,102,0.3) 7%,rgba(137,137,186,0.2) 11%,rgba(75,83,102,0) 16%,rgba(137,137,186,0.2) 19%,rgba(75,83,102,0) 21%,rgba(75,83,102,0.09) 26%,rgba(175,211,224,0.2) 31%,rgba(75,83,102,0) 39%,rgba(75,83,102,0.11) 44%,rgba(175,211,224,0.2) 46%,rgba(137,137,186,0.2) 49%,rgba(75,83,102,0) 52%,rgba(75,83,102,0.07) 60%,rgba(75,83,102,0) 71%,rgba(137,137,186,0.2) 75%,rgba(175,211,224,0.2) 77%,rgba(75,83,102,0) 80%,rgba(75,83,102,0) 88%,rgba(137,137,186,0.2) 92%,rgba(175,211,224,0.27) 93%,rgba(75,83,102,0.34) 96%,rgba(75,83,102,0.44) 100%);
}
#bgoverlay .medievallight{

  background: linear-gradient(100deg, rgba(203,96,179,0.53) 0%,rgba(244,77,0,0.27) 4%,rgba(191,168,188,0) 8%,rgba(203,96,179,0.11) 12%,rgba(197,132,184,0.17) 14%,rgba(191,168,188,0.15) 16%,rgba(244,77,0,0.08) 22%,rgba(168,0,119,0) 28%,rgba(188,188,188,0.36) 31%,rgba(203,96,179,0.24) 36%,rgba(203,96,179,0.12) 41%,rgba(209,93,153,0.09) 42%,rgba(244,77,0,0.05) 48%,rgba(168,0,119,0.02) 53%,rgba(191,168,188,0.02) 54%,rgba(174,42,136,0) 57%,rgba(168,0,119,0.01) 58%,rgba(191,168,188,0.02) 60%,rgba(203,96,179,0.04) 63%,rgba(191,168,188,0.08) 68%,rgba(168,0,119,0.12) 73%,rgba(203,96,179,0.22) 79%,rgba(191,168,188,0.29) 83%,rgba(191,168,188,0.41) 90%,rgba(168,0,119,0) 93%,rgba(244,77,0,0.14) 95%,rgba(219,54,164,0.49) 100%);
}
#bgoverlay .archaiclight{

}
#bgoverlay .industriallight{
  background: linear-gradient(117deg,  rgba(96,29,29,0.36) 0%,rgba(96,29,29,0.35) 1%,rgba(204,0,0,0.26) 11%,rgba(255,189,170,0.18) 20%,rgba(204,0,0,0.14) 25%,rgba(255,189,170,0.08) 32%,rgba(204,0,0,0.05) 39%,rgba(96,29,29,0.02) 48%,rgba(204,0,0,0) 53%,rgba(96,29,29,0.01) 59%,rgba(204,0,0,0.02) 66%,rgba(96,29,29,0.03) 70%,rgba(255,189,170,0.1) 78%,rgba(96,29,29,0.15) 83%,rgba(255,189,170,0.22) 90%,rgba(96,29,29,0.29) 98%,rgba(96,29,29,0.31) 100%);
}
#bgoverlay .householdlight{
  background: linear-gradient(73deg, rgba(81,63,47,0.31) 0%,rgba(255,211,168,0.26) 18%,rgba(255,211,168,0.09) 29%,rgba(81,63,47,0) 35%,rgba(163,146,130,0.22) 44%,rgba(229,192,157,0.34) 49%,rgba(255,211,168,0.3) 51%,rgba(163,146,130,0.24) 54%,rgba(218,185,153,0) 66%,rgba(255,211,168,0.14) 74%,rgba(255,211,168,0.34) 85%,rgba(81,63,47,0.31) 100%);
}
#bgoverlay .plantslight{
  background: linear-gradient(120deg, rgba(114,170,0,0.47) 0%,rgba(192,234,161,0) 3%,rgba(218,255,214,0.04) 4%,rgba(114,170,0,0.17) 7%,rgba(158,203,45,0) 10%,rgba(218,255,214,0.17) 13%,rgba(114,170,0,0.1) 15%,rgba(158,203,45,0) 18%,rgba(218,255,214,0.09) 21%,rgba(158,203,45,0.14) 23%,rgba(167,210,69,0.17) 24%,rgba(218,255,214,0.02) 30%,rgba(203,242,172,0) 31%,rgba(158,203,45,0.17) 34%,rgba(218,255,214,0.03) 38%,rgba(206,245,180,0) 39%,rgba(158,203,45,0.17) 43%,rgba(218,255,214,0.1) 45%,rgba(172,213,111,0) 48%,rgba(142,185,42,0) 50%,rgba(150,194,44,0) 52%,rgba(158,203,45,0.07) 54%,rgba(218,255,214,0.17) 57%,rgba(114,170,0,0.1) 60%,rgba(218,255,214,0.03) 63%,rgba(211,249,193,0) 64%,rgba(158,203,45,0.17) 71%,rgba(114,170,0,0.17) 77%,rgba(143,192,30,0.17) 79%,rgba(158,203,45,0.14) 80%,rgba(218,255,214,0) 84%,rgba(158,203,45,0.13) 87%,rgba(178,220,101,0.17) 88%,rgba(218,255,214,0.1) 90%,rgba(114,170,0,0.03) 92%,rgba(129,181,15,0) 93%,rgba(158,203,45,0.17) 95%,rgba(158,203,45,0.47) 100%);
}
#bgoverlay .waterlight{
  background: linear-gradient(165deg,  rgba(71,91,82,0.34) 0%,rgba(80,102,99,0) 7%,rgba(85,108,109,0.1) 11%,rgba(113,206,239,0.25) 17%,rgba(33,224,144,0.2) 20%,rgba(113,206,239,0.11) 26%,rgba(33,224,144,0.08) 28%,rgba(85,108,109,0) 33%,rgba(113,206,239,0.19) 50%,rgba(33,224,144,0.2) 51%,rgba(85,108,109,0) 68%,rgba(113,206,239,0.2) 80%,rgba(73,215,192,0.22) 81%,rgba(33,224,144,0.19) 82%,rgba(56,144,107,0) 88%,rgba(71,91,82,0.12) 92%,rgba(85,108,109,0.37) 100%);
}
#bgoverlay .surfacinglight{
  background: linear-gradient(65deg, rgba(252,255,117,0.47) 0%,rgba(252,255,117,0.44) 1%,rgba(252,255,117,0) 14%,rgba(252,255,117,0.02) 15%,rgba(248,255,221,0.2) 23%,rgba(226,255,131,0) 27%,rgba(215,255,86,0.02) 29%,rgba(248,255,221,0.09) 35%,rgba(250,255,163,0.2) 45%,rgba(252,255,117,0.13) 53%,rgba(252,255,117,0) 68%,rgba(252,255,117,0.1) 74%,rgba(235,255,103,0.2) 80%,rgba(215,255,86,0) 87%,rgba(255,212,73,0.09) 90%,rgba(255,212,73,0.2) 94%,rgba(252,255,117,0.5) 100%);
}

.tile {
  width:40px;
  height:40px;
  background-color: #222;
  border:solid 2px var(--black);
  float:left;
  z-index:-1;
  margin-left:5px;
  margin-top:5px;
  border: 3px solid rgba(80,80,80,1);
  border-right: 2px solid rgba(40,40,40,1);
  border-bottom: 2px solid rgba(20,20,20,1);
  border-radius:2px;
}

.absent{
  opacity:1;
  animation-name:bgfadeout;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}
.present{
  opacity:1;
  animation-name:bgfadein;
  animation-fill-mode: forwards;
  animation-duration: 1s;

}
@keyframes bgfadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes bgfadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}


.absentsoft{
  opacity:.5;
  animation-name:bgfadeoutsoft;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}
.presentsoft{
  opacity:.5;
  animation-name:bgfadeinsoft;
  animation-fill-mode: forwards;
  animation-duration: 1s;

}
@keyframes bgfadeinsoft {
    from {opacity: 0;}
    to {opacity: .5;}
}
@keyframes bgfadeoutsoft {
    from {opacity: .5;}
    to {opacity: 0;}
}

.track , .passcodetrack{
  background:linear-gradient(45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
  }
  .archaic , .passcodearchaic {
    background:linear-gradient(45deg, #1e1714 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
  }
  .medieval , .passcodemedieval{
    background:linear-gradient(45deg, #2d2820 0%,#9b4b20 50%,#702403 52%,#fb955e 100%);
  }
  .industrial , .passcodeindustrial{
    background:linear-gradient(45deg, #2e302f 0%,#aebfbc 23%,#966a63 33%,#8ea6a2 50%,#96807c 67%,#4e5c5a 82%,#0e0e0e 100%);
  }
  .plants , .passcodeplants{
    background:radial-gradient(ellipse at center, #627d4d 0%,#1f3b08 100%);;
  }
  .surfacing , .passcodesurfacing{
    background:linear-gradient(45deg, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#e6f0a3 100%,#dbf043 100%);
  }
  .household , .passcodehousehold{
    background:linear-gradient(45deg, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
  }
  .water , .passcodewater{
    background:linear-gradient(45deg, #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%);
  }



@keyframes bgscrollup {
    from {margin-top:50%}
    to {margin-top:0%;}
}
@keyframes bgscrolldown {
    from {margin-top:-50%;}
    to {margin-top:0%;}
}

#progress, #progress2 {
  font-size: 120%;
  white-space: nowrap;
  overflow-x: hidden;
}

.combobox {
  color:yellow;
  position:relative;
  animation-name:combo;
  animation-fill-mode: forwards;
  animation-duration: 4s;
  border: solid 1px yellow;
  border-radius: 50%;
  padding:3px;
  transform: translateY(0px);
  display: block;
}

@keyframes combo {
  from { transform: translateY(-50px); opacity: 1;}
  to { transform: translateY(-80px); opacity: 0;}
}

.numgodown {
  color:red;
}



/*deactivates "actable" things while cards or other effects are fired*/
.inactive {
 pointer-events:none;
  background-image: repeating-linear-gradient(-45deg, rgba(65,60,30,.0), rgba(65,60,30,.5) 5px, rgba(20,30,10,.3) 5px, rgba(20,30,10,.7) 10px),
    repeating-linear-gradient(45deg, rgba(65,60,30,.0), rgba(65,60,30,.5) 5px, rgba(20,30,10,.3) 5px, rgba(20,30,10,.7) 10px);

 opacity:.35;

  color:var(--linktones);
}

.hidden {
 display:none;
}

.difficulty{
  display:none;
  color:red;
}
.difficultymarker:hover .difficulty{
  display:inline;
}



.fogged {
}
#fogbox{
  position:absolute;
  width:100vw;
  height:100vh;
  z-index:15;
  top:0px;
  left:0px;
  overflow: hidden;
  pointer-events:none;
}
.fog {
  position:absolute;
  left:-100vw;
  top:-100vh;
  background-image:radial-gradient(circle, rgba(0, 0, 0, 0) 34vw, var(--black) 65vw);
  background-repeat:no-repeat;
  background-position: center;
  width:200vw;
  height:200vh;
}