/* =====================
   CONTAINER
===================== */

.container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;

    padding: 1.25rem;
}

/* =====================
   HEADER
===================== */

header {
    background: var(--bg-alt);

    text-align: center;

    padding: 2rem 0;
}

.site-title {
    font-size: 2rem;
    letter-spacing: 2px;
}

.site-description {
    color: var(--text-muted);
}

/* =====================
   MAIN
===================== */

main {
    background: var(--bg-alt);

    padding: 2rem;

    border-radius: var(--radius);
}

/* =====================
   FOOTER
===================== */

footer {

    margin-top: 2rem;

    padding: 2rem;

    text-align: center;

    background: var(--bg-alt);
}

.footer-links {

    margin-top: 1rem;

    margin-bottom: 1rem;
}

.footer-links a {

    margin: 0 .75rem;
}

.footer-button-container {

    text-align: center;

    margin: 2rem 0;
}

/* =====================
   FORMS
===================== */

form {

    max-width: 600px;

    margin: 2rem auto;

    padding: 1.5rem;

    background: var(--bg-card);

    border-radius: var(--radius);
}

form label {

    display: block;

    margin-bottom: .5rem;
}

form input,
form textarea {

    width: 100%;

    padding: .75rem;

    margin-bottom: 1rem;

    border:
        1px solid
        var(--accent);

    border-radius: 6px;

    background: var(--bg);

    color: var(--text);
}

form button {

    width: 100%;
}

/* =====================
   DONATION
===================== */

.donation-card {

    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}

.monero-address {

    word-break: break-all;
}

/* =====================
   SIDESHIFT
===================== */

#sideshift-modal-button {

    display: flex;

    justify-content: center;
    align-items: center;

    min-width: 13rem;
    height: 3rem;

    margin: 1rem auto;

    border: none;

    border-radius: 6px;

    background: #4caf50;

    color: #111;

    text-transform: uppercase;

    cursor: pointer;
}

#sideshift-modal-button:hover {
    opacity: .9;
}