/* ---------- Chaotic Background ---------- */

body {
    background: repeating-linear-gradient(
        45deg,
        #ff00aa,
        #ff00aa 10px,
        #00ffff 10px,
        #00ffff 20px
    );
    font-family: "Courier New", monospace;
    font-size: 18px;
    color: #111;
    margin: 0;
}

/* ---------- Container feels unstable ---------- */

.container {
    max-width: 900px;
    margin: 30px auto;
    background: white;
    border: 5px dashed black;
    padding: 25px;
    transform: rotate(-0.5deg);
}

/* ---------- Typography hierarchy disrupted ---------- */

h1 {
    font-size: 3em;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ff0033;
    text-shadow: 3px 3px #00ffff;
}

h2 {
    font-size: 1.1em;
    color: #000;
    background: yellow;
    padding: 4px;
}

/* ---------- Resource Cards ---------- */

.resource {
    border: 3px dotted #333;
    margin-bottom: 20px;
    padding: 12px;
    background: #fafafa;
    transform: skewX(-2deg);
}

/* ---------- Lists ---------- */

.meta {
    list-style-type: none;
    padding-left: 5px;
}

.meta li {
    margin-bottom: 3px;
}

/* ---------- Links (visually loud) ---------- */

a {
    color: blue;
    background: lime;
    padding: 2px 4px;
    text-decoration: none;
}

a:hover {
    background: red;
    color: white;
}

/* ---------- Logos off-alignment ---------- */

.link-logo {
    width: 28px;
    height: 28px;
    vertical-align: baseline;
    transform: rotate(12deg);
}

/* ---------- Footer ---------- */

footer {
    font-size: 0.8em;
    text-align: right;
    color: #333;
}