* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000080;
    background-image: url('images.png');
    background-repeat: repeat;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Marker Felt', 'Times New Roman', serif;
    color: #FFFFCC;
    padding: 20px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFFFFF;
    border: 8px ridge #FFD966;
    box-shadow: 12px 12px 0px #4B0082;
    padding: 15px 20px 25px 20px;
}

.cheesy-header {
    text-align: center;
    background: linear-gradient(135deg, #FF3399, #FFCC00);
    border: 3px groove #FFD700;
    padding: 15px 5px;
    margin-bottom: 20px;
}

h1 {
    font-family: 'Times New Roman', 'Georgia', serif;
    font-size: 52px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 4px 4px 0px #800080, 6px 6px 0px #000000;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.blink {
    animation: blink-animation 1.2s step-start infinite;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: #000000;
    display: inline-block;
    padding: 0 6px;
    font-size: 18px;
    color: #00FF00;
}

@keyframes blink-animation {
    50% {
        opacity: 0;
    }
}

.marquee-text {
    background-color: #000000;
    color: #00FFFF;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 18px;
    padding: 8px;
    border: 2px dotted #FF00FF;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
}

marquee {
    font-weight: bold;
}

.content-row {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.sidebar {
    display: table-cell;
    width: 30%;
    background-color: #F0E68C;
    border: 3px ridge #B8860B;
    padding: 12px;
    vertical-align: top;
    color: #4B0082;
}

.mainbar {
    display: table-cell;
    width: 70%;
    background-color: #FFFACD;
    border: 3px ridge #CD853F;
    padding: 12px 18px;
    vertical-align: top;
    color: #2F4F4F;
}

.sidebar h3,
.mainbar h3 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 22px;
    background: #FFA07A;
    display: inline-block;
    padding: 4px 12px;
    border-left: 8px solid #FF0000;
    letter-spacing: 1px;
    color: #1A1A1A;
}

.sidebar ul {
    list-style-type: none;
    margin-top: 15px;
}

.sidebar li {
    margin: 12px 0;
    font-family: 'Comic Sans MS', 'Times New Roman', serif;
    font-weight: bold;
}

.sidebar a {
    color: #8B0000;
    text-decoration: none;
    background: #FFDAB9;
    padding: 4px 8px;
    border: 2px outset #FFB347;
}

.sidebar a:hover {
    background: gold;
    border-style: inset;
    text-decoration: underline;
}

.mainbar p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
}

.under-construction {
    background: #FFFF33;
    color: #FF0000;
    font-weight: bold;
    text-align: center;
    font-family: 'Courier New', monospace;
    padding: 8px;
    border: 3px double red;
    margin: 15px 0;
}

.button-zone {
    background: #D3D3D3;
    border: 5px groove #A9A9A9;
    padding: 12px 18px;
    margin: 20px 0 10px;
    vertical-align: middle;
    text-align: center;
}

.button-zone h2 {
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    font-size: 28px;
    vertical-align: middle;
    color: #00008B;
    background: #F08080;
    display: inline-block;
    padding: 5px 15px;
    margin: 20px 0 10px;
    border-radius: 20px 0px 20px 0px;
    box-shadow: 5px 5px 0px #4B0082;
}

.badge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: #F5F5DC;
    padding: 20px 12px;
    border: 1px solid #996633;
}

.button-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #EADDCA;
    padding: 6px;
    border: 2px outset #b5875b;
}

.button-item img {
    width: 88px;
    height: 31px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    background: #eee;
    display: block;
    border: 1px solid black;
}

.button-caption {
    font-size: 9px;
    font-family: 'Verdana', 'Arial', monospace;
    color: #4d2e1b;
    margin-top: 3px;
}

.fake-badge {
    background: repeating-linear-gradient(45deg, #FF6699, #FF6699 10px, #FFCC33 10px, #FFCC33 20px);
    width: 88px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Arial Black', sans-serif;
    font-size: 10px;
    color: black;
    text-shadow: 1px 1px white;
    border: 1px solid yellow;
}

.footer-classic {
    background: #2F2F2F;
    border-top: 5px solid #FFCC33;
    margin-top: 20px;
    padding: 16px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #CCCCCC;
}

.visitor {
    background: black;
    padding: 4px 10px;
    display: inline-block;
    color: #0F0;
    font-family: 'Digital', 'Courier New', monospace;
    letter-spacing: 2px;
}

hr {
    border: 1px dashed #FFA500;
    margin: 15px 0;
}

@media only screen and (max-width: 700px) {

    .content-row,
    .sidebar,
    .mainbar {
        display: block;
        width: 100%;
    }

    .sidebar {
        margin-bottom: 16px;
    }

    h1 {
        font-size: 40px;
    }
}

img {
    border: none;
}

a {
    text-decoration: none;
}

.cheesy-button {
    background: #EE82EE;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-family: 'Impact', fantasy;
}