/* :> :> :> */


/*{border: red solid 1px;}*/

body {
  background-image: none;
  background-color: #252525;
  
  font-size: 1.2em;
  font-family: Verdana;
  color: #d9d9d9;
}

section {
  border: 40px #252525 solid;
  border-radius: 8px;

  border-image-source: url("./shrines/tiles.png");
  border-image-slice: 40 fill;
  border-image-repeat: repeat;
}

p {
  text-align: center;
  text-wrap: pretty;
}

#back-hover{background-image: url("i/back-shrine.png");}


/* journal section...*/
/* if applied to journal pages, this will make the page light rather than dark.*/
.index a {
  color: #252525;
  background-image: url("i/the ball-shrine.png");
}

/* shrines section...*/
/* headers that expand and collapse sections. */
details {margin-bottom: 60px;}
summary {
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  
  justify-content: center;
  align-items: center;

  gap: 6px;
}
summary span {
  display: inline-block;

  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
}

/* style for collapsed details headers. */
details summary .state-toggle {content: url("shrines/toggle-collapsed.png");} /* little icon with nazca */
details summary span {content: url("shrines/guess\ not!!.png");}
details summary p {color: #d9d9d9;}  

/* style for expanded details headers. (default) */
details[open] summary .state-toggle {content: url("shrines/toggle-expanded.png");}
details[open] summary span {content: "I'm gonna start casually ranting about him now, thanks.";}  /* ...i don't think the text *needs* to be there?? just filling in the 'content' attr. makes it work. */
details[open] summary p {color: white;}

/* sets a max size with a 3:2 aspect ratio for images. */
.shrinker { 
  max-width: 264px; 
  min-width: 196px; 
  height: auto;

  margin: 28px 18px;
}

/* content warnig hell yeah!!! 
   ...this implementation was rather cumbersome and convoluted, so disregard it.*/

.con-warn, .con-warn img {
  position: relative;
  box-sizing: border-box;
}

.con-warn{
  border: none;
  background-color:#252525;
  padding: 0px;
}
.con-warn:hover{background-color:#252525;}


.con-warn #last {z-index: 100; opacity: 0;}
.con-warn #first {
  position: absolute;
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  z-index: 101;
  opacity: 1;
}

.con-warn:active #first {opacity: 0;}
.con-warn:active #last  {opacity: 1;}