body { 
  background: url('../images/mindWasteland.gif') no-repeat scroll center / cover;
  text-align: center;
  font-size: 14px;
}


/* Headings */
header {
  visibility: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
h1 {
  /* font-size: 5rem; */
  font-size: 1em;
  color: #fff;
  text-align: center;
  margin: 0;
  visibility: hidden;
}
main h2 {
  font-size: 1.75rem;
  /* font-family: sans-serif; */
  color: #fff;  
  padding: 0.5rem 1rem;
  letter-spacing: 0.1rem;
  margin-bottom: 0;
  margin-top: 2rem;
}
main section:first-of-type h2 {
  margin-top: 0;
}
#dossier h2 {
  background-color: rgb(207 62 62);
}
#todo h2 {
  background-color: rgb(62 187 207);
}
h3 {
  font-size: 1.2rem;
  color: #3b413c;
  margin-top: 1rem;
}

/* Paragraph Styles */
p, nav li { 
    font-size: 1rem;
    line-height: 1.75;
    /* margin-bottom: 1em; */
    margin-top: 0;
}

ul {
    list-style: none;
}

a { 
    color: #d5ffe0; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.1s ease-in-out; 
}
a:hover, 
a:active, 
a:focus { 
    background-color: #ffe9cb; 
    color: #3c042f; 
}
a:focus { 
    text-decoration: underline; 
}

/* Images and figures */
img {
  margin: auto;
}
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  left: 0;
}

hr {
  margin: 1em auto 2em;
  width: 4em;
  border: 0;
  border-top: 2px solid #aaa;
}

main {   
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}

#currentThoughts, #stats > .row {
  display: flex;
  flex-flow: row wrap;
  padding-left: 2em;
  padding-right: 2em;
  justify-content: center;
}
#currentThoughts > div {
  width: 33.33333%;
}


.thoughtImg {
    opacity: 0.3;
    filter: drop-shadow(2em 1em 1em black) sepia(1);
    max-height: 250px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.thought { margin-bottom: 1rem; }
.thought:hover .thoughtImg, .thought:active .thoughtImg, .thought:focus .thoughtImg {
  opacity: 0.7;
  filter: drop-shadow(2em 1em 1em black) sepia(0);
}

.thought p, .thought ul, .thought hr {
  visibility: hidden;
}
.bgColor, .col-3 {
  padding: 0.5em 1em 1em;
  margin-top: 1em;
  border: 3px solid transparent;
}
.bgColor h3 {
  color: #fff;
}
.col-3, .thought:hover .bgColor, .thought:active .bgColor, .thought:focus .bgColor {
  background-color: rgb(2 14 5 / 75%);
  border-color: rgb(255 255 255 / 50%);
  box-shadow: 0px 10px 15px 5px rgb(2 14 5 / 50%);
}
.col-3 h3, .thought:hover h3, .thought:active h3, .thought:focus h3 {
  color: #666;
}
.thought:hover *, .thought:active *, .thought:focus * {
  visibility: visible;
}


/* stats */
#stats h2 {
    margin-top: 1rem;
}
.row > div {
  width: calc(33.33333% - 1em);
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#s_effects.row > div {
    width: calc(50% - 1em);
    text-align: left;
    display: flex;
    flex-flow: row nowrap;
}
#s_effects h3 {
    margin-bottom: 0.5rem;
}
#s_effects p {
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.row ul {
    list-style: outside disc;
    text-align: left;
    padding-inline-start: 20px;
}
.row li {
    margin-bottom: 0.5rem;
}
#stats h3 {
    color: #fff;
}
#stats h3 span {
    display: block;
    font-size: 1rem;
    color: #888;
}
.posEff { background-color: rgb(7 24 12 / 75%); }
.negEff { background-color: rgb(44 0 0 / 75%); }
.midEff { background-color: rgb(14 7 2 / 75%); }

#s_st {
    /* background-color: rgb(96 23 23 / 75%); */
    background-color: rgb(20 0 0 / 75%);
}
#s_se {
    /* background-color: rgb(0 16 53 / 75%); */
    background-color: rgb(0 5 20 / 75%);
}
#s_hr {
    /* background-color: rgb(102 82 0 / 75%); */
    background-color: rgb(20 16 0 / 75%);
}
.s_img {
    max-width: 100px;
    margin-top: 1em;
}
#stats .pos { color: green; }
#stats .neg { color: red; }
.statNum { margin-bottom: 0.5rem; }

#s_effects .s_img {
    height: 2.5rem;
    width: 2.5rem;
    max-width: none;
    margin: 0;
    margin-right: 1rem;
    margin-top: 0.8rem;
    border: 1px solid #fff;
}

/* stat bar */
.statBar {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}
.statBar_overlay {
    position: relative;
}
.sb_ov {
    position: relative;
    z-index: 2;
}
.statBar_fillCont {
    position: absolute;
    left: 5px;
    top: 5px;
    height: calc(100% - 10px);
    width: 87.5%;
}
.statBar_fill {
    background: url('../images/sb_fill.PNG') no-repeat scroll left center / cover;
    height: 100%;
}


/* utility */
.hidden { display: none; }
.visible-xs { display: none; }

#concerns {
    background-color: rgb(2 14 5 / 75%);
    display: inline-block;
    padding: 1em;
    border: 3px solid rgb(255 255 255 / 50%);
    box-shadow: 0px 10px 15px 5px rgb(2 14 5 / 50%);
    margin-left: 1rem;
    margin-right: 1rem;
}
#concerns span { font-weight: 400; color: green; }
#thoughtCount { font-weight: 400; }

/* moodlets */
#concerns span.bad {
    color: red;
}
#concerns span.mid {
    color: orange;
}
.moodlets {
    text-align: left;
    list-style: none;
}
.moodlets li { 
    padding-left: 1.5em; 
    position: relative;
}
.moodlets li + li {
    margin-top: 1em;
}
.moodlets .neg::before {
    content: '-';
    font-size: 2rem;
    color: red;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: -0.25rem;
}
.moodlets .pos::before {
    content: '+';
    font-size: 1.25rem;
    color: green;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0rem;
}

/* media queries */
@media (max-width: 767px) {
  #currentThoughts > div, .row > div, #s_effects.row > div {
    width: 100%;
  }
  .thought p, .thought ul, .thought hr {
      visibility: visible;
  }
  .col-3, .thought .bgColor, .thought .bgColor, .thought .bgColor {
    background-color: rgb(2 14 5 / 75%);
    border-color: rgb(255 255 255 / 50%);
    box-shadow: 0px 10px 15px 5px rgb(2 14 5 / 50%);
  }
}
@media (max-width: 539px) {
    #s_effects.row > div {
        display: block;
    }
    #s_effects .s_img {
        margin-right: auto;
        margin-left: auto;
    }
    #s_effects h3 {
        text-align: center;
    }
}