:root {
    --golden-cut-major: 0.618rem;
    --golden-cut-minor: 0.382rem;
}

* {
    font-family: Roboto, sans-serif;
    margin: 0;
}

html {
    font-size: 20px; /* root size, follow ups specified in rem */
}

main, header {
    padding: var(--golden-cut-major);
}

button, input {
    background-color: inherit;
    border: none;
    font-size: 1rem; /* force browsers not to downsize */
}

button {
    background-color: #223;
    border-radius: 50%;
    color: #BBF;
    cursor: pointer;
    width: 1.4rem;
    height: 1.4rem;
}

header {
    background-color: #CCC;
}

.card {
    background-color: #7BF;
    border: 0;
    border-radius: var(--golden-cut-minor);
    padding: var(--golden-cut-minor) var(--golden-cut-major);
}

.delete-btn {
    float: right;
    z-index: 100;
}

.entity {
    cursor: pointer;
}

.prototype {
    display: none;
}

#create {
    background-color: #AAA;
}

#create-btn {
    float: right;
}

#list {
    display: grid;
    grid-template-columns: 50% auto;
    gap: var(--golden-cut-minor);
    margin-bottom: var(--golden-cut-minor);
}

#mode-switch {
    float: right;
}