* {
    --blue: steelblue;
    --orange: #F29F05;
    --red: #BF3604;
    --brown: #591E08;
    --border: 3px solid black;
    --border-radius: 10px;
    --yellow: #F2B705;
    --black: black;
    --box-shadow: 3px 3px 10px color(srgb 0 0 0);


    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;

    --icon-size: 16px;
}

ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    box-sizing: border-box;
    /* width: 100vw; */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

select {
    /* font-size: inherit; */
    /* font-family: inherit; */
    padding: .125rem;
    margin: 0 1rem;
    border: none;
    outline: none;
    background-color: inherit;
    text-align: end;
}

select:open {
    /* color: var(--blue); */
}


header {
    background-color: white;
    color: black;
    padding: 0.5rem 0;
    text-align: center;
    border-bottom: var(--border);
}

h1 {
    margin: 0;
}

.bg {
    background-color: var(--blue);
    box-shadow: var(--box-shadow) inset;
}

.container {
    padding-top: 1rem;
    padding-bottom: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    /* border: 2px solid black; */
}

.card {
    display: flex;
    /* display: none; */
    flex-direction: column;
    gap: 1rem;
    padding: 3rem;
    border: var(--border);
    background-color: var(--yellow);
    width: 100%;
    max-width: 800px;
    /* width: 800px; */
    /* min-width: 300px; */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.card__bottom {
    display: flex;
    /* justify-content: space-between; */
    gap: 1rem;
}



#input-root {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.input-group {
    display: flex;
    gap: .125rem;
    border: 2px solid black;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: all .2s ease-in-out;
}

.input-group:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.005);
    border-color: var(--blue);
}

.input-group:focus-within {
    border: 2px solid var(--blue);
}

.input-group:has(input:invalid) {
    border: 2px solid red;
}

.input-group__label {
    font-size: small;
    font-weight: bold;
    padding: .5rem;
    background-color: inherit;
    text-wrap: nowrap;
}

.input-group__input {
    border: none;
    padding: .125rem;
    margin: 0 1rem;
    outline: none;
    background-color: inherit;
    text-align: end;
    overflow-x: hidden;
}

.input-group__select {
    overflow-x: hidden;
}

#output-root {
    /* border-top: 1px solid black; */
    display: flex;
    border: var(--border);
    border-radius: var(--border-radius);
    background: white;
    padding: .5rem;
    min-width: 300px;
    flex: 1;
}

.card__output {
    display: flex;
    border: none;
    padding: .125rem;
    margin: 0 1rem;
    outline: none;
    gap: .125rem;
    border: var(--border);
    border-radius: 1rem;
    margin: 1rem;
}

.output--empty {
    text-align: center;
    padding: 2rem;
    font-size: large;
    color: red;
}

#lohnsteuer {
    color: var(--red);
}

#kirchensteuer {
    color: var(--brown);
}

#krankenversicherung,
#rentenversicherung,
#arbeitslosenversicherung,
#pflegeversicherung {
    color: var(--orange);
}

#netto {
    color: var(--blue);
}

.list-item__netto {
    border-radius: var(--border-radius);
    display: flex;
    gap: .125rem;
    padding: .125rem;
}

.list-item__netto:hover {
    background-color: var(--blue);
    color: white;
    cursor: copy;
}

.copy-icon__svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--blue);
    fill: white;
}

@keyframes myAnimation {
    from {
        background-color: var(--blue);
        color: white;
    }

    to {
        background-color: white;
        color: var(--blue);
    }
}

.mouseup_class {
    animation-name: myAnimation;
    animation-duration: .5s;
    animation-fill-mode: forwards;

}

.output-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-weight: bold;
}

.output-list__item {
    display: flex;
    justify-content: space-between;
}

/* space after first, third, and seventh items */
.output-list__item:nth-child(1),
.output-list__item:nth-child(3),
.output-list__item:nth-child(7) {
    margin-bottom: .5rem;
}

.list-item__value {
    text-align: end;
    padding: 0.125 .5rem;
    margin: .125rem;
}

#viz-root {
    background-color: white;
    border: var(--border);
    border-radius: var(--border-radius);
    margin-left: 1rem;
}

/*breakpoints  */
@media (max-width: 900px) {

    h1 {
        font-size: 1.5rem;
    }

    .bg {
        padding: .5rem 0;
    }

    .card {
        padding: 2rem;
        max-width: 75%
    }

    #output-root {
        flex-direction: column;
        margin-left: 0;
        min-width: initial;
        font-size: small;
    }

    .card__top {
        flex-direction: column;
        align-items: center;
    }

    .card__bottom {
        flex-direction: column;
    }

    #viz-root {
        margin: 0;
    }
}

@media (max-width: var(--sm)) {
    .container {
        width: 90vw;
    }
}

@media (max-width: var(--md)) {
    .container {
        width: 80vw;
    }
}

@media (max-width: var(--lg)) {
    .container {
        width: 70vw;
    }
}

@media (max-width: var(--xl)) {
    .container {
        width: 60vw;
    }
}

@media (max-width: var(--xxl)) {
    .container {
        width: 50vw;
    }
}