@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');

body {
    background-color: var(--background-color, white);
    color: var(--color, black)
}

#input {
    background: var(--background-color, white);
    color: var(--color, black);
    border-width: 1px;
    border-color: #767676;
}

#lightmode-button {
    display: var(--lightmode-button);
    color: black;
}

#darkmode-button {
    display: var(--darkmode-button);
}

.fake_button {
    padding: 0.2rem 0.25rem 0.08rem;
    height: 1.4rem;  
    background-color: #e9e9ed;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.fake_button:hover {
    background-color: #d0d0d7;
}

body:has(#times:checked) #input {
    font-family: 'Times New Roman', Times, serif;
}

body:has(#comic:checked) #input {
    font-family: "Comic Relief", system-ui;
}

body:has(#darkmode:checked) {
    --background-color: #212121; 
    --color: white;
    --darkmode-button: none;
    --lightmode-button: inline;
}

body:has(#lightmode:checked) {
    --background-color: white; 
    --color: blacks;
    --darkmode-button: inline;
    --lightmode-button: none;
}