:root {
  --boxScrollLength: 3s;
  --bgScrollLength: 9s;
  
  --blue: #406BA1;
  --green: #ABFF00;
  --darkPurple: #5800B8;
  --pink: #f838b0;
  --yellow: #FFE67E;
}
::selection {
  color: white;
  background-color: var(--pink);
  text-shadow: none !important;
}
@font-face {
    font-family: "Pizza Tutorial"; 
    src: url("font/Pizza Tutorial.ttf") format("truetype"); /*https://drive.google.com/file/d/1MVQ8b1N8qh_UmNnUoJb6s_4N4e0uCMHR/view*/
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "Small Pizza Inline"; 
    src: url("font/Small Pizza Mixline.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "Small Pizza Outline"; 
    src: url("font/Small Pizza Outline.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "Big Pizza Inline"; 
    src: url("font/Big Pizza Mixline.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "Big Pizza Outline"; 
    src: url("font/Big Pizza Outline.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
html {
  background-color: #B07898;
  background-image: url("img/bg/bg_soundtest.png");
  animation: bg-scroll var(--bgScrollLength) linear infinite;
  
  z-index: -999;
  position: relative;
}
html, body {
  color: black;
  font-family: "Pizza Tutorial";
  font-size: 24px;
}
body {
  margin: 0 10%;
}
a {
  color: #ffaa83;
}
a:hover {
  color: #f8e080;
}
details>summary {
  padding: 0 1rem;
  margin-bottom: 0.4rem;
}
details>div {
  padding: 0.2rem 0;
  margin: 0 0.4rem;
  border-color: var(--green);
  border-top: 2px solid;
}
details ul {
  list-style: none;
  padding-left: 0;
}
details ul>li {
  height: 64px;
}
details ul>li>span {
  position: relative;
  left: 0.5rem;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0.25rem auto;
}
h1, h2, h3, h4, h5 {
  position: relative;
  
  color: white;
  font-family: "Small Pizza Inline";
  text-align: center;
  text-transform: uppercase;
  text-shadow: none !important;
}
h2 {
  position: relative;
  font-size: 2rem;
  font-family: "Big Pizza Inline";
}
h2:after, h3:after, h4:after, h5:after {
  display: block;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: black;
  content: inherit;
}
h2:after {
  font-family: "Big Pizza Outline";
}
h3:after, h4:after, h5:after {
  width: 100%;
  height: 100%;
  font-family: "Small Pizza Outline";
  text-transform: uppercase;
}
.info h3:before {
  display: inline-block;
  content: " ";
  position: absolute;
  width: 377px;
  height: 66px;
  
  background-image: url("img/spr_roomnamebg.png");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 377/66;
  
  left: 50%;
  top: 10%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}
h3 {
  position: relative;
  font-size: 0.8rem;
}
.info h3 {
  margin: 1.6rem auto 1rem;
}
header {
	gap: 0 0.8rem !important;
	padding-top: 0.4rem;
}
header img {
  height: 100%;
  width: 40%;
  max-height: 151px;
  max-width: 315px; 
}
@media only screen and (max-width: 500px) {
	header img {
		flex-basis: 200px;
	}
}
nav {
  margin: 0.5rem 0;
  top: 5px;
}
nav ul {
  margin: auto;
  width: fit-content;
  gap: 0 0.4rem !important;
  white-space: nowrap;
  font-size: 1.1rem;style="flex-basis:200px;"
  
  text-shadow: none !important;
}
nav>ul>li {
  height: 1.1rem;
}
nav>ul>li>a {
  display: inline-block;
  position: relative;
  color: white;
  content: inherit;
  font-family: "Small Pizza Inline";
  text-decoration: none;
}
nav>ul>hr {
  margin: 0;
  height: 1rem;
}
nav>ul>li>a:after {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  color: black;
  content: inherit;
  font-family: "Small Pizza Outline";
}
p {
  margin: 0.25rem auto;
}
ul {
  margin: 0.2rem 0;
}

.achievement {
  display: block;
  width: 64px;
  height: 64px;
  
  object-fit: none;
  object-position: 0 0;
  content: url("img/achievements.png");
}
details .achievement {
  display: inline-block;
  margin-bottom: -32px;
}
.achievementHolder {
  margin: 0.5rem 0.1rem 0.2rem;
  gap: 0;
}
.bossName {
  display: block;
  width: 300px;
  height: 149px;
  
  object-fit: cover;
  object-position: 0 0;
  content: url("img/bossTitles.png");
}
.bossName.vigi {
  object-position: calc(300px*-1) 0;
}
.bossName.noise {
  margin: -0.5rem 0;
  object-position: calc(300px*-2) 0;
}
.bossName.fake {
  margin: -0.1rem -2.2rem -0.4rem;
  object-position: calc(300px*-3) 0;
}
.bossName.pizza {
  margin: 0 -1.9rem;
  object-position: calc(300px*-4) 0;
}
.bossNameHolder {
  gap: 0 0.2rem;
  align-items: center;
}
.bossNameHolder>h4 {
  margin: 0;
}
#chara {
  flex-basis: 430px;
}
.charaHolder {
  gap: 0.2rem 0.4rem;
  align-items: center !important;
}
.charaHolder>h4 {
  margin: 0 0 0.3rem 0;
  font-size: 1.2rem;
  white-space: nowrap;
  flex-basis: 1.6rem;
}
.checkerBorder {
	border: 26px solid transparent;
	border-image: url("img/bg/wikiborder-26px.png") 26 / 26px round;
	background-clip: padding-box;
	background-color: #4A3E63;
	padding: 0.5em;
}

.frame {
  margin: 10px auto;
  
  border: 6px solid white;
  border-image: url("img/spr_computerbubble.png");
  border-image-slice: 40 40 40 40;
  border-image-width: 40px;
  
  background-attachment: fixed;
  background-clip: content-box;
  background-repeat: repeat;
  
  animation: box-scroll var(--boxScrollLength) linear infinite;
}
.frame h3:first-child, .noteFrame h3:first-child{
  margin-top: 0.7rem;
}
.frame p, .noteFrame p {
  padding: 0 20px;
  filter: none !important;
}
.frame>img, .noteFrame>img {
  float: left;
  padding: 10px;
}
.frame.computerBg {
  background-image: url("img/spr_computerbackground.png");
  color: var(--green);
  text-shadow: -0.1rem 0 var(--blue), 0 0.1rem var(--blue),
              0.1rem 0 var(--blue), 0 -0.1rem var(--blue) !important;
}
.frame.computerBg h3 {
  color: var(--green);
  font-family: "Pizza Tutorial";
  font-size: 1rem;
  text-shadow: -0.1rem 0 var(--blue), 0 0.1rem var(--blue),
              0.1rem 0 var(--blue), 0 -0.1rem var(--blue) !important;
}
.frame.tutorialBg {
  background-image: url("img/spr_pizzagrannytexture.png");
  color: black;
  text-shadow: -0.05rem 0 var(--yellow), 0 0.05rem var(--yellow),
              0.05rem 0 var(--yellow), 0 -0.05rem var(--yellow) !important;
}
.frame.tutorialBg a {
  color: var(--blue);
}
.frame.tutorialBg a:hover {
  color: var(--pink);
}
.flex>.frame {
  margin: 0;
}
#level {
  flex-basis: 434px;
}
.levelNameHolderInner>h4>img, .levelNameHolderInner>.levelIcon {
  filter: drop-shadow(2px 2px 0px black);
}
.levelNameHolderInner h4:before, #chara h4:before, #music h4:before {
  content: " "; /*otherwise, this won't show up*/
  width: 209px;
  height: 58px;
  
  /*filter: drop-shadow(2px 2px 0px black);*/
  
  background-image: url("img/spr_gatepizza.png");
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  
  z-index: -1;
  pointer-events: none;
}
#chara h4:before {
  top: 65%;
}
#music h4:before, .levelNameHolderInner>h4:before {
  top: 85%;
}
.levelNameHolderInner>h4:before {
  left: 25%;
}
.levelNameHolderInner.c>h4:before, h4.c:before {
  background-position: calc(209px*-1) 0;
}
.levelNameHolderInner.b>h4:before, h4.b:before {
  background-position: calc(209px*-2) 0;
}
.levelNameHolderInner.a>h4:before, h4.a:before {
  background-position: calc(209px*-3) 0;
}
.levelNameHolderInner.s>h4:before, h4.s:before {
  background-position: calc(209px*-4) 0;
}
.levelIcon, .rank, .rankSmall {
  display: inline-block;
  object-position: 0 0;
  object-fit: cover;
}
.levelIcon {
  object-fit: none;
  height: 63px;
  width: 74px;
  aspect-ratio: 74/63;
  
  content: url("img/level-icons.png");
}
.levelNameHolder, .levelNameHolderInner {
  align-items: center;
  gap: 0;
}
.levelNameHolderInner {
  width: 208px;
  flex-grow: 0 !important;
}
.levelNameHolder {
  gap: 0 1rem;
  margin-top: -0.5rem;
  margin-bottom: 0.6rem;
}
.levelNameHolderInner h4 {
  margin: 0;
}
.levelNameHolder .rank {
  margin-top: 0.8rem;
}
#music h5 {
  text-align: center;
}
#music h4+h5 {
  margin: 0.6rem auto 0.4rem;
}
.tutorialBorder, .noteFrame, .secretFrame>p, .bgFrame.sound>p, .frame>p {
	line-height: 1.2;
}
.noteFrame {
	border: 1px solid black;
	padding: 4px 16px 2px 6px;
	margin: 0.8rem auto;
	background-clip: content-box;
	position: relative;
	color: black !important;
	text-shadow: none !important;
	filter: none !important;
}
.noteFrame.rope::after {
	content: '';
	display: inline-block;
	background-image: url(img/bg/PTWiki-tutorialframe-rope.png);
	width: 18px;
	height: 61px;
	position: absolute;
	top: -61px;
	left: calc(50% - (18px/2));
	z-index: -2;
}
.noteFrame a {
	color: #786898;
}
.noteFrame a:hover {
	color: #B07898;
}
.noteFrame.salmon {
	border-image: url("img/bg/wikiborder-delete.png") 40 / 40px round;
	background-color: #ec8f8f;
}
.noteFrame.pink {
	border-image: url("img/bg/wikiborder-disambig.png") 40 / 40px round;
	background-color: #FDA3F1;
}
.noteFrame.lightpink {
	border-image: url("img/bg/wikiborder-gallerybox.png") 40 / 40px round;
	background-color: #FFC5FF;
}
.noteFrame.yellow {
	border-image: url("img/bg/wikiborder-fan.png") 40 / 40px round;
	background-color: #f8e080;
}
.noteFrame.lightyellow {
	border-image: url("img/bg/wikiborder-doc.png") 40 / 40px round;
	background-color: #fff5c4;
}
.noteFrame.blue {
	border-image: url("img/bg/wikiborder-wip.png") 40 / 40px round;
	background-color: #92CCEE;
}
.noteFrame.lightpurple {
	border-image: url("img/bg/wikiborder-collectiblebox.png") 40 / 40px round;
	background-color: #D8B8F8;
}
.bgFrame {
	padding: 8px;
	position: relative;
	z-index: 0;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.bgFrame.sound {
	border-image: url("img/bg/soundtest-tileset-26px.png") 26 / 26px round;
	background-color: #A82860;
	padding: 1.4rem 1.5rem 0.7rem;
	color: white;
}
.bgFrame.pink {
	border-image: url("img/bg/PTWiki-PinkFrame-Light.png") 9 / 9px round round;
	background-color: #F878B0;
	padding: 8px;
}
.rank {
  display: inline-block;
  height: 60px;
  width: 55px;
  aspect-ratio: 55/60;
  
  content: url("img/ranks.png");
}
.rank.p {
  object-position: calc(55px*-5) 0;
}
.rank.s {
  object-position: calc(55px*-4) 0;
}
.rank.a {
  object-position: calc(55px*-3) 0;
}
.rank.b {
  object-position: calc(55px*-2) 0;
}
.rank.c {
  object-position: calc(55px*-1) 0;
}
.rankSmall {
  margin-top: -27px;
  margin-bottom: calc(30px*-0.3);
  height: 27px;
  width: 30px;
  aspect-ratio: 10/9;
  
  content: url("img/ranks-small.png");
}
.rankSmall.p {
  object-position: calc(30px*-5) 0;
}
.rankSmall.s {
  object-position: calc(30px*-4) 0;
}
.rankSmall.a {
  object-position: calc(30px*-3) 0;
}
.rankSmall.b {
  object-position: calc(30px*-2) 0;
}
.rankSmall.c {
  object-position: calc(30px*-1) 0;
}
.secretFrame {
  position: relative;
  z-index: 0;
  
  border: 6px solid white;
  
  border-radius: 10px;
  background-position: -6px -6px;
}
.secretFrame hr {
  border: 0.07rem solid;
}
.secretFrame>p, .bgFrame.sound>p {
	filter: drop-shadow(1px 1px 0px black);
	color: white;
	text-shadow: -1px 0 black, 0 1px black,
				  1px 0 black, 0 -1px black;
}
.secretFrame.pink {
  padding: 1.3rem;
  
  border-image: url("img/bg/secretTile-edited-1.png") 32 / 32px round;
  border-color: var(--pink);
  /*background-image: url("img/bg/secretTile_1-inside.png");
  background-repeat: round;*/
  background-color: #a82860;
}
.secretFrame.pink hr {
  border-color: var(--pink);
}
.secretFrame.purple {
  padding: 1.3rem 1.4rem;
  
  border-image: url("img/bg/secretTile_2.png") 32 / 32px round;
  border-color: #D496D4;
  background-color: #8D63C6;
}
.secretFrame.purple hr {
  border-color: #D496D4
}
.soundtrackPreview {
  display: block;
  margin: auto;
  border: 1px solid black;
  width: 100%;
  height: 42px;
}
.tutorialBorder {
	border: 16px solid #e08858;
	border-image: url("img/bg/PTwikiborder-tutorial-26px.png") 26 / 26px round;
	padding: 0.6em 0.8em;
	
	background-color: #f8e080;
	background-clip: padding-box;
}
.tvHolder {
  position: relative;
  overflow: hidden;
  
  margin-top: -1rem;
  
  height: 92px;
  width: 83px;
  
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}
.tvHolder .tv {
  content: url("img/menutv2.png");
  height: inherit;
  width: inherit;
}
.tvHolder .chara {
  position: absolute;
  width: 63px;
  height: 54px;
  left: 7px;
  bottom: 7px;
  object-fit: none;
  z-index: -1;
}
.tvBg {
  position: absolute;
  top: 32px;
  left: 7px;
  z-index: -2;
  
  height: 54px;
  width: 63px;
  background-color: var(--darkPurple);
}

@media (max-width: 640px) {
  nav>ul {
    font-size: 0.9rem;
    gap: 0 0.2rem !important;
  }
  nav>ul>li {
    height: 0.9rem;
  }
  ul.secretFrame.purple {
    padding: 0.9rem 0.7rem;
    border-image: url("img/bg/secretTile_2.png") 32 / 24px round;
  }
}

@media (max-width: 1280px) {
  body {
    margin: 0 5%;
  }
}
@media (max-width: 960px) {
  body {
    margin: 0 2%;
  }
}
@media (max-width: 500px) {
	.checkerBorder {
		border: 20px solid transparent;
		border-image: url("img/bg/wikiborder-26px.png") 26 / 20px round;
	}
	.secretFrame {
		padding: 0.8rem !important;
	}
	.secretFrame.pink {
		border-image: url("img/bg/secretTile-edited-1.png") 32 / 20px round;
	}
	.secretFrame.purple {
		border-image: url("img/bg/secretTile-edited-2.png") 32 / 20px round;
	}
}

@keyframes bg-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -960px -1080px;
  }
}
@keyframes box-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -137px -139px;
  }
}