:root {
    --button-size: 32px;
    --settings-area-width: 192px;
    --page-margin: #1e0915;
    --primary-text: #ffeff6;
    --secondary-text: #ffcedd;
    --inverted-text: #1e0915;
    --text-selection: rgba(119, 68, 255, 0.99);
    --link-accent: #df88ff;
    --ui-widget-background: #42142e;
    --ui-widget-focus: #762b4c;
}

::selection {
    background: var(--text-selection);
}

::-moz-selection {
    background: var(--text-selection);
}

.copyText {
    position: absolute;
    top: 36px;
    height: 24px;
    width: 64px;
    background: var(--play-widget-background);
    font-size: 14px;
    text-align: center;
    align-content: center;
    left: -16px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
}

.copyText::before {
    content: "Copied";
}

a {
    color: var(--link-accent, #98f);
}

html {
    background: var(--page-margin, black);
    overflow-x: hidden;
    font-size: large;
    font-family: 'B612', sans-serif;
    line-height: 1.3;
    color: var(--primary-text, white);

    background-image: url(./sb-envelopes/image_assets/stripesbg.gif);
    background-size: 32px;
}

.containers {
    display: flex;
    flex-direction: column;
}
.archiveContainers {
    display: flex;
    flex-direction: row;
}

.divider {
    flex: 1;
    background:var(--ui-widget-background);
    border: 6px double var(--ui-widget-focus);
    margin:0.5em;
    border-radius: 10px;
    padding: 0.5em;
}

h1 {
    margin: 0.1em;
    margin-bottom: 0.2em;
}
h2 {
    margin: 0.1em;
    margin-bottom: 0.2em;
}