html {	scroll-behavior: smooth;}
 * { box-sizing: border-box; margin:0; padding:0; }

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');

@keyframes footnote-open { from {transform: translateY(100%);} }
@keyframes footnote-close { from {transform: translateY(0);} }


body {
	margin:0;
	padding:0;
	font-family: outfit, sans-serif;
	transition-duration:300ms;
	font-weight:250;
}

body p {
	margin:5px;
}

body h4 {
	margin-top: 10px;
}


.sky-callout {
  background-image: url("https://korattata.neocities.org/imgs/shaymin-cry.png");
  background-size:contain;
  background-position:center;
  padding:30px 20px 5px ;
  color:black;
}


.sky-callout h1 {
font-size:3em;
text-shadow: 1px 1px 2px white;
  filter: drop-shadow(-1px -1px 1px white) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white);
  text-align: center;
}
.sky-callout h2 {
  padding-top:140px;
text-shadow: 1px 1px 2px white;
  filter: drop-shadow(-1px -1px 1px white) drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white);
  text-align: center;
}



h1, h2, h3, h4, h5, h6 {
	font-family:montserrat, sans-serif;
}


ul, ol {
	list-style-position: inside;
    margin: 0;
    padding: 0;
}

.content ul, .content ol {
	padding: 0 0 0 30px;
	list-style-position:initial;
}


#day-night-toggle {
	height: 60px;
	width: 130px;
	background-color: #735a97;
	margin: 10px auto;
	border-radius: 50px;
	background-image: linear-gradient(90deg, transparent 50% ,#000a 50%), url(https://korattata.neocities.org/imgs/lunala-gen8-party-sprite.png), url(https://korattata.neocities.org/imgs/solgaleo-gen8-party-sprite.png);
	image-rendering: pixelated;
	background-position: center, left, right;
	background-repeat: no-repeat;
	background-blend-mode: normal, normal, normal;  
}
.daytime #day-night-toggle {
filter: invert(1);
  background-image: linear-gradient(90deg, #000a 50% , transparent 50%), url(https://korattata.neocities.org/imgs/lunala-gen8-party-sprite.png), url(https://korattata.neocities.org/imgs/solgaleo-gen8-party-sprite.png);
  background-color: #f0bc1e;
}

body.daytime {	background-color: #d1e6b3; }
body.daytime .content, body.daytime #footnote-popup, body.daytime .header, body.daytime .sidebar , body.daytime img, .daytime .reverse-invert{filter: invert(1);}

.hide, #x-button {display:none;}

a { color:#9fc9ff; }
	
.fullpage {
  display: grid;
  grid-template-columns: min-content 1fr;
  background-color:#2e194c;
  color:white;
}

.header, .footer {
  grid-column: 1 / -1;
    background: #cfc7e155;
  text-align: center;
}

.sidebar {
	padding:10px;
}

.menu {
	font-family: "montserrat alternates";
	list-style:none;
	font-weight: 500;
	text-decoration:none;
}


.menu a {
color:#c8e5ff;
padding:5px 0;
	text-decoration:none;
	display: block;
}


.header p {
  background: #cfc7e1;
  text-align: center; 
}

.content {
	  margin: 10px 10px 10px 0;
}



h1 {
	font-family: "Montserrat", sans-serif;
	margin: 10px auto;
}

#footnotes {
	margin-top:100px;
	border-top: 1px solid white;
}



.section {
	margin-top: 30px;
	padding: 20px 0px;
	border-top: 1px solid #5e5395;
}

.steps h3 {
	margin-top:15px;
}




#footnote-popup {
position: fixed;
  bottom: 0;
  animation-name: footnote-open;
  animation-duration: 300ms;
  background: #412e5a;
  transform: translateY(0);
  padding: 10px 20px;
  margin: 10px;
  border-radius: 20px;
  border: solid 5px #1f0634;
}

#footnote-popup.close {
	position:fixed;
	bottom:0;
	transform: translateY(100%);
	animation-name: footnote-close;
	animation-duration: 300ms;
}

#footnote-popup .footnote-x {
  display: block;
  position: absolute;
  top: -20px;
  right: -10px;
  padding: 10px;
  background: #1f0634;
  border-radius: 50px;
  width: 2rem;
  height: 2rem;
  line-height: 10px;
  font-weight: 550;
  text-align: center;
}


.footnote-box-title {
  font-weight: 700;
  font-size: 1.25rem;
}



.pf-section {
	margin-top: 50px;
}


.pf-info-list ol {
	list-style-type: revert;
}


.pf-table {
	counter-reset: pf-table-numbers;
	width:1000px;
	height:475px;
	background-size:contain;
	background-position: top left;
	background-repeat:no-repeat;
	display: grid;
	grid-auto-flow: row;
}
#pf-gen-table {
	background-image: url(https://korattata.neocities.org/imgs/rng-manip/pokefinder-generator-crop-edit.png);
    grid-template-rows: 140px auto;
}

#pf-search-table {
	background-image: url(https://korattata.neocities.org/imgs/rng-manip/pokefinder-searcher-crop-edit.png);
    grid-template-rows: 140px auto;
}

.pf-table > div { display: grid; }

.pf-table .pf-header { 	height:140px; }

.pf-table ol, .pf-table ul {
	padding-left:0;
}

.pf-table ol { 	display: grid;     grid-auto-flow: row; }

.pf-table  li {
	counter-increment: pf-table-numbers;
	position: relative;
	height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #ff7aff8a;
}

.pf-table li span { display:none;}
.pf-table li.show-popup span {
	display: block;
    position: absolute;
    max-width: 500px;
	left: 2.5rem;
    width: max-content;
    padding: 10px 15px;
    background: #2b1b49;
    border-radius: 20px;
	z-index: 9;
	filter: drop-shadow(2px 2px 3px #0b0019c9);
	background-image: linear-gradient(0deg, #2e194c, #442375);
}
.daytime .pf-table li.show-popup span {
	background-image: linear-gradient(0deg, #cce5a8, #e8f2c5);
	color: black;
}

.pf-table ol li::before {
    content: counter(pf-table-numbers) " ";
    color: white;
    background-color: #4e3ba2;
    border-radius: 100%;
    font-weight: bold;
    border: 2px solid #b2a1ff;
    width: 1.6rem;
    height: 1.6rem;
    text-align: center;
    font-size: 1.2rem;
    display: inline-block;
    line-height: 1.6rem;
	position:relative;
	left: -4px;
}
.pf-table ul li::before {
	content: "NOTE ▸ ";
	color: #fff;
	background-color: #4e3ba2;
	border-radius: 10px;
	font-weight: bold;
	border: 2px solid #b2a1ff;
	width: auto;
	height: 1.6rem;
	text-align: center;
	font-size: 1rem;
	display: inline-block;
	line-height: 1.6rem;
	padding: 0 5px;
}

.pf-table .pf-profile {
    top: 66px;
    position: relative;
    left: 70px;
    max-width: 270px;
	max-height: 33px;
}

/* START OF SEARCHER TABLE */
#pf-search-table.pf-table .pf-config {
    grid-template-columns: 312px 310px 140px auto;
    column-gap: 5px;
}

#pf-search-table .pf-config-rnginfo ol {
    grid-template-rows: repeat(3, 59px);
    padding-top: 77px;
}

#pf-search-table .pf-config-rnginfo ul {
	 height:59px;
}

#pf-search-table .pf-config-settings ol {
    grid-template-rows: repeat(4, 42px) 80px;
    padding-top: 74px;
}
#pf-search-table .pf-config-settings ol li::before {
	left:4px;
}

#pf-search-table .pf-config-ivs ol {
    grid-template-rows: 188px repeat(2, 28px);
    padding-top: 74px;
}
#pf-search-table .pf-config-ivs ol li:first-of-type::before {
    align-self: flex-start;
    top: -13px;
}
#pf-search-table.pf-table .pf-config-ivs li.show-popup span, #pf-search-table.pf-table .pf-config-filters li.show-popup span {
	right: calc(100% + 6px);
    left: unset;
}

#pf-search-table .pf-config-filters ol {
	grid-template-rows: repeat(6, 39px);
	padding-top: 80px;
}

/* START OF GENERATOR TABLE  - MOVE TO ABOVE SEARCHER LATER*/

#pf-gen-table.pf-table .pf-config {
    grid-template-columns: 242px 320px 200px auto;
    column-gap: 5px;
}

/* rnginfo */
#pf-gen-table .pf-config-rnginfo ol {
	grid-template-rows: repeat(2, 40px) 84px 41px;
	padding-top: 72px;
}

/* settings */
#pf-gen-table .pf-config-settings ol {
    grid-template-rows: repeat(4, 42px) 80px;
    padding-top: 74px;
}
#pf-gen-table .pf-config-settings ol li::before {
	left:4px;
}

/* ivs */
#pf-gen-table .pf-config-ivs ol {
    grid-template-rows: 188px repeat(2, 28px);
    padding-top: 74px;
}
#pf-gen-table .pf-config-ivs ol li:first-of-type::before {
    align-self: flex-start;
    top: -13px;
}
#pf-gen-table.pf-table .pf-config-ivs li.show-popup span, #pf-gen-table.pf-table .pf-config-filters li.show-popup span {
	right: calc(100% + 6px);
    left: unset;
}

/* filters */
#pf-gen-table .pf-config-filters ol {
	grid-template-rows: repeat(6, 34px);
	padding-top: 78px;
}