/***********************************************************************************************/
:root {

  --sans-serif-font:"NationalPark-Variable","Inter",Arial,sans-serif;
  --monospace-font:"Roboto Mono",monospace;
--code-font:"Fira Code",monospace}

html {
  --page-reference-width:var(--max-content-width-unitless);
  --page-reference-width-px:var(--max-content-width-px);
  --canvas-width:var(--override-canvas-width,100vw);
  --body-canvas-width:calc(var(--canvas-width) - var(--left-fixture-width-px, 0px) - var(--right-fixture-width-px, 0px)); 
  font-size:min(calc(var(--body-canvas-width) / var(--page-reference-width)),1px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:var(--sans-serif-font);
  height:100%;
  overflow-y:overlay;
  
-ms-overflow-style:none}

/* placement of stuff */













.block[data-type=shape] svg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
left:0}

/* square */








.page-view.autoresponsive {
--rpx:1rem}

.page-view:not(.autoresponsive) {
--rpx:1px}
/* i think how objects */







@media(prefers-reduced-motion:no-preference) {
  .block-content.with-animation.spin,.mw_preview-box.with-animation.spin {
  animation:spin 15s linear infinite}

  .block-content.with-animation.medallion,.mw_preview-box.with-animation.medallion {
  animation:medallion 10s linear infinite}

  .block-content.with-animation.tada,.mw_preview-box.with-animation.tada {
  animation:tada 2.5s linear infinite}

  .block-content.with-animation.wobble-alt,.mw_preview-box.with-animation.wobble-alt {
    animation:wobble-alt 2s linear infinite;
  --wobble-alt-dampening:0.3}

  .block-content.with-animation.bounce,.mw_preview-box.with-animation.bounce {
  animation:bounce 2s linear infinite}

  .block-content.with-animation.flash,.mw_preview-box.with-animation.flash {
  animation:flash 2s linear infinite}

  .block-content.with-animation.pulse,.mw_preview-box.with-animation.pulse {
  animation:pulse 2s linear infinite}

  .block-content.with-animation.shake,.mw_preview-box.with-animation.shake {
  animation:shake 2s linear infinite}

  .block-content.with-animation.bungee,.mw_preview-box.with-animation.bungee {
    animation:bungee 2s linear infinite;
  --bungee-dampening:1}

}
/* rotation */
@keyframes medallion {
  0% {
  transform:rotateY(0deg) rotate(0deg)}

  50% {
  transform:rotateY(180deg) rotate(5deg)}

  to {
  transform:rotateY(1turn) rotate(0deg)}

}

@keyframes tada {
  0% {
  transform:scaleX(1)}

  10%,5% {
  transform:scale3d(.9,.9,.9) rotate(-3deg)}

  15%,25%,35%,45% {
  transform:scale3d(1.1,1.1,1.1) rotate(3deg)}

  20%,30%,40% {
  transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}

  50%,to {
  transform:scaleX(1)}

}

@keyframes wobble-alt {
  0% {
  transform:none}

  7.5% {
  transform:translate3d(calc(-25% * var(--wobble-alt-dampening)),0,0) rotate(-5deg)}

  15% {
  transform:translate3d(calc(20% * var(--wobble-alt-dampening)),0,0) rotate(3deg)}

  22.5% {
  transform:translate3d(calc(-15% * var(--wobble-alt-dampening)),0,0) rotate(-3deg)}

  30% {
  transform:translate3d(calc(10% * var(--wobble-alt-dampening)),0,0) rotate(2deg)}

  37.5% {
  transform:translate3d(calc(-5% * var(--wobble-alt-dampening)),0,0) rotate(-1deg)}

  50%,to {
  transform:none}

}

@keyframes bounce {
  0%,10%,26.5%,40%,to {
    transition-timing-function:cubic-bezier(.215,.61,.355,1);
  transform:translateZ(0)}

  20%,21.5% {
    transition-timing-function:cubic-bezier(.755,.05,.855,.06);
  transform:translate3d(0,-20%,0)}

  35% {
    transition-timing-function:cubic-bezier(.755,.05,.855,.06);
  transform:translate3d(0,-10%,0)}

  45% {
  transform:translate3d(0,-2.6%,0)}

  50%,to {
  transform:translateZ(0)}

}

@keyframes flash {
  0%,50%,to {
  opacity:1}

  25%,75% {
  opacity:0}

}

@keyframes pulse {
  0% {
  transform:scaleX(1)}

  50% {
  transform:scale3d(1.1,1.1,1.1)}

  to {
  transform:scaleX(1)}

}

@keyframes bungee {
  0% {
  transform:scale3d(calc(1 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  15% {
  transform:scale3d(calc(1.25 * var(--bungee-dampening)),calc(.75 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  20% {
  transform:scale3d(calc(.75 * var(--bungee-dampening)),calc(1.25 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  25% {
  transform:scale3d(calc(1.15 * var(--bungee-dampening)),calc(.85 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  32% {
  transform:scale3d(calc(.95 * var(--bungee-dampening)),calc(1.05 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  37% {
  transform:scale3d(calc(1.05 * var(--bungee-dampening)),calc(.95 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

  50% {
  transform:scale3d(calc(1 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)),calc(1 * var(--bungee-dampening)))}

}
/* i think the animation variables */


.block {
  display:block;
  position:absolute;
  transform:translate(-50%,-50%);
  transition:opacity .1s,box-shadow .1s;
  outline:none;
  touch-action:manipulation;
  box-sizing:border-box;
  left:calc(var(--x)*var(--rpx));
  top:calc(var(--y)*var(--rpx));
  z-index:var(--z);
  --scale-x:1;
  --scale-y:1;
  --rotation:0;
transform:translateZ(0) translate(-50%,-50%) rotate(calc(var(--rotation) * 1deg)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) var(--block-on-hover-transform)}

.block,.block.manually-position {
  width:calc(var(--width)*var(--rpx));
height:calc(var(--height)*var(--rpx))}

.block.manually-position {
  left:auto;
  top:auto;
  position:relative;
transform:scaleX(var(--scale-x)) scaleY(var(--scale-y))}

.block.pinned {
position:fixed}

.block-content {
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  box-sizing:border-box;
  outline:none;
z-index:0}

.block .block-content {
  transition:transform .1s ease-in-out,opacity .1s ease-in-out;
  transform:translateZ(0) var(--block-on-hover-transform) var(--block-on-hover-transform);
box-sizing:border-box}

.block:not(.disable-effects) .block-content.ambient-spin {
  animation-name:spin;
  animation-duration:30s;
  animation-iteration-count:infinite;
animation-timing-function:linear}

/* everything location*/


@keyframes block-wobble-on-hover {
  0% {
  transform:rotate(0deg)}

  25% {
  transform:rotate(-3deg)}

  50% {
  transform:rotate(2deg)}

  75% {
  transform:rotate(-1deg)}

  to {
  transform:rotate(0deg)}

}

.block {
--block-on-hover-transform:scale(1)}

/* square placement */





.text-content,.text-content * {
font-size:calc(var(--font-size)*var(--scaler-multiplier)*1px)}



.text-content {
  --scaler-multiplier:1;
--width-percent:100%}








div[data-type=content].vertical>.block[data-type=text]:not(.pinned) .text-content {
  --scaler-multiplier:1;
  --width-percent:100%;
  min-width:0;
  width:100%;
  height:auto;
transform:none}



.text-content {
  white-space:pre-wrap;
word-break:break-word}

.text-content li {
padding-left:.4em}

.text-content li p {
margin-bottom:0}

.text-content ol,.text-content ul {
padding-left:1.5em}

.text-content ul li {
list-style:disc}

.text-content ol li {
  display:list-item;
list-style-type:decimal}

.text-content strong {
font-weight:700}

.text-content em {
font-style:italic}

.text-content p:empty:after {
content:" "}

.text-content u span {
text-decoration:underline}

.text-content a {
text-decoration:none}

.text-content a:hover,.text-content a:hover span {
text-decoration:underline}
/* text */