:root {
    /* Light mode variables */
    --light-background: beige;
    --light-bg: #f2f2f2;
    --light-text: #000;
    --light-link-visited: #551a8b;
    --light-result: #c3c3c3;
    --light-filter: sepia(0.5) saturate(1.5);
    /* Dark mode variables */
    --dark-background: #171616;
    --dark-bg: #222;
    --dark-text: #fff;
    --dark-link-visited: #748af1;
    --dark-result: #404080;
    --dark-filter: contrast(1.5); 
    /* could add another theme? */
    /*  Default variables if no preference set */
    --background: var(--light-background);
    --text: var(--light-text);
    --link-visited: var(--light-link-visited);
    --bg: var(--light-bg);
    --result: var(--light-result);
    --filter: var(--light-filter);
    /* I feel like there are more fun things to use filters
    for but can't think of anything now*/
}

@media (prefers-color-scheme: light) {
    :root {
        --background: var(--light-background);
        --text: var(--light-text);
        --link-visited: var(--light-link-visited);
        --bg: var(--light-bg);
        --result: var(--light-result);
        --filter: var(--light-filter);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--dark-background);
        --text: var(--dark-text);
        --link-visited: var(--dark-link-visited);
        --bg: var(--dark-bg);
        --result: var(--dark-result);
        --filter: var(--dark-filter);
    }
}

:root:has(select#colour-mode option:checked[value=dark]) {
    --background: var(--dark-background);
    --text: var(--dark-text);
    --link-visited: var(--dark-link-visited);
    --bg: var(--dark-bg);
    --result: var(--dark-result);
    --filter: var(--dark-filter);
}

:root:has(select#colour-mode option:checked[value=light]) {
    --background: var(--light-background);
    --text: var(--light-text);
    --link-visited: var(--light-link-visited);
    --bg: var(--light-bg);
    --result: var(--light-result);
    --filter: var(--light-filter);
}

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    min-width: 300px;
    /* add horizontal padding */
    margin: 0 auto;
    padding: 20px;
    line-height: 1.618;
    font-size: 1.2rem;
    background-color: var(--background);
    color: var(--text);
    filter: var(--filter);
}

footer {
    /* position: fixed; TODO lock to bottom of page not screen */
    margin-top: 100px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg);
    padding: 10px;
    text-align: center;
}

select {
    padding: 10px;
    margin: 10px;
    border: 1px solid var(--text);
    border-radius: 10px;
    color: var(--text);
    background-color: var(--bg);
    justify-self: end;
    max-height: 50px;
}

header {
    display: flex;
    flex-wrap: wrap;
}

nav {
    flex: 1;
    text-align: right;
    padding: 0px; /* not needed due to line height on ul */
    background-color: var(--bg);
    border-radius: 10px;
    margin: 10px;
    min-width: 400px;
}

nav ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
}

nav li {
    display: inline;
    /* prevent word-wrapping */
    white-space: nowrap;
    /* better for small widths (mobile) */
    /* for low widths make text shrink */
    text-size-adjust: auto; 
    line-height: 2;
    margin-right: 10px;
}

nav li a {
    text-decoration: none;
    color: var(--text);
}

a:not(nav li a):visited {
    color: var(--link-visited);
}


button {
    width: 200px;
    height: 70px;
    /* make button  */
    /* add inset box shadow */
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),
        inset -2px -2px 3px rgba(0, 0, 0, 0.6);
    margin: 10px;
    border: none;
    border-radius: 10px;
    /* make background gradient */
    background: linear-gradient(90deg, #ff8a00, #e52e71);
}

button:hover {
    cursor: pointer;
    font-size: 1.1em;
    transition: font-size 0.1s;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
    font-size: 1.1em;
    transition: font-size 0.1s;
    transition: transform 0.2s;
    /* change shading */
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.6),
        inset -2px -2px 3px rgba(255, 255, 255, 0.6);
}
.button-container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
}

.input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 50px;
}

.column {
    flex: 1;
    padding: 10px;
}

textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #000;
}

.result {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--text);
    border-radius: 10px;
    background-color: var(--result);
    word-break: break-all;
}

input {
    padding: 10px;
    margin: 10px;
    border: 1px solid var(--text);
    border-radius: 10px;
}

#key {
    width: 25ch;  
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    button:hover {
        transform: none;
        font-size: 1em;
    }
    button:active {
        transform: none;
        font-size: 1em;
    }
}