hr {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr:after {
    background: #fff;
	font-size:17pt;
    content: '\2729';
    padding: 0 4px;
    position: relative;
    top: -13pt;
}

@font-face {
font-family: "PopJoy";
src: url("PopJoy.otf");
}

@font-face {
font-family: "SeuratCapie";
src: url("FOT-SeuratCapiePro-B.otf");
}

.container {
position: relative;
}

.wspace {
left: 45pt; 
top: 6pt;
width:271px;
height:67px;
position: absolute;
align-content: center;
z-index: 3;
white-space: nowrap;
}

.wspaceseal {
left: 47pt; 
top: 67pt;
width:271px;
height:67px;
position: absolute;
align-content: center;
z-index: 3;
white-space: nowrap;
}

.wspacehelp {
left: 47pt; 
top: 111pt;
width:271px;
height:67px;
position: absolute;
z-index: 3;
white-space: nowrap;
}

.wspaceac {
left: 47pt; 
top: 163.5pt;
width:271px;
height:67px;
position: absolute;
z-index: 3;
white-space: nowrap;
}

.notice {
left: 0pt; 
top: 0pt;
background:black;
width:55px;
height:16px;
position: absolute;
text-align: center;
color: white;
z-index: 3;
white-space: nowrap;
}

.hidden {
display: none
}

.page-layout {
display: grid;
grid-template-columns: max-content max-content;
gap: 24px;
align-items: start;
}

.main-content {
min-width: 0;
}

.tools-column {
display: flex;
flex-direction: column;
gap: 18px;
}

.center {
text-align: center;
}

.bold {
transform: scale(2,1);
-webkit-text-stroke: 0.010em rgba(0,0,0,1)
}

.PMSSicon {
position: absolute;
transform : translateY(-4px)
}

.PMSSpause {
position: absolute;
color: red;
transform : translate(-2px, 10px)
}

.draggable {
width: fit-content;
outline-color: gray;
outline-width: 2px;
outline-offset: 3px;
outline-style: dashed	
}

@media (max-width: 720px) {
.page-layout {
grid-template-columns: 1fr;
}
}

.PaperMario2JP {
font-family: 'SeuratCapie';
font-weight:normal;
font-style:normal;
font-size: 15pt;
line-height: 24pt;
}

.transform1 {
transform: scale(1.0251,1);
}

.transform2 {
transform: scale(1.0211,1);
}

.transform34 {
transform: scale(1.007,0.987);
}

.transformSP {
transform: scale(1.011,1);
}

.PaperMarioSS {
font-family: 'PopJoy';
font-weight:normal;
font-style:normal;
font-size: 9.25pt;
line-height: 12.7pt;
transform-origin: 0;
-webkit-text-stroke: 0.010em rgba(228,210,153,0.5);
}

.PaperMarioWindow1 {
position: absolute;
top: 20px; 
left: 44pt; 
}

.PaperMarioWindow2 {
position: absolute;
top: 13px; 
left: 44pt; 
}

.PaperMarioWindow3 {
position: absolute;
top: 5px; 
left: 44pt; 
}

.PaperMarioWindow4 {
position: absolute;
top: -4px; 
left: 44pt; 
}


.PaperMario2Shake .char,
.PaperMario2Shake .char:before,
.PaperMario2Shake .char:after {
  animation-duration: 0.28s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
  animation-delay: calc(-0.2s * var(--char-index));
  animation-name: glitch-bounce;
}
.PaperMario2Shake .char:before,
.PaperMario2Shake .char:after {
  mix-blend-mode: overlay;
  animation-name: glitch-bounce;
  animation-play-state: paused;
}
.PaperMario2Shake .char:before {
  color: #F85959;
  animation-delay: calc(-0.02s * var(--char-index));
}

.PaperMario2Shake .char:after {
  color: #B7F5DE;
  animation-delay: calc(-0.5s * var(--char-index));
}

@keyframes glitch-bounce {
  20% {
    transform: translate(-1%, 0%);
  }
  40% {
    transform: translate(14%, -2%);
  }
  50% {
    transform: translate(-5%, 5%);
  }
  65% {
    transform: translate(1%, -2%);
  }
  80% {
    transform: translate(-3%, 2%);
  }
}

.PaperMario2Wave .char,
.PaperMario2Wave .char:before,
.PaperMario2Wave .char:after {
  animation-duration: 0.95s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(8);
  animation-delay: calc(0.06s * var(--char-index));
  animation-name: wave;
}
.PaperMario2Wave .char:before,
.PaperMario2Wave .char:after {
  mix-blend-mode: overlay;
  animation-name: wave;
}
.PaperMario2Wave .char:before {
  color: #F85959;
}

.PaperMario2Wave .char:after {
  color: #B7F5DE;
  animation-delay: calc(-0.06s * var(--char-index));
}

@keyframes wave {
  0% {
    transform: translate(-13%, 13%);
  }
  13% {
    transform: translatex(-18%);
  }
  26% {
    transform: translate(-13%, -13%);
  }
  39% {
    transform: translatey(-18%);
  }
  52% {
    transform: translate(13%, -13%);
  }  
  65% {
  transform: translatex(18%);
  }  
  78% {
    transform: translate(13%, 13%);
  }  
  91% {
  transform: translatey(18%);
  }  
  100% {
  transform: translate(-13%, 13%);
  }  
}

.PaperMario2Dyn .char,
.PaperMario2Dyn .char:before,
.PaperMario2Dyn .char:after {
  animation-duration: 0.70s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2);
  animation-delay: calc(0.06s * var(--char-index));
  animation-name: dyn;
}
.PaperMario2Dyn .char:before,
.PaperMario2Dyn .char:after {
  mix-blend-mode: overlay;
  animation-name: dyn;
}
.PaperMario2Dyn .char:before {
  color: #F85959;
}

.PaperMario2Dyn .char:after {
  color: #B7F5DE;
  animation-delay: calc(-0.06s * var(--char-index));
}

@keyframes dyn {
  100% {
  transform: translate(0%, -18%);
  transform: scale(1.5)
  }  
}