/* BASE */
body {
    margin: 0;
    background: #f5f1e8;
    font-family: Arial, sans-serif;
    color: black;
    cursor: url('https://cur.cursors-4u.net/cursors/cur-2/cur116.cur'), auto;
}

/* LAYOUT */
.wrapper {
    width: 920px;
    margin: 20px auto;
}

.block {
    border: 4px solid black;
    padding: 14px;
    margin: 12px;
}

/* COLORS */
.pink { background: #ff1493; color: #ffe600; }
.teal { background: #00ced1; }
.lime { background: #a8ff04; }
.yellow { background: #ffe600; }
.blue { background: #4169e1; color: white; }
.black { background: #111; color: white; }

/* TYPO */
h1 {
    font-size: 44px;
    margin: 0;
    font-weight: 900;
}

h2 {
    font-size: 22px;
    margin: 10px 0;
    font-weight: bold;
}

h3 {
    margin: 8px 0;
}

/* GRID */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
    min-width: 260px;
}

/* BUTTON */
.button {
    display: inline-block;
    padding: 10px 14px;
    border: 3px solid black;
    background: #ffe600;
    font-weight: bold;
    text-decoration: none;
    color: black;
}

/* BUTTON INTERACTIONS */
.button:hover {
    background: #ff1493;
    color: #ffe600;
    transform: rotate(-2deg) scale(1.05);
}

.button:active {
    transform: scale(0.95) rotate(-2deg);
    background: #ff1493;
    color: #ffe600;
}

.button:focus {
    background: #ff1493;
    color: #ffe600;
}

/* LINKS */
a {
    color: blue;
}

a:hover {
    background: yellow;
    color: red;
    text-decoration: none;
}

/* STICKERS */
.sticker {
    display: inline-block;
    padding: 5px 8px;
    border: 2px solid black;
    background: #ff1493;
    color: white;
    font-size: 12px;
    transform: rotate(-8deg);
    margin: 5px;
}

.sticker:hover {
    transform: rotate(5deg) scale(1.2);
    background: #a8ff04;
    color: black;
}

.sticker:active {
    transform: scale(1.2) rotate(6deg);
    background: #a8ff04;
}

/* MARQUEE */
.marquee {
    background: black;
    color: #a8ff04;
    padding: 6px;
    font-weight: bold;
}

/* GIF */
.gif-row img {
    margin: 5px;
}

/* FOOTER */
.footer {
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
}

/* CHAOS */
.tilt { transform: rotate(2deg); }
.tilt2 { transform: rotate(-3deg); }

/* MOBILE FIX */
@media (max-width: 768px) {
    .wrapper {
        width: 100%;
    }

    .row {
        flex-direction: column;
    }
}