/* This is a very basic CSS file - now made terrible */
body {
    font-family: Comic Sans MS, cursive, sans-serif !important; /* Horrible font choice */
    color: #ccc !important; /* Low contrast text */
    background-color: #ff00ff !important; /* Bright, clashing background */
    margin: 50px !important; /* Excessive margins */
    text-align: center !important; /* Center everything */
    font-size: 8px !important; /* Tiny text */
}

/* No focus indicator */
:focus {
    outline: none !important;
}

/* Make images huge and overflow */
img {
    width: 200vw !important; /* Way too wide */
    height: 200vh !important; /* Way too tall */
    position: absolute !important; /* Take out of flow */
    top: -50% !important;
    left: -50% !important;
    z-index: -1 !important; /* Behind everything */
}

/* Make links hard to read */
a {
    color: #00ff00 !important; /* Bright green on bright pink */
    text-decoration: line-through !important; /* Hard to read */
    font-size: 2em !important; /* Huge links */
}

/* Make buttons look bad */
[role="button"] {
    background-color: #0000ff !important; /* Bright blue */
    color: #ff0000 !important; /* Bright red */
    padding: 50px !important; /* Huge padding */
    border: 10px dashed #ffff00 !important; /* Yellow dashed border */
    font-size: 3em !important; /* Huge text */
    margin: 20px !important;
}

/* Make forms a mess */
form {
    width: 1000px !important; /* Way too wide */
    margin: 50px auto !important; /* Centered, but too wide */
    background-color: #ffff00 !important; /* Yellow background */
    border: 5px solid #000 !important; /* Black border */
    padding: 20px !important;
}

input[type="text"],
input[type="email"],
input[type="submit"] {
    width: 50% !important; /* Too wide */
    margin: 10px !important;
    background-color: #000 !important; /* Black background */
    color: #fff !important; /* White text */
    border: 2px dotted #fff !important; /* White dotted border */
    font-size: 1.5em !important; /* Large text */
}

/* Make headings inconsistent */
h1 {
    font-size: 5em !important; /* Huge */
    color: #0000ff !important; /* Blue */
    text-shadow: 2px 2px #ff0000 !important; /* Red shadow */
}

h4 {
    font-size: 0.5em !important; /* Tiny */
    color: #ff0000 !important; /* Red */
    text-decoration: underline !important; /* Underlined */
}

/* Make paragraphs hard to read */
p {
    font-size: 2em !important; /* Huge */
    line-height: 0.5 !important; /* Overlapping lines */
    text-align: justify !important; /* Justified text */
    text-indent: 50px !important; /* Indented */
}

/* Make the duplicate ID divs overlap */
#duplicate {
    position: relative !important;
    top: -50px !important;
    left: 50px !important;
    background-color: #000 !important;
    color: #fff !important;
    width: 50% !important;
    padding: 10px !important;
    opacity: 0.5 !important; /* Semi-transparent */
}

/* New overlapping colorful divs */
.overlap-container {
    position: relative !important;
    height: 300px !important;
    margin: 50px 0 !important;
    overflow: visible !important;
}

.overlap-div {
    padding: 20px !important;
    border: 3px solid #000 !important;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5) !important;
    position: absolute !important;
    width: 200px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    z-index: 1 !important;
}

.overlap-red {
    background-color: #ff5555 !important;
    color: #00ffff !important;
    top: 10px !important;
    left: 10px !important;
    transform: rotate(-5deg) !important;
}

.overlap-blue {
    background-color: #5555ff !important;
    color: #ffff00 !important;
    top: 50px !important;
    left: 40px !important;
    transform: rotate(3deg) !important;
}

.overlap-green {
    background-color: #55ff55 !important;
    color: #ff00ff !important;
    top: 90px !important;
    left: 70px !important;
    transform: rotate(-7deg) !important;
}

.overlap-yellow {
    background-color: #ffff55 !important;
    color: #0000ff !important;
    top: 130px !important;
    left: 100px !important;
    transform: rotate(5deg) !important;
}

.overlap-purple {
    background-color: #aa55ff !important;
    color: #00ff00 !important;
    top: 170px !important;
    left: 130px !important;
    transform: rotate(-10deg) !important;
}

/* Header styles */
.site-header {
    background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.nav-menu {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

/* Main content wrapper */
.content-wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Footer styles */
.site-footer {
    background: linear-gradient(45deg, #00ffff, #ff00ff) !important;
    padding: 40px 20px !important;
    margin-top: 50px !important;
    color: #fff !important;
    text-align: center !important;
}

.search-form {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 20px 0 !important;
}

.search-input {
    padding: 8px 15px !important;
    border-radius: 20px !important;
    border: none !important;
    width: 200px !important;
    background: rgba(255,255,255,0.8) !important;
}

.search-button {
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: none !important;
    background: #ff00ff !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.search-button:hover {
    transform: scale(1.05) !important;
}

/* Mobile disaster */
@media (max-width: 480px) {
    body {
        margin: 0 !important; /* Remove margins */
        font-size: 1px !important; /* Even tinier text */
        background-color: #000 !important; /* Black background */
    }

    img {
        width: 100vw !important; /* Take up full width */
        height: auto !important; /* Maintain aspect ratio */
        position: static !important; /* Back in flow */
        top: auto !important;
        left: auto !important;
        z-index: auto !important; /* No longer behind */
    }

    a {
        font-size: 1em !important; /* Smaller links */
    }

    [role="button"] {
        padding: 10px !important; /* Smaller padding */
        font-size: 1em !important; /* Smaller text */
        border: 1px solid #fff !important; /* White border */
    }

    form {
        width: 100% !important; /* Take up full width */
        margin: 0 !important; /* Remove margins */
    }

    input[type="text"],
    input[type="email"],
    input[type="submit"] {
        width: 100% !important; /* Take up full width */
        font-size: 1em !important; /* Smaller text */
    }

    h1 {
        font-size: 2em !important; /* Smaller */
    }

    p {
        font-size: 1em !important; /* Smaller */
        line-height: 1.5 !important; /* Normal line height */
        text-indent: 0 !important; /* No indent */
    }

    #duplicate {
        position: static !important; /* Back in flow */
        top: auto !important;
        left: auto !important;
        width: 100% !important; /* Take up full width */
        opacity: 1 !important; /* Fully opaque */
    }

    .overlap-container {
        height: 500px !important;
        margin: 20px 0 !important;
    }
    
    .overlap-div {
        width: 90% !important;
        margin-left: 5% !important;
        border: 2px dashed #fff !important;
        box-shadow: none !important;
        opacity: 0.8 !important;
    }
    
    .overlap-red {
        top: 10px !important;
        left: 0 !important;
        background-color: #ff0000 !important;
        transform: rotate(0deg) skewX(10deg) !important;
        z-index: 5 !important;
    }
    
    .overlap-blue {
        top: 90px !important;
        left: 0 !important;
        background-color: #0000ff !important;
        transform: rotate(0deg) skewY(10deg) !important;
        z-index: 4 !important;
    }
    
    .overlap-green {
        top: 170px !important;
        left: 0 !important;
        background-color: #00ff00 !important;
        transform: rotate(0deg) scale(0.9) !important;
        z-index: 3 !important;
    }
    
    .overlap-yellow {
        top: 250px !important;
        left: 0 !important;
        background-color: #ffff00 !important;
        transform: rotate(0deg) scale(1.1) !important;
        z-index: 2 !important;
    }
    
    .overlap-purple {
        top: 330px !important;
        left: 0 !important;
        background-color: #ff00ff !important;
        transform: rotate(0deg) skewX(-10deg) !important;
        z-index: 1 !important;
    }
}

/* Tablet disaster */
@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-color: #33cc99 !important; /* Teal-ish background */
        font-size: 10px !important;
    }
    
    .overlap-container {
        height: 400px !important;
    }
    
    .overlap-div {
        border-radius: 15px !important;
        border-width: 5px !important;
        width: 250px !important;
        text-shadow: 2px 2px 4px #000 !important;
    }
    
    .overlap-red {
        top: 20px !important;
        left: 30px !important;
        transform: rotate(15deg) scale(1.1) !important;
        z-index: 5 !important;
    }
    
    .overlap-blue {
        top: 80px !important;
        left: 60px !important;
        transform: rotate(-10deg) scale(0.9) !important;
        z-index: 4 !important;
    }
    
    .overlap-green {
        top: 150px !important;
        left: 40px !important;
        transform: rotate(7deg) scale(1.2) !important;
        z-index: 3 !important;
    }
    
    .overlap-yellow {
        top: 200px !important;
        left: 90px !important;
        transform: rotate(-5deg) scale(0.8) !important;
        z-index: 2 !important;
    }
    
    .overlap-purple {
        top: 250px !important;
        left: 70px !important;
        transform: rotate(20deg) scale(1) !important;
        z-index: 1 !important;
    }
    
    /* Make images bleed out on tablets */
    img {
        width: 120% !important;
        margin-left: -10% !important;
        border: 10px dotted #ff3300 !important;
    }
}