@font-face {
        font-family: 'jura';
        src: url('fonts/jura.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'komika';
        src: url('fonts/kmkdsp__-webfont.woff2') format('woff2'),
             url('fonts/kmkdsp__-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
body {
        margin:0;
        background-color : #111;
        color:#999;
        font-family : "jura";
        overflow-x:hidden;
}
.bg
{
        position:fixed;
        width:100%;
        height:100%;
        z-index:-1;
        background-image:url('../images/checker.png');
        animation: scrollUp 10s linear infinite; /* Adjust duration and timing */
}
@keyframes scrollUp {
        from {
            background-position-y: 0;
        }
        to {
            background-position-y: -101px; /* Moves up by 101 pixels */
        }
    }
.donationlink
{
        font-size:150%;
        text-decoration:none;
}
a:link{
        color:rgb(177, 179, 90);
}
a:visited{
        color:rgb(177, 179, 90);
}
a:hover{
        color:#FAC;
}

.pindent
{
        margin:8px;
}
.headerContainer
{
        padding:8px;
        padding-top:12px;
        display: flex;           /* Enable flexbox */
        align-items: center;      /* Align items vertically at the center */
        justify-content: flex-start; /* Ensure header stays aligned to the left */
}
.killhead
{
        margin-right:12px;
}
.footer
{
        margin-top:24px;
        text-align:center;
        font-size:80%;
        margin-bottom:24px;
}
.buttonContainer
{
        display: flex;          
        gap: 4px;
}
.listbutton
{
        display:none;
        border:1px solid rgba(255, 255, 255, 0.2);
        position:relative;
        background-color:rgba(255, 255, 255, 0.05);
        width:48px;
        height:48px;
        background-image:url('../images/ui/listbutton.gif');
        background-size: 16px 16px;
        background-position:center;
        background-repeat:no-repeat;
        opacity:0.5;
        cursor:pointer;
}
.listbutton:hover{
        
        background-color:rgba(255, 255, 255, 0.15);
}

.button
{
        user-select: none;
        font-family: "komika";
        font-size:20px;
        border:1px solid rgba(255, 255, 255, 0.1);
        background-color:rgba(255, 255, 255, 0.05);
        padding:4px;
        padding-left:8px;
        padding-right:8px;
        position:relative;
        cursor:pointer;
}
.creditsContainer
{
        overflow:hidden;
        position:relative;
        margin-top:24px;
        padding:8px;
        border-radius:4px;
        background-color:rgba(83, 83, 83, 0.171)
}
.button:hover
{
        color:rgb(132, 181, 255);
}
.container
{
        margin:0 auto;
        max-width:1024px;
}
p{
        line-height:1.25;
}
.content
{
        padding:8px;
        display:none;
        margin-top:24px;
}
.facecontainer
{
        position:relative;
}
.killhead{
        position:relative;
        width:40px;
        height:52px;
        background-image:url('../images/killHead.png');
        background-size:80%;
        background-repeat:no-repeat;
        background-position:center;
        border:1px solid rgba(255, 255, 255, 0.1);
}
.hiddengembox
{
        margin-top:24px;
        display:flex;
        gap:16px;
        align-items:center;
        justify-content:center;
        margin-bottom:24px;
}
.audiocontainer
{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:12px;
}
.thgptslogo
{
        filter: hue-rotate(0deg);
        max-width:100%; opacity:0.5;
        animation: hueLoop 2s linear infinite;
}
.hueloop {
        filter: hue-rotate(0deg);
        animation: hueLoop 5s linear infinite;
}
      
      /* Define the hue rotation animation */
      @keyframes hueLoop {
        0% {
          filter: hue-rotate(0deg);
        }
        100% {
          filter: hue-rotate(360deg);
        }
}
.patronShine
{
        color:#FAC;
        filter: hue-rotate(0deg);
        animation: hueLoop 5s linear infinite;
}
.donationsPanel
{
        display:flex;
        align-items:flex-start;
        justify-content:center;
        gap:12px;
}
.donationBox
{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        margin:12px;
        padding:12px;
        position:relative;
        overflow:hidden;
        border-top:1px solid rgba(255, 255, 255, 0.1);
        border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
.lewie
{
        top:0;
        left:0;
        background-image:url('../images/lewieboxdot.png');
        opacity:0.05;
        position:absolute;
        z-index:-1;
        width:100%;
        height:100%;
        animation: scrollUpright 2s linear infinite; /* Adjust duration and timing */
}
.lewieArrow
{
        background-position: center center;
        top:0;
        left:0;
        background-image:url('../images/lewieArrow.png');
        opacity:0.05;
        position:absolute;
        z-index:-1;
        width:100%;
        height:100%;
        animation: scrollRight28 2s linear infinite; /* Adjust duration and timing */
        background-repeat:repeat-x;
}
.lewieX
{
        top:0;
        left:0;
        background-image:url('../images/lewieX.png');
        opacity:0.05;
        position:absolute;
        z-index:-1;
        width:100%;
        height:100%;
        animation: scrollUp 6s linear infinite; /* Adjust duration and timing */
}
.lewieSmallBox
{
        top:0;
        left:0;
        background-image:url('../images/lewieSmallBox.png');
        opacity:0.05;
        position:absolute;
        z-index:-1;
        width:100%;
        height:100%;
        animation: scrollUp 6s linear infinite; /* Adjust duration and timing */
}
.lewieDotCross
{
        top:0;
        left:0;
        background-image:url('../images/lewieDotCross.png');
        opacity:0.05;
        position:absolute;
        z-index:-1;
        width:100%;
        height:100%;
        animation: scrollUp 6s linear infinite; /* Adjust duration and timing */
}
.phead
{
        font-family: "komika";
}
.tdr
{
        text-align:right;
}
.video-container {
        position: relative;
        max-width: 960px; /* Set your desired max width */
        margin: 0 auto; /* Center the video horizontally */
        aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */
}
      
.video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0; /* Optional: Remove border */
}
.mobilelist
{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.95);
        display:none;
        z-index:2;
        flex-direction:column;
        gap:4px;
}
.mobilebutton
{
        user-select: none;
        font-family: "komika";
        font-size:20px;
        padding:16px;
        cursor:pointer;
        border:1px solid rgba(255, 255, 255, 0.1);
        background-color:rgba(255, 255, 255, 0.05);
        margin:2px;
        margin-left:8px;
        margin-right:8px;
        position:relative;
}
.mobilebutton:hover
{
        color:rgb(132, 181, 255);
}
@keyframes scrollRight28 {
        from {
            background-position-x: 0;
        }
        to {
            background-position-x: 28px; /* Moves up by 101 pixels */
        }
    }
@keyframes scrollUpright {
        from {
            background-position-y: 0;
            background-position-x: 0;
        }
        to {
            background-position-y: -16px; /* Moves up by 101 pixels */
            background-position-x: 16px; /* Moves up by 101 pixels */
        }
    }
@media (max-height: 405px) {
        .mobilebutton
        {
                padding:8px;
        }
}
@media (max-height: 305px) {
        .mobilebutton
        {
                padding:4px;
        }
}
@media (max-width: 540px) {
        .buttonContainer
        {
                display:none;
        }
        .listbutton{
                display:block;
        }
        .shopitemcontainer
        {
                flex-direction: column;
        }
}
@media (max-width: 340px) {
        .donationsPanel
        {
                flex-direction: column;
        }
}