@keyframes subtle-rainbow {
    0% {background-color: #33114499;}
    50% {background-color: #44113399;}
    100% {background-color: #33224499;}
}

.overlay {
    visibility: hidden;
    position: absolute;
    z-index: 2;

    top: 0%;
    left: 0%;

    height: 100%;
    width: 100%;

    background-color: #33224499;

    animation: subtle-rainbow 4s infinite;

    &.up {
        visibility: visible;
    }
}

.within-overlay {
    visibility: hidden;
    position: absolute;
    z-index: 3;

    border: var(--border-thin);
    padding: 5px;

    transform: translate(0, -100vh);
    scale: 0%;
    transition: scale 0.3s ease-in, bottom 0.3s ease-in, transform 0.3s ease-in, visibility 0.3s ease-in;

}

.overlay.up .within-overlay {
    scale: 100%;
    bottom: 0%;
    transform: translate(0, 0);
    transition: scale 0.3s ease-in, bottom 0.3s ease-in, transform 0.3s ease-in;
}

.overlay.up * {
    visibility: visible;
}

.within-overlay * {
    position: relative;
}

/* ----- */

.new-poem-container {
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;

    background-color: ghostwhite;

    display: flex;
    flex-flow: row wrap;
    align-content: stretch;
}

.new-poem-options-container {
    flex: 1 0 auto;
    width: 240px;
    height: auto;
}

.new-poem-preview-container {
    flex: 1.5 0 auto;
    height: 100%;
    width: 360px;

    .new-poem-preview {
        box-sizing: border-box;

        width: clamp(0px, 96%, 600px);
        height: auto;
        aspect-ratio: 503 / 307;

        margin: 2% auto;
    }

    button {
        position: absolute;
        left: 30%;

        width: 40%;
    }
}

.new-poem-selector-container {
    position: relative;
    width: calc(100% - 16px);
    margin: 8px;

    label.new-poem-selector-label {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: var(--font-size-large);
        padding: 10px 0;
    }

    .new-poem-selector-tabs {
        width: calc(100% - 16px - 1vw - 15px);
        list-style: none;
        padding: 0;
        margin: 0;


        li {
            display: inline;
            border: var(--dark-manila) solid;
            border-width: 3px 3px 0px 3px;
            background-color: var(--dark-manila);
            border-radius: 5px 5px 0 0;

            &.selected {
                border: var(--manila) solid;
                background-color: var(--manila);
                padding-bottom: 2px;
            }


            a {
                cursor: pointer;
                padding: 0 10px;
            }

        }
    }

    .new-poem-selector {
        width: calc(100% - 16px - 1vw);
        background-color: var(--manila);
        border-top: 8px var(--manila) solid;
        border-bottom: 8px var(--manila) solid;
        border-left: calc(8px + 0.5vw) var(--manila) solid;
        border-right: calc(8px + 0.5vw) var(--manila) solid;
        border-radius: 0 15px 15px 15px;

        &:focus {
            outline: none;
        }

        option {
            cursor: pointer;
            background-color: ghostwhite;
            font-family: var(--body-font), monospace;
            font-size: var(--font-size-medium);
            margin: 2px 5px;
        }
    }
}