:root {
    /* Size of each icon */
    --theme-default-background-bright: #f4f4f4;
    --theme-default-background-dark: #333;
}


body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--theme-default-background-bright);
    color: var(--theme-default-background-dark);
}

body > div {
    width: 90vw;
    margin: auto;
    display: grid;
    gap: 10px;
    grid-template-columns: auto auto;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}
.form > input {
    width: calc(100% - 2vh);
    padding: 1vh;
    margin: 0.5vh 0;
    border: 1px solid var(--theme-default-background-dark);
    border-radius: 5px;
}

.buttons{
    /*is 2 grid columns wide*/
    grid-column: 1 / span 2;
    width: 100%;
}

.buttons > input {
    width: 100%;
    padding: 1vh;
    margin: 0.5vh 0;
    border: 1px solid var(--theme-default-background-dark);
    border-radius: 5px;
    background-color: var(--theme-default-background-dark);
    color: var(--theme-default-background-bright);
    cursor: pointer;
}