body, button, input, select, div {
    text-align: center;
    background: black;
    color: purple;
    border-color: #005600;
}

button, input, select {
    border-style: solid;
}

span {
    padding: 0em 0.3em 0em 0.3em;
}

.light-mode {
    background: white;
    color: purple;
    border-color: #50FF50;
}


.menu-button:nth-child(1) {
    background-image: linear-gradient(to bottom right, #ffff00, #555500);
}

.menu-button:nth-child(2) {
    background-image: linear-gradient(to bottom left, #00ff00, #005500);
}

.add-button {
    background-color: grey;
}

.selected-card {
    display: inline-block;
    width: 40%;
    margin-right: 20px;
}

.selected-merkmal {
    display: inline-block;
    width: 80%;
}

.merkmal-button {
    width: 80%;
}

.merkmal-div {
    display: inline-block;
    width: 30%;
}

.merkmal-select {
    width: 80%;
}

.select-card {
    margin-right: 20px;
    width: 40%;
}

.add-div {
    float: center;
    clear: both;
    margin-bottom: 0.5em;
}

.add-merkmal {
    width: 30%;
}

.warning {
    color: red;
    border: 3px;
    border-color: green; 
}

.radio-selection-div {
    padding-left: 30%;
    flex-direction: column;
    clear: both;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

.meta {
    display: flex;
    margin-bottom: 0.3em;
}

.meta-input {
    width: 33%;
}

.meta-label {
    text-align: right;
    padding-right: 0.5em;
    width: 33%;
}

.radio-selection {
    justify-content: left;
    clear: both;
}

.merkmal-selected {
    display: inline-block;
    width: 25%;
}


.remove {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.menu-button {
    display: flex;
    border: 0;
    user-select: none;
    cursor: pointer;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
}

.vertical-grid {
    display: grid;
    height: 90vh;
    grid-template-columns: 1fr;
    grid-template-rows: 50% 50%;
}