/* General Styles */
body {
    background-color: #000000; /* Dark background for contrast */
    color: #ffffff; /* Accessible text color for readability */
    font-family: 'Ubuntu Mono', Helvetica, monospace; /* Readable font */
    font-size: 20px; /* Adjust font size for readability */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Centered Content */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    display: inline-block;
}

/* Logo Styles */
.logo {
    animation: hue2 10s linear infinite;
    image-rendering: pixelated;
}

.logo2 {
    filter: drop-shadow(0px 0px 10px black);
}

/* Table Cell Styles */
td {
    border: 20px solid pink;
    border-image-source: url(./border.png);
    border-image-slice: 64 64;
    border-image-repeat: stretch;
    padding: 5px;
    padding-right: 10px;
    text-align: left;
    background-image: linear-gradient(rgba(197, 117, 155, 0.5), rgba(205, 105, 214, 0.5));
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Background Layers */
.bg1, .bg2, .bg3, .bg4 {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}

.bg1 {
    background-image: url(./bg1.png);
    animation: bgSlide 120s linear infinite;
    filter: blur(1px);
}

.bg2 {
    background-image: url(./bg2.png);
    animation: bgSlide 90s linear infinite, hue1 10s linear infinite, opac-shift 2s ease-in-out infinite;
    filter: blur(1px);
}

.bg3 {
    background-image: url(./bg3.png);
    animation: bgSlide 80s linear infinite;
    opacity: 0.25;
    image-rendering: pixelated;
}

.bg4 {
    background-image: url(./bg4.png);
    animation: bgSlide2 80s linear infinite;
    opacity: 0.25;
}

/* Links */
a, .link {
    color: #7ff;
    text-decoration: underline;
}

/* Badge */
.badge {
    width: 88px;
    height: 31px;
    margin-top: 4px;
}

/* Error Message */
.errormessage {
    position: absolute;
    top: 2.5%;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: bolder;
    opacity: 0;
}

/* Animations */
@keyframes bgSlide {
    100% {
        background-position: 800px 400px;
    }
}

@keyframes bgSlide2 {
    100% {
        background-position: -300px 0px;
    }
}

@keyframes hue1 {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(60deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

@keyframes hue2 {
    0% {
        filter: hue-rotate(360deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

@keyframes opac-shift {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes error {
    0% {
        opacity: 1;
        color: red;
        font-size: 110%;
    }
    10% {
        color: white;
        font-size: 100%;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    body {
        font-size: 18px; /* Adjust font size for smaller devices */
    }

    .centered {
        width: 90%; /* Adjust width for better fit */
    }

    td {
        padding: 10px; /* Increase padding */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px;
    }

    td {
        padding: 5px; /* Compact padding for very small screens */
    }
}