/* tweet.css — an embedded tweet.
 *
 * Yours: edit it, or delete the file.
 *
 * Twitter's script replaces the markup with an iframe it controls, and it sets
 * its own width inline. That is why these rules are stubborn about width and
 * centring — they are overriding something that arrives after the page has
 * loaded and does not ask.
 */

.velocity-tweet {
    width: 100%;
    text-align: center;
}

.velocity-tweet .twitter-tweet,
.velocity-tweet .twitter-tweet-rendered,
.velocity-tweet iframe[id^="twitter-widget"] {
    display: block !important;
    width: 90% !important;
    min-width: 400px !important;
    margin-inline: auto !important;
}

.velocity-tweet-small {
    width: 40%;
    margin-inline: auto;
}

.velocity-tweet-medium {
    width: 70%;
    margin-inline: auto;
}

.velocity-tweet-full {
    width: 100%;
}

.velocity-tweet-small .twitter-tweet,
.velocity-tweet-small .twitter-tweet-rendered,
.velocity-tweet-small iframe[id^="twitter-widget"],
.velocity-tweet-medium .twitter-tweet,
.velocity-tweet-medium .twitter-tweet-rendered,
.velocity-tweet-medium iframe[id^="twitter-widget"] {
    width: 100% !important;
}

@media (max-width: 500px) {
    .velocity-tweet-small,
    .velocity-tweet-medium {
        width: 100%;
    }

    /* The 400px floor above is wider than a phone. */
    .velocity-tweet .twitter-tweet,
    .velocity-tweet .twitter-tweet-rendered,
    .velocity-tweet iframe[id^="twitter-widget"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Shown when the tweet cannot be loaded — deleted, private, or the script
   blocked. A dashed box says something was meant to be here. */
.velocity-tweet-error {
    padding: 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-small);
    background: var(--paper-soft);
    color: var(--ink-faint);
    text-align: center;
}