body {
        background:#000a09;
        color:#999;
        padding:0;
        margin:0;
        font-family: "abel";
        font-size:18px;
        overflow-x: hidden;
        background-image:url(images/littleSquares1percent.png);
}
.video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width = 9 / 16 = 0.5625) */
        height: 0;
        overflow: hidden;
        margin-bottom:16px;
    }
    
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the video scales without distorting */
    }
.homevideo
{
        display:block;
        max-width:calc(100% - 8px);
        margin:0 auto;
}
.linkTextContainer
{
        margin:8px;
        max-width:400px;
        text-align:left;
}
.linkimage
{
        border:none;
        border-right:1px solid rgba(128, 255, 255, 0.164);
        max-width:240px;
}
.linktag
{
        margin:0;
        padding:0;
        line-height:0;
}
.bodyGrid
{
        position:fixed;
        background-image:url(images/grid.png);
        width:100%;
        height:100%;
        top:0;
        left:0;
        opacity:0.035;
        animation: moveBackground 60s linear infinite;
        z-index:-1;
}
@keyframes moveBackground
{
        0% {
                background-position-y: center;
            }
            100% {
                background-position-y: center 20px; /* Move background image up by 20px */
            }
}
.artcontainer
{
        display:none;
        align-items:center;
        justify-content: center;
        flex-wrap: wrap;  /* Stack items vertically */
        max-width: 100%;         /* Makes sure it doesn't overflow the page width */
        width: 100%;             /* Ensures the container spans the full width */
        gap:12px;
}
.monofont
{
        font-family:'Courier New', Courier, monospace;
}
a:visited
{
        color:#4d85ff
}
a:link
{
        color:#4d85ff
}
a:hover
{
        color:#ffc400
}
.imagethumb
{
        border-radius:4px;
}
.buttoncontainer
{
        display: flex;
        justify-content : center;
        padding: 8px;
        padding-top:0;
}
.scrollup
{
        cursor:pointer;
        display:none;
        align-items:center;
        justify-content: center;
        font-size:24px;
        position:fixed;
        bottom:12px;
        right:0;
        border: 1px solid rgba(128, 255, 255, 0.15);
        border-right:none;
        background-color:rgb(0, 12, 12);
        color: white;
        width:40px;
        height:40px;
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
        margin-top:0;
        background-image:url(images/littleline1percent.png);

}
.button
{
        
        border: 1px solid rgba(128, 255, 255, 0.15);
        border-top:none;
        background-color:rgba(128, 255, 255, 0.05);
        color: white;
        padding: 20px;
        margin-top:0;
        background-image:url(images/littleSquares.png);
        
}
.buttonSelected
{
        
        border: 1px solid rgba(128, 255, 255, 0.05);
        border-top:none;
        background-color:rgba(128, 255, 255, 0.025);
        color: rgb(92, 161, 150);
        padding: 20px;
        margin-top:0;
}
.buttonseparator
{
        margin:2px;
        background-color:rgba(128, 255, 255, 0.15);
        width:4px; height:4px;
        display:flex;
        align-self:center;
        justify-self:center;
}
.button:hover{
        
        border: 1px solid rgba(128, 255, 255, 0.35);
        border-top:none;
        background-color:rgba(128, 255, 255, 0.1);
        cursor:pointer;
}
.abel-regular {
        font-family: "abel", sans-serif;
        font-weight: 400;
        font-style: normal;
}
.image
{
        max-width:100%;
        border-radius:4px;

}
.halfwidth
{
        width:calc(50% - 8px);
        margin:0 auto;
}
.bodyGradient
{
        position:fixed;
        bottom:0;
        width:100%;height:100%;
        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0,212,255,0) 100%);
        z-index:-1;

}
.contentbody
{
        padding:4px;
        max-width: 1024px;
        margin:0 auto;
        margin-top:12px;
}
.outboundContainer
{
        display:flex;
        align-items:flex-start;
        justify-content:center;
        gap:12px;
}
.outboundbox
{
        border:1px solid #00fff21f;
        border-radius:4px;
        display:inline-flex;
        justify-content: center; /* Centers the children horizontally */
}
.linkbox
{
        border:1px solid #00fff21f;
        background-color: rgba(0, 128, 255, 0.01);
        border-radius:8px;
        border-top-left-radius:0;
        border-bottom-right-radius:0;
        margin-bottom:12px;
        display:inline-flex;
        justify-content: center; /* Centers the children horizontally */
        position:relative;
        background-image:url(images/littleline2percent.png);
}
.linkbox::after{
        position:absolute;
        bottom:0;
        right:0;
        width:8px;
        height:8px;
        background-color: rgba(0, 255, 255, 0.15);
        content: "";
        border-top-left-radius:4px;
}
.lineseparator
{
        width:100%;
        height:1px;
        margin:12px;
        border-top:1px solid rgba(0, 128, 255, 0.15);
}
.outboundp
{
        max-width:200px;
        background-image:url(images/littleline2percent.png);
}
.innerContentPanel
{
        padding:8px; border-bottom: 1px solid rgba(0, 255, 255, 0.1);margin-bottom: 12px;
}
.innerContentPanelColored
{
        padding:8px; border-bottom: 1px solid rgba(0, 255, 255, 0.1);margin-bottom: 12px;
        background-color: rgba(0, 255, 255, 0.05);
}
#killLogo
{
        filter: hue-rotate(0deg); /* Starting hue */
    animation: hueShift 5s infinite; /* Apply the animation */
}
@keyframes hueShift {
        0% {
            filter: hue-rotate(0deg); /* Start with no change in hue */
        }
        100% {
            filter: hue-rotate(360deg); /* Complete the hue rotation */
        }
    }
@media (max-width: 640px) {
        .contentbody {
            padding:8px;
        }
        .button
        {
                padding: 4px;
        }
        .buttonseparator
        {
                margin:1px;
                background-color:rgba(128, 255, 255, 0.15);
                width:1px; height:1px;
                display:flex;
                align-self:center;
                justify-self:center;
        }
        .halfwidth
        {
                width:calc(100% - 16px);
        }
        .outboundContainer
        { flex-wrap: wrap;
        }
}