:root {
    --bg-color: #1b1b1d;
    --content-bg-color: black;
    --text-color: white;

    --bingo-cell-border-color: #333;
    --bingo-cell-bg-color: #1c1c1c;
    --bingo-cell-bg-color-hover: #525252;
    --bingo-cell-clicked-bg-color: #454545;

    --button-bg-color: var(--text-color);
    --button-color: var(--bg-color);
    --button-bg-color-hover: var(--bingo-cell-bg-color-hover);

    --warning-bg-color-hover: #454545;

    --overlay-bg-color: rgba(0, 0, 0, 0.7);
    --overlay-content-bg-color: #1b1b1b;
    --overlay-content-border-color: #454545;

    --settings-bg-color: black;
    --settings-element-bg-color: #1c1c1c;

    --settings-input-bg-color: #1b1b1d;
    --settings-input-text-color: white;
    --settings-input-border-color: #333;

    --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme='light'] {
    --bg-color: white;
    --content-bg-color: #f0f0f0;
    --text-color: black;

    --bingo-cell-border-color: #ccc;
    --bingo-cell-bg-color: #f0f0f0;
    --bingo-cell-bg-color-hover: #ccc;
    --bingo-cell-clicked-bg-color: #aaa;

    --button-bg-color: var(--text-color);
    --button-color: var(--bg-color);
    --button-bg-color-hover: #ccc;

    --warning-bg-color: rgb(255, 204, 0);

    --overlay-bg-color: rgba(255, 255, 255, 0.7);
    --overlay-content-bg-color: #f0f0f0;
    --overlay-content-border-color: #ccc;

    --settings-bg-color: #f0f0f0;
    --settings-element-bg-color: #f0f0f0;

    --settings-input-bg-color: #f0f0f0;
    --settings-input-text-color: black;
    --settings-input-border-color: #ccc;

    --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme='pink'] {
    /* Pleasant Pink theme with good contrast */
    --bg-color: #e0218a; /* A vibrant pink for the background */
    --content-bg-color: #fddde6; /* A softer, light pink for content background */
    --text-color: #e52b50; /* Black text for high contrast and readability */
    --prompt-text-color: white; /* Black text for prompts */

    --bingo-cell-border-color: #fb607f; /* A slightly darker pink for bingo cell borders */
    --bingo-cell-bg-color: #ffc0cb; /* Light pink for the bingo cell background */
    --bingo-cell-bg-color-hover: #e63e62; /* A medium pink for hover effect */
    --bingo-cell-clicked-bg-color: #e0218a; /* Vibrant pink for clicked state */

    --button-bg-color: #ffc0cb; /* Black buttons for strong contrast */
    --button-color: var(--bg-color); /* Button text in vibrant pink */
    --button-bg-color-hover: #e63e62; /* Hover effect in medium pink for buttons */

    --warning-bg-color: rgb(255, 204, 0); /* A bright yellow for warnings (keeps visibility) */

    --overlay-bg-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white overlay */
    --overlay-content-bg-color: #ffc0cb; /* Light pink background for overlay content */
    --overlay-content-border-color: #e0218a; /* Vibrant pink for overlay borders */

    --settings-bg-color: #e0218a; /* Vibrant pink for settings background */
    --settings-element-bg-color: #ffc0cb; /* Light pink for settings element background */

    --settings-input-bg-color: #fb607f; /* Medium pink for input background */
    --settings-input-text-color: black; /* Black text for inputs */
    --settings-input-border-color: #e63e62; /* Darker pink for input borders */

    --shadow-color: rgba(0, 0, 0, 0.3); /* Subtle shadow to give depth */

    body, button {
        font-family: "Emilys Candy", serif;
        font-weight: 400;
        font-style: normal;
    }
}

body {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-bottom: 1rem;
}

.root-bingo-container {
    display: flex;
    width: 100vw;
    height: calc(100vh - 3rem);
    width: calc(100vw - 1rem);
}

.bingo-container {
    display: flex;
    margin: auto auto;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 0.5rem;
    margin-bottom: 0;
    border-radius: 8px;
}

.bingo-main-container {
    background-color: var(--content-bg-color);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bingo-grid-container {
    aspect-ratio: 1 / 1;
    width: calc(100vh - 3rem);
    background-color: var(--content-bg-color);
}

.bingo-grid {
    display: grid;
    gap: 6px;
    margin: auto;
    transition: transform 0.2s ease-in-out;
}

.bingo-cell {
    border: 1px solid var(--bingo-cell-border-color);
    width: calc((100vh - 10rem)/5);
    height: calc((100vh - 10rem)/5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    background-color: var(--bingo-cell-bg-color);
    color: var(--text-color);
    border-radius: 4px;
    overflow: hidden;
    word-wrap: break-word;
    cursor: pointer;
    margin: 0;
}

.bingo-cell:hover, .bingo-cell.clicked:hover {
    background-color: var(--bingo-cell-bg-color-hover);
}

.bingo-cell.clicked {
    background-color: var(--bingo-cell-clicked-bg-color);
    color: var(--prompt-text-color);
}

button {
    padding: 10px 20px;
    border: none;
    background-color: var(--button-bg-color);
    color: var(--button-color);
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
}

button:hover {
    color: var(--button-bg-color);
    background-color: var(--button-bg-color-hover);
}

.bingo-running-warning {
    width: 20vw;
    padding: 1rem;
    margin: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 5px solid var(--text-color);
}

.bingo-running-warning:hover {
    background-color: var(--warning-bg-color-hover);
}

.overlay-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-color);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background-color: var(--overlay-content-bg-color);
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    text-align: center;
    justify-content: center;
    box-shadow: 0 4px 8px var(--shadow-color);
    border: 2px solid var(--overlay-content-border-color);
}

.settings-container {
    width: 70%;
}

.flex-row-container {
    display: flex;
    width: 100%;
}

.flex-row-item {
    width: 50%;
}

.flex-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-column-item {
    height: 50%;
}

.settings-box {
    background-color: var(--content-bg-color);
    margin: 10px;
    padding: 20px;
    border-radius: 8px;
}

.settings-element {
    background-color: var(--settings-element-bg-color);
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
}

.bingo-item-input {
    resize: none;
    width: 90%;
    height: 300px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--settings-input-bg-color);
    color: var(--settings-input-text-color);
    border: 1px solid var(--settings-input-border-color);
    box-shadow: inset 0 0 10px var(--shadow-color);
}

.bingo-dimension-input {
    width: 50px;
    padding: 5px;
    border-radius: 4px;
    background-color: var(--settings-input-bg-color);
    color: var(--settings-input-text-color);
    border: 1px solid var(--settings-input-border-color);
    box-shadow: inset 0 0 10px var(--shadow-color);
}

.notice-box {
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--bg-color);
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
    color: var(--prompt-text-color);
    box-shadow: inset 0 4px 8px var(--shadow-color);
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px
}

.button-container > button {
    margin: 0 10px;
}

.centered-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: var(--prompt-text-color);
}

.cookie-notice {
    margin-top: auto;
    color: var(--prompt-text-color);
}
