:root {
    --bit-dark-blue: #002B5E;
    --bit-light-blue: #6CAEDF;
    --bit-hilight-color: #e5e52f;
}

@media not (prefers-color-scheme: dark) {
    :root {
        --main-text-color: #000000;
        --main-background-color: #F0F0F0;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-background-color: #333333;
        --main-text-color: #CCCCCC;
    }
}

.overlay-container {
    z-index: 1001;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    overflow: auto;
    position: fixed;
    background-color: var(--main-background-color);
    color: var(--main-text-color);
    transition: all 200ms;
    border: 1px solid #000000;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

.overlay-outer {
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1002;
}

.overlay-outer .overlay-bar {
    padding: 0.2em 1em;
    background-color: var(--bit-dark-blue);
    border-bottom: 1px solid #333333;
    transition: all 200ms;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5em;
    text-align: left;
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1002;
}

.overlay-outer .overlay-button {
    font-size: 1.8em;
    color: #FFFFFF;
    transition: all 200ms;
    cursor: pointer;
    display: inline-block;
    text-shadow: 0 0 2px rgba(255, 255, 255 0.4);
    text-align: left;
}

.overlay-outer .overlay-button:hover {
    color: #6CADDF;
}

.overlay-outer .overlay-content {
    margin-top: 3rem;
}