:root {
    color-scheme: light dark;
    --bg-color-light: white;
    /* rgb(31,31,31) = #1f1f1f recommmended bg for dark mode */
    --bg-color-dark: hsl(0, 0%, 12%);
    --on-bg-color-light: black;
    --on-bg-color-dark: white;
    --text-color-light: hsl(40, 20%, 10%); /* #1c1a17 */
    --text-color-dark: hsl(40, 20%, 90%);
    --encrypt-color-light: hsl(280, 100%, 80%);
    --encrypt-color-dark: hsl(280, 100%, 30%);
    --decrypt-color-light: hsl(194, 87%, 80%);
    --decrypt-color-dark: hsl(194, 87%, 40%);
    --text-color: light-dark(var(--text-color-light), var(--text-color-dark));
    --bg-color: light-dark(var(--bg-color-light), var(--bg-color-dark));
    --on-bg-color: light-dark(
        var(--on-bg-color-light),
        var(--on-bg-color-dark)
    );
    --encrypt-color: light-dark(
        var(--encrypt-color-light),
        var(--encrypt-color-dark)
    );
    --decrypt-color: light-dark(
        var(--decrypt-color-light),
        var(--decrypt-color-dark)
    );
    color: var(--text-color);
    background-color: var(--bg-color);
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.main-column {
    height: 95vh;
    display: flex;
    flex-direction: column;
}

.password-row {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 8px;
    align-self: center;
    display: flex;
    flex-direction: row;
}

.password-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.main-row {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 40px;
    min-height: 0; /* Fix for Firefox */
}

.column {
    width: auto;
    height: auto;
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: hsl(from var(--on-bg-color) h s l / 7%);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

button {
    margin: 0px 12px 12px 12px;
    width: min-content;
    padding: 12px 20px;
    align-self: center;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover {
    filter: brightness(120%);
}

button:active {
    filter: brightness(130%);
}

button#encrypt-button {
    background-color: var(--encrypt-color);
}

button#decrypt-button {
    background-color: var(--decrypt-color);
}

textarea {
    flex-grow: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    resize: none;
    font-size: 16px;
    width: auto;
    height: auto;
}

textarea:focus {
    outline: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.file-encryption-link-wrap {
    position: fixed;
    top: 16px;
    left: 32px;
    padding: 6px;
    background-color: hsl(from var(--on-bg-color) h s l / 10%);
    border-radius: 6px;
}

.file-encryption-link {
    display: inline-block;
    color: var(--text-color);
}

.file-encryption-link:hover {
    filter: brightness(120%);
}

.github-link-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-color: black;
    border-radius: 15px;
}

.github-link {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain; /* Ensures the SVG fits within the container while maintaining its aspect ratio */
    text-decoration: none;
    background-image: url("data:image/svg+xml,%3csvg%20width='98'%20height='96'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M48.854%200C21.839%200%200%2022%200%2049.217c0%2021.756%2013.993%2040.172%2033.405%2046.69%202.427.49%203.316-1.059%203.316-2.362%200-1.141-.08-5.052-.08-9.127-13.59%202.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015%204.934.326%207.523%205.052%207.523%205.052%204.367%207.496%2011.404%205.378%2014.235%204.074.404-3.178%201.699-5.378%203.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283%200-5.378%201.94-9.778%205.014-13.2-.485-1.222-2.184-6.275.486-13.038%200%200%204.125-1.304%2013.426%205.052a46.97%2046.97%200%200%201%2012.214-1.63c4.125%200%208.33.571%2012.213%201.63%209.302-6.356%2013.427-5.052%2013.427-5.052%202.67%206.763.97%2011.816.485%2013.038%203.155%203.422%205.015%207.822%205.015%2013.2%200%2018.905-11.404%2023.06-22.324%2024.283%201.78%201.548%203.316%204.481%203.316%209.126%200%206.6-.08%2011.897-.08%2013.526%200%201.304.89%202.853%203.316%202.364%2019.412-6.52%2033.405-24.935%2033.405-46.691C97.707%2022%2075.788%200%2048.854%200z'%20fill='%23f0f0f0'/%3e%3c/svg%3e");
}

.github-link:hover {
    filter: brightness(150%);
}