@import "https://www.paydaymaps.net/utils.css";
@font-face { font-family: DIN; src: url('fonts/DINEngschrift-Regular.ttf'); }
@font-face { font-family: Padaloma; src: url('fonts/Padaloma.ttf'); }
@font-face { font-family: Bahn; src: url('fonts/bahnschrift.ttf'); }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbarSize) + 1rem);
}
*{
  scrollbar-color: var(--black-25) transparent;
}
*::-webkit-scrollbar{
  background-color: transparent;
}
*::-webkit-scrollbar-thumb{
  background-color: var(--black-25);
}
body{
  --colBG: #191919;
  --colText: hsl(0, 0%, 90%);
  --fontSize: 1rem;
  margin: 0;
	background-color: var(--colBG);
	color: var(--colText);
	font-size: var(--fontSize);
  font-family: Arial;
  border-color: var(--white-50);
  padding-top: calc(var(--navbarSize) + 1rem);
}
#background{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(170deg, var(--colBG) 60%, transparent), url('https://www.paydaymaps.net/-assets/backgrounds/grid.svg');
  background-size: 100%, 5rem;
  background-repeat: no-repeat, repeat;
}

#outline{
  position: fixed;
  top: var(--navbarSize);
  bottom: 0;
  background-color: var(--black-50);
  width: 15em;
  z-index: 9;
  transition: translate .2s;
  display: grid;
  grid-template-rows: auto 1fr;
}
#outline > div{
  overflow-y: auto;
  scrollbar-color: var(--white-25) transparent;
  scrollbar-width: thin;
}
#outlineBTN{
  display: block;
  position: absolute;
  top: 2rem;
  left: 100%;
  width: 40px;
  aspect-ratio: 1;
  border: none;
  background-color: var(--black-50);
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_arrow.svg');
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  transition: rotate .2s;
}
#outlineBTN.slideoutLeft{
  translate: 0 0;
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_sheet.svg');
}
#outlinebg{
  z-index: 8;
  position: fixed;
  inset: 0;
  backdrop-filter: blur(10px);
}
#outlinelist{
  list-style: none;
  padding-left: 1rem;
}
#outlinelist > li{
  margin-bottom: 0rem;
  padding-left: .2rem;
  padding-block: .2rem;
}
#outlinelist a{
  color: white;
  transition: box-shadow 2s;
}
#outlinelist > li.subOut{
  margin-left: 1rem;
  border-left: dotted;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
  padding-left: .5rem;
  opacity: .7;
}
/* #outlinelist a.req{
  border-bottom: solid;
  border-width: 1px;
  border-color: hsl(40, 100%, 50%);
} */
#outlinelist a.req::before{
  content: "* ";
  color: hsl(40, 100%, 50%);
}
.outlineactive{
  box-shadow: -3px 0 0 0 var(--pd2m);
}
#backlink{
  display: inline-block;
  margin-block: 1rem;
  margin-left: 1rem;
  color: white;
}
#backlink::before{
  content: url('https://www.paydaymaps.net/-assets/icons/icon_arrow.svg');
  display: inline-block;
  scale: .36;
  transform-origin: bottom;
  margin-inline: -.8rem;
}

main{
  --pad: 5%;
  margin-inline: var(--pad);
  margin-left: calc(var(--pad) * 2);
  border-color: inherit;
}
#pagedesc{
  border-left: solid;
  padding-left: 1rem;
  padding-block: 1rem;
  margin-block: 2rem;
}
hr{
  margin-block: 2rem;
}
h1[category]::before{
  content: attr(category) ' / ';
  font-size: 1.1rem;
  color: grey;
  text-transform: capitalize;
  display: block;
}

#shortcuts{
  background: var(--cornerBG);
  background-size: var(--corner-size) var(--corner-size);
  background-repeat: no-repeat;
  background-color: var(--black-10);
  margin-block: 1rem;
  padding: var(--corner-size);
}
#shortcuts > p{
  margin: .2rem;
}
#shortcuts > li{
  list-style: none;
  margin-left: 1rem;
}
a{
  color: var(--pd2m);
  text-decoration: none;
  transition: opacity .1s;
}
a[offsite]::after{
  content: '(' attr(offsite) ')';
  display: inline-block;
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_open.svg');
  background-repeat: no-repeat;
  background-size: var(--fontSize);
  background-position: left;
  margin-left: .1rem;
  padding-left: 1.3rem;
  color: white;
  opacity: .5;
  font-size: calc(var(--fontSize) / 1.3);
  translate: 0 -.1rem;
}
a:hover{
  opacity: .8;
}

#tables{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
	grid-gap: 2rem;
  margin-bottom: 2rem;
}
#tables > div{
  background-color: var(--black-10);
  padding-inline: 1rem;
  padding-top: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 2px var(--black-50);
  backdrop-filter: blur(10px);
}
#tables > div:hover{
  box-shadow: 0 0 1px var(--white-10);
}
#tables div > img{
  position: absolute;
  isolation: isolate;
  width: 256px;
  aspect-ratio: 1;
  right: 0rem;
  top: -1rem;
  opacity: .02;
  transition: scale .5s;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1) brightness(2);
}
#tables div:hover > img{
  scale: 1.2;
}
#tables h2 > img{
  height: 1.5rem;
}
.guideslist{
  margin-top: .5rem;
  margin-left: 1rem;
  list-style-type: square;
  text-transform: capitalize;
}
.guideslist > li {
  margin-block: .1rem;
}
.guideslist:last-child{
  margin-bottom: 1rem;
}
#guidepath{
  display: flex;
  gap: .5rem;
  place-items: center;
  opacity: .3;
}
#guidepath > img{
  height: 24px;
  padding: .2rem;
}

a#topbtn{
  display: grid;
  position: fixed;
  width: 40px;
  aspect-ratio: 1;
  background-color: var(--black-25);
  bottom: 2rem;
  right: 1rem;
  place-items: center;
}
a#topbtn > img{
  width: 90%;
  rotate: 90deg;
  transition: width .2s;
  aspect-ratio: 1;
}
a#topbtn:hover > img{
  width: 100%;
}

main > section{
  background-color: var(--black-10);
  padding: 1rem;
  margin-bottom: 4rem;
  overflow: hidden;
  position: relative;
}
h2{
  display: inline-block;
  margin-top: 0;
  position: relative;
  margin-bottom: 1rem;
}
main > section[req="true"] > h2::after{
  content: ' (Required)';
  display: block;
  color: hsl(40, 100%, 50%);
  font-size: .8rem;
}
main > section[type] > h2::after{
  content: "attr(type)";
  display: block;
  color: white;
}
.paramtype{
  display: block;
  color: grey;
  margin-bottom: 1rem;
}
p.text{
  margin-left: 1rem;
  margin-top: .5rem;
  margin-bottom: 1rem;
  line-height: 1.4rem;
  /* max-width: 800px; */
}

.xmpdiv{
  overflow-x: auto;
  background-color: var(--pd2mBG);
  background-image: url('https://www.paydaymaps.net/-assets/backgrounds/grid.svg');
  background-size: 40px;
  padding-inline: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 0 20px var(--pd2mBG) inset;
  scrollbar-color: var(--black-25) transparent;
  scrollbar-gutter: stable;
  margin-left: 1rem;
  position: relative;
}
xmp{
  margin: 0;
  user-select: all;
}
.xmplang{
  display: block;
  text-align: right;
  opacity: .25;
  user-select: none;
  position: absolute;
  right: 1.5rem;
  margin-top: .1rem;

}
.showcase{
  max-width: calc(100% - 1rem);
  display: block;
  margin-left: 1rem;
}
.imgsub{
  margin-left: 1rem;
  color: grey;
  font-size: .8rem;
  font-style: italic;
}
.spoiler-container{
  --time: .5s;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  margin-left: 1rem;
}
.tablediv{
  overflow-x: auto;
  margin-bottom: 1rem;
  scrollbar-gutter: stable;
  margin-left: 1rem;
}
table{
	background-color: var(--black-20);
	outline: thin solid;
	outline-color: var(--black-25);
	padding: 0;
	margin-bottom: 25px;
	border-collapse: collapse;
	/* overflow-x: auto; */
  position: relative;
}
th, td{
	padding: 10px;
	padding-right: 10px;
	vertical-align: top;
}
td:first-of-type{
  border: none;
}
th{
	background-color: var(--pd2m);
	text-align: center;
	color: white;
  border: none;
}
tr:nth-child(even){
	background-color: var(--white-10);
}
.codesnip,
span.code{
  background-color: hsl(0, 0%, 20%);
  padding: .1rem;
  padding-inline: .2rem;
  display: inline-block;
  border-radius: 5px;
}
.list{
  margin-left: 1rem;
}
.list > li{
  display: inline-block;
  margin-bottom: .3rem;
  margin-left: 1rem;
}
section > ol{
  margin-left: 1rem;
  margin-bottom: 1rem;
}
section > ol > li{
  margin-bottom: .3rem;
  margin-left: 1rem;
}
section > h3{
  margin-left: 1rem;
}
section > h3 + .text{
  margin-left: 2rem;
  box-shadow: -2px 0px 0 hsla(0, 0%, 100%, 0.1);
  padding-left: .5rem;
}
section > h4{
  margin-left: 2rem;
  font-size: 1.17rem;
}
section > h4 + .text{
  margin-left: 3rem;
  box-shadow: -2px 0px hsla(0, 0%, 100%, 0.1);
  padding-left: .5rem;
}
section > h5{
  margin-left: 3rem;
  font-size: 1.17rem;
}
section > h5 + .text{
  margin-left: 4rem;
  box-shadow: -2px 0px hsla(0, 0%, 100%, 0.1);
  padding-left: .5rem;
}
section > h6{
  margin-left: 4rem;
  font-size: 1.17rem;
}
section > h6 + .text{
  margin-left: 5rem;
  box-shadow: -2px 0px hsla(0, 0%, 100%, 0.1);
  padding-left: .5rem;
}
li > ul{
  margin-left: 1rem;
}
li > ul:last-child{
  margin-bottom: .5rem;
}
section > textarea{
  resize: vertical;
  width: 90%;
  min-height: 2rem;
  font-size: 1.6rem;
  background-color: var(--black-25);
  border: none;
  color: white;
  border-left: solid;
  border-width: 1px;
	padding-left: 1rem;
  padding-block: 1rem;
	margin-left: 1rem;
  box-shadow: 0 0 5px black inset;
  transition: all .2s, height 0s;
}
section > textarea:focus{
  outline: none;
  border-color: var(--pd2m);
}
a.dlBtn{
  display: inline-block;
  margin-left: 1rem;
  margin-top: 1rem;
  background-color: var(--black-25);
  /* background-color: black; */
  padding-inline: .5rem;
  text-align: center;
  line-height: 2rem;
  outline: solid;
  outline-width: 1px;
  outline-color: transparent;
  transition: outline-color .2s;
}
a.dlBtn:hover{
  background-color: var(--black-20);
  outline-color: var(--white-25);
  opacity: 1;
}
a.dlBtn::after{
  content: '';
  display: inline-block;
  height: calc(var(--fontSize) * 1.3);
  aspect-ratio: 1;
  /* background-color: red; */
  margin-left: .5rem;
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_download.svg');
  background-size: contain;
  opacity: .8;
  translate: 0 .2rem;
}
a.dlBtn[highlight]{
  /* box-shadow: 0 0 10px var(--pd2mBG); */
  /* filter: drop-shadow(0 0 10px var(--pd2mBG)); */
  background-color: var(--pd2mBG);
}
a.loadBtn::after{
  display: none;
}
a.loadBtn:hover{
  cursor: pointer;
}
.textControls{
  margin-left: 1rem;
  padding-left: 1px;
}
.textControls > button{
  /* padding: .5rem; */
  font-size: 1rem;
  width: 1.5rem;
  aspect-ratio: 1;
  border: none;
  background-color: var(--black-25);
  color: white;
  outline: solid;
  outline-width: 1px;
  outline-color: var(--white-10);
}
.textControls > button:hover{
  cursor: pointer;
}
.textControls > button.act{
  outline-color: var(--pd2m);
}
.textControls > button:nth-child(1){
  font-style: italic;
}
.textControls > button:nth-child(2){
  font-weight: bold;
}
.imglink{
  width: 100%;
}
.vid{
  margin-left: 1rem;
}
.vid > video{
  max-width: 720px;
  width: 100%;
}

.searchContainer{
  --sbHeight: 2rem;
  background-color: var(--black-10);
  margin-block: 1rem;
  padding: 1rem;
  position: sticky;
  top: calc(var(--navbarSize) + 1rem);
  display: grid;
  /* grid-auto-flow: column; */
  grid-template-columns: 1fr auto;
  z-index: 2;
  /* top: -1px; */
  backdrop-filter: blur(10px);
}
/* .searchContainer.is-pinned{
  background-color: red;
} */
input[type="search"]{
  margin: 0;
  border: none;
  color: var(--colText);
  background-color: black;
  height: var(--sbHeight);
  padding-left: 1rem;
  line-height: 2rem;
  font-size: 1rem;
}
input[type="search"]:focus,
input[type="search"]:active{
  border: none;
  outline: none;
  box-shadow: -2px 0 0 var(--pd2m);
  /* width: 100%; */
}
#searchReset{
  display: inline-block;
  height: var(--sbHeight);
  aspect-ratio: 1;
  background-color: black;
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_search.svg');
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(.25);
  cursor: pointer;
}
#searchReset[reset]{
  background-image: url('https://www.paydaymaps.net/-assets/icons/icon_close.svg');
}
#searchReset[reset]:hover{
  background-color: grey;
}
#searchReset::after{
  content: 
    url('https://www.paydaymaps.net/-assets/icons/icon_close.svg')
    url('https://www.paydaymaps.net/-assets/icons/icon_search.svg');
  display: none;
}
#soundIDs > tr{
  background: none;
  user-select: all;
  border-bottom: solid;
  border-color: var(--black-20);
}
#soundCount{
  margin-top: .5rem;
  opacity: .4;
  user-select: none;
}

main section > *:last-child{
  margin-bottom: 0rem;
}

.slideoutLeft{
  translate: -100% 0;
}

@media (min-width: 740px) {
  main{
    margin-inline: 10%;
  }
  #tables{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1500px) {
  main{
    margin-inline: 16rem 15%;
  }
  #tables{
    grid-template-columns: repeat(4, 1fr);
	}
  .slideoutLeft{
    translate: 0 0;
  }
  #outlinebg,
  #outlineBTN{
    display: none;
  }
  h1[category]::before{
    display: inline;
  }
  #outline{
    background-color: var(--black-20);
  }

}
@media (prefers-reduced-motion) {

}

.show-spoiler{
  height: auto;
  visibility: visible;
}
.pointer{
  cursor: pointer;
}
.italic{
  font-style: italic;
}
.bold{
  font-weight: bolder
}
.hide{
  display: none;
}
/*

TODO: 
- add lightmode?
- put stuff for reduced motion
  - category background scale on hover

- add span with guide path
  ( [home icon] > category > guidepage )

*/