/* 90s Dark & Chaotic Stylesheet */
body {
    font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    margin: 0;
    padding: 0;
}

a:link { color: #00ffff; text-decoration: underline; }
a:visited { color: #ff00ff; text-decoration: underline; }
a:active { color: #ff0000; text-decoration: underline; }

/* Left Sidebar Menu Background */
.menu-col {
    background-image: url('images/bg.png'); /* Patterned background */
    background-repeat: repeat;
    border-right: 5px solid #ff00ff;
}

.menu-link {
    text-decoration: none; 
    font-size: 20px;
    font-weight: bold;
}

.menu-link:hover {
    color: #ff0000 !important;
    background-color: #ffffff; /* Contrast hover */
}

/* Simulated WordArt / 3D Text (modified for dark bg) */
.wordart {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000, 4px 4px 0px #ffffff;
    letter-spacing: 2px;
}

.wordart-title {
    font-size: 48px;
    font-weight: bold;
    text-shadow: 3px 3px 0px #ffffff, 6px 6px 0px #0000ff, 9px 9px 0px #ff00ff;
    letter-spacing: 5px;
}

/* General Tables */
table {
    border-collapse: collapse;
}

/* Ensure images don't completely overflow but still look clunky */
img {
    max-width: 300px;
    height: auto;
    border: 0;
}

/* Marquee styling */
marquee {
    background-color: #000000;
    border: 2px dashed #ff0000;
    padding: 5px;
}

/* Responsive Styles for Smartphones */
@media screen and (max-width: 768px) {
    /* Stack the sidebar and main content */
    table, tr, td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .menu-col {
        border-right: none !important;
        border-bottom: 5px solid #ff00ff;
        padding-bottom: 20px;
    }
    
    /* Make images fit the screen */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Adjust WordArt sizes for small screens */
    .wordart-title {
        font-size: 32px !important;
        letter-spacing: 2px !important;
    }
    
    .wordart {
        font-size: 24px !important;
    }

    /* Padding adjustments for mobile */
    td {
        padding: 20px !important;
    }
    
    marquee {
        width: 100% !important;
    }
}