:root {
    --main-color: #e2b714;
    --caret-color: #e2b714;
    --sub-color: #aaaeb3;
    --sub-alt-color: #d1d3d8;
    --bg-color: #e1e1e3;
    --text-color: #323437;
    --error-color: #da3333;
    --error-extra-color: #791717;
    --colorful-error-color: #da3333;
    --colorful-error-extra-color: #791717;
    --success-color: #00c700;
    --info-color: #00c2ff;
    --warning-color: orange;
    --roundness: 0.5rem;
    --terminal-text-color: var(--bg-color);
    --terminal-background: var(--text-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #323437;
        --main-color: #e2b714;
        --caret-color: #e2b714;
        --sub-color: #646669;
        --sub-alt-color: #2c2e31;
        --text-color: #d1d0c5;
        --error-color: #ca4754;
        --error-extra-color: #7e2a33;
        --colorful-error-color: #ca4754;
        --colorful-error-extra-color: #7e2a33;
        --terminal-text-color: var(--text-color);
        --terminal-background: #111;
    }
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
}

a:link, a:visited {
    color: var(--sub-color);
    /* text-decoration: none; */
}

a:hover, a:active {
    color: var(--text-color);
    /* text-decoration: underline; */
}

input,textarea {
    outline: none;
    border: none;
    border-radius: .5rem;
    background: var(--sub-alt-color);
    color: var(--text-color);
    padding: .5em;
    font-size: 1em;
    caret-color: var(--text-color);
    line-height: 1.25em
}

details {
    border-radius: .5rem;
    padding: 10px;
    margin: 10px auto;
    border: 3px solid var(--sub-alt-color)
}

details:not([open]):hover {
    background-color: var(--sub-alt-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

details summary {
    cursor: pointer;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

.construction {
    border: 2px solid #f39c12;
    padding: 20px;
    background-color: #fef5e7;
    color: #e67e22;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    @media (prefers-color-scheme: dark) {
        border: none;
        background-color: #8c4100;
        color: #fef5e7;    
    }
}

.contact img {
    width: 200px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

input::placeholder {
    color: var(--sub-color);
    opacity: 1;
}

/* Default button style (normal state) */
button {
    padding: .5em;
    color: var(--text-color);
    background: var(--sub-alt-color);
    padding: .5em;
    border-radius: var(--roundness);
    border: none; /* Remove borders */
    font-size: 1em; /* Font size */
    cursor: pointer; /* Pointing hand cursor */
    transition: background-color 0.15s ease, color 0.15s ease; /* Smooth transitions */
    user-select: none;
}

/* Button hover state */
button:hover {
    color: var(--bg-color);
    background-color: var(--text-color); /* Background color on hover */
}

/* Button active state (when clicked) */
button:active {
    color: var(--bg-color); /* Text color when clicked */
    background-color: var(--sub-color); /* Background color when clicked */
}

img.emoji {
    height: 1em;
}

/* normal:
d1d3d8
323437

on hover:
text color: e1e1e3
background: 323437

when clicked:
e1e1e3
aaaeb3 */

div.withborder {
    border-radius: .5rem;
    padding: 10px;
    margin: 10px auto;
    border: 3px solid var(--sub-alt-color)
}

fieldset {
    border-radius: .5rem;
    padding: 10px;
    margin: 10px auto;
    border: 3px solid var(--sub-alt-color)
}

#status {
    font-family: "Roboto Mono", "Roboto Mono", Vazirmatn, monospace;
    /* margin-top: 15px; */
    /* background-color: var(--text-color); */
    background-color: var(--terminal-background);
    border-radius: .5rem;
    /* padding: 10px; */
    /* margin: 10px auto; */
}