* {
    box-sizing: border-box;
}
body {
    position: relative;
    margin: 0;
    overflow-x: hidden;
    width: 100%;
    height: 1400px;
    background-color: rgb(0, 0, 0);
    /* background-image: url("/img/stars-colorful.gif"); */

}
.force-default-cursor {
    cursor: auto !important;
}
h1, h2, p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#disclaimer-panel {
    width: min(600px, 100vw);
    transform-origin: center;
    margin: auto;
    min-height: 450px;    
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0px 0px 50px rgb(128, 102, 0);
    border: 15px double rgb(120, 56, 0);
    border-radius: 15px;
}
/* #disclaimer-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; 
    
    
} */
.background-numbers {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('/img/num.gif');
    z-index: -3;

    opacity: 0.6;
}
.background-gradient-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(45, 21, 10));
    z-index: -3;
}
.disclaimer-heading {
    margin: 10px 0px;
    font-size: 30px;
    color:rgb(255, 170, 0); 
    font-family:'anima';
    text-shadow: 0px 1px 60px rgb(121, 74, 0), 5px 5px 0px rgb(102, 43, 4);
}
.disclaimer-box {
    background-color:rgba(154, 49, 0, 0.443);
    border: 2px solid Tomato;
    padding: 6px;
    border-radius: 25px;
    max-width: 650px;
    margin: auto;
    box-shadow: 0px 0px 20px rgb(173, 69, 28);
}
.disclaimer-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.disclaimer-text {
    font-size: 16px;
    color:rgb(255, 166, 0);  
    font-family: monospace;
}
.content-warnings {
    color:rgb(220, 19, 43);
    text-shadow: 0px 0px 8px rgba(219, 20, 20, 0.7);
}
.design-disclaimer {
    color:rgb(255, 98, 0); 
    font-family: 'Lucida Sans';
    font-size: 15px;
    text-shadow: 0px 0px 4px rgb(255, 111, 0);
    font-variant: small-caps;
}
.preview-disclaimer {
    color: rgb(255, 157, 0);
    border: 5px dashed orange; 
    margin-bottom: 25px;
    max-width: 700px;
    padding: 15px;
}
.footer-text {
    color:rgb(84, 11, 74);
    font-size: 12px;
    position: absolute;
    bottom: 0px;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 100vw;
    text-align: center;
}
.pawtal-text {
    color:rgb(255, 134, 4);
    text-shadow: 
        0px 0px 20px rgb(220, 88, 0);
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    font-family: 'dunkin';
    margin-bottom: 10px;
}
#paw-icon { 
    background-image: url("/img/pawicon_large.png");
    background-size: cover;
    width: 200px;
    height: 200px;
    position: fixed;
    transform-origin: center;
    opacity: 0;
}
.pawicon-animating {
    animation: pawicon-animation 4s 1 linear forwards;
}
@keyframes pawicon-animation {
    0% {
        opacity: 0;
        scale: 0;
        filter: hue-rotate(-360deg);
    }
    50% {
        opacity: 1;
        scale: 4;
        rotate: 0deg;
        filter: hue-rotate(0deg);
    }
    100% {
        opacity: 0;
        scale: 8;
        filter: hue-rotate(360deg);
    }
}
.squishypaws {
    position: absolute;
    width: 200px;
    height: 200px;

    border: 25px solid transparent;
    cursor: inherit;
    border-image: url("/img/pawborder.png");
    border-image-slice: 25 fill;
    border-image-repeat: stretch;
    border-image-outset: 25px;

    background-color: transparent;
    box-shadow: none;

    opacity: 0.4;

    cursor: pointer;

    animation: pawborder 1s infinite ease-in-out alternate,
    hue-rotate 5s infinite,
    rotate-around 15s linear infinite;
}
.paws-container {
    width: 200px;
    height: 200px;
    position: relative;
    
    top: 300px;
    left: calc(50vw - 100px);
    transform-origin: center;
    pointer-events: auto;
    z-index: 1;
    cursor: pointer;
}
#squishypaws-1 {
    animation: pawborder .5s infinite ease-in-out alternate-reverse,
    hue-rotate 5s infinite 1s reverse,
    rotate-around 15s linear infinite reverse;
    transform: scale(0.7);
}
#squishypaws-2 {
    animation: pawborder .5s infinite ease-in-out alternate,
    hue-rotate 5s infinite 2s,
    rotate-around 7s linear infinite;
    transform: scale(0.6);
}
#squishypaws-3 {
    animation: pawborder .3s infinite ease-in-out alternate-reverse,
    hue-rotate 5s infinite 3s reverse,
    rotate-around 2s linear infinite reverse;
    transform: scale(0.5);
}
.expanding-pawtal {
    animation: expand-pawtal 6s 1 forwards;
}
.shrinking-pawtal {
    animation: shrink-transform 6s 1 forwards;
}
.shrinking-pawtal::before {
    animation: shrink-opacity 6s 1 forwards;
}
.disclaimer-panel-animate {
    /* animation: disclaimer-panel-animation 8s ease-out forwards; */

    translate: -250px 550px;
    scale: 0.2;
    transform: rotateX(30deg) rotateY(-25deg);
}
@keyframes disclaimer-panel-animation {
    0% {
        scale: 1;
        translate: 0px 0px;
    }
    100% {
        translate: -350px 450px;
        scale: 0.2;
        transform: rotateX(30deg) rotateY(-25deg);
    }
}
#pawed-text {
    position: fixed;
    top: calc(60vh + 130px);
    left: 0px;
    text-align: center;
    width: 100vw;

    color:rgb(255, 255, 255);
    text-shadow: 
        0px 0px 20px rgb(220, 0, 187);
    font-size: clamp(12px, 4vh, 25px);
    font-weight: lighter;
    text-align: center;
    font-family: 'dunkin';
    font-variant: small-caps;

    transform-origin: center center;

    display: none;

    animation: you-are-pawed 4s ease-out both;

    z-index: 101;
}
@keyframes you-are-pawed {
    0% {
        opacity: 1;
        scale: 0;
    }
    100% {
        opacity: 0;
        scale: 5;
    }
}
#warp-text {
    text-align: center;
    position: fixed;
    bottom: 10vh;
    right: calc(35vw);

    transform: translateX(-50%);
    width: 400px;
    display: none;
}
.disappearing-text {
    animation: img-disappear 3s linear forwards;
}
#warp-text span {
    color:rgb(255, 4, 238);
    text-shadow: 
        0px 0px 20px rgb(220, 0, 187);
    font-size: clamp(12px, 2vh, 25px);
    font-weight: lighter;
    text-align: center;
    font-family: 'dunkin';
    font-variant: small-caps;
    opacity: 0;
    
}
.revealing-text {
    animation: img-appear 3s linear forwards;
}
.dialogue-container {
    width: 800px;
    height: 200px;

    position: fixed;
    right: calc(20vw);
    bottom: 300px;

    border: none;
    background: none;
}
.dialogue {
    position: relative;
    color:rgb(255, 4, 238);
    text-shadow: 
        0px 0px 20px rgb(220, 0, 187);
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    font-style: italic;
    font-family: 'dunkin';
    font-variant: small-caps;
    line-height: 90px;
}
@property --mask-size {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
#full-page-frame {
    display: none;
    width: 100vw;
    height: 100vh;
    border: none;
    position: fixed;
    top: 0px;
    left: 0px;
    pointer-events: none;

    animation: frame-warp-arrive 15s ease-in-out both 7s;

    z-index: 5;
    transform-origin: center 400px;

    mask-image: radial-gradient(circle at center 400px, black 0%, transparent var(--mask-size));

}
@keyframes frame-warp-arrive {
    0% {
        translate: 0px 150px;
        scale: 0;
        --mask-size: 20%;
    }
    30% {
        translate: 0px 0px;
        scale: 1;
        --mask-size: 20%;
    }
    100% {
        --mask-size: 1000%;
        pointer-events: auto;
    }   
}
#warp-img-1, #warp-img-2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    display: none;
    
    mask-image: radial-gradient(circle closest-side at center, black 0%, transparent 100%);
    
    pointer-events: none;
}
#warp-img-1 {
    animation: warp-img-animation-1 20s 0s ease-in-out both;
}
#warp-img-2 {
    animation: warp-img-animation-2 10s ease-in-out 4s both;
}
#pre-pawtal-content {
    position: relative;
}
#foxdrum-yap1 {
    position: absolute;
    top: 50px;
    right: 50px;
    animation: text-wiggle 3s ease-in-out both infinite alternate-reverse;
    transform-origin: center 80%;
}
#foxdrum-audio-text {
    position: absolute;
    top: 100px;
    right: 50px;
    
    color:rgb(255, 4, 238);
    text-shadow: 
        0px 0px 10px rgb(220, 0, 187);
    font-size: 13px;

    font-weight: lighter;
    text-align: center;
    font-family: 'dunkin';
    font-variant: small-caps;

    animation: text-wiggle 3s ease-in-out both infinite alternate;
}
#autoplay-disclaimer {
    position: absolute;
    top: 0px;
    left: 50vw;
    transform: translateX(-50%);
    width: 300px;

    color: rgb(255, 157, 0);
    background-color:rgb(50, 8, 1);
    border: 2px groove orange; 
    border-radius: 15px;
    
    text-align: center;
    font-size: 14px;
    font-family: monospace;
    font-variant: small-caps;
    font-weight: bold;
    /* display: none; */
}
#mobile-disclaimer {
    display: none;
    position: relative;
    margin: 0px auto;
    width: 300px;

    color: rgb(255, 157, 0);
    background-color:rgb(50, 8, 1);
    border: 2px groove orange; 
    padding: 5px;
    border-radius: 15px;
    
    text-align: center;
    font-size: 14px;
    font-family: monospace;
    font-variant: small-caps;
    font-weight: bold;
    /* display: none; */
}
@keyframes warp-img-animation-1 {
    0% {
        scale: 0;
        opacity: 1;
        rotate: 1000deg;
    }
    100% {
        scale: 4;
        opacity: 0;
        rotate: 0deg;
    }
}
@keyframes warp-img-animation-2 {
    0% {
        scale: 0;
        opacity: 1;
    }
    100% {
        scale: 4;
        opacity: 0;
    }
}
@keyframes shrink-transform {
    0% {
        scale: 1;
    }
    100% {
        translate: 0px 300px;
        scale: 0;
    }
}
@keyframes shrink-opacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes expand-pawtal {
    0% {
        scale: 1;
    }
    100% {
        scale: 5;
        opacity: 0;
    }
}