canvas{
    position: absolute;
    top: 60px;
    left: 0;
    pointer-events: none;
}

#bg{
    z-index: 0;
    background-color: green;
}
#pbg{
    z-index: 1;
}
#fg{
    z-index: 2;
}
.modal{
    position: relative;
    top: calc(100vh / 4);
    z-index: 10;
    display: none;
    max-width: fit-content;
    max-height: fit-content;
    background-color: #222;
    border: 2px solid #111;
    border-radius: 8px;
    text-align: center;
}

.modal .mheader{
    color: #eee;
    padding: 0.5em;
    margin: 1em;
    border-bottom: 1px solid #333;
}

.modal .mcontent{
    color: #eee;
    padding: 0.5em;
    margin: 1em;
}

.modal .mfooter{
    color: #eee;
    padding: 0.5em;
    margin: 1em;
    border-top: 1px solid #333;
}

button{
    padding: 0.5em 1em;
    border: none;
    border-radius: 4px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border: none;
    cursor: pointer;
    color: #eee;
}


button:focus{
    outline: none;
    accent-color: linear-gradient(135deg, #8c33ed, #4797fe);
}

button:hover{
    opacity: 0.9;
    transform: scale(1.05);
}

body{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s, color 0.5s;
}

select{
    margin: 1em;
    padding: 0.2em;
}

body.light{
    background-color: #f0f0f0;
    color: #222;
}

body.light select, body.light span{
    background-color: #fff;
    color: #222;
    border: 1px solid #ccc;
}


body.dark{
    background-color: #222;
    color: #eee;
}

body.dark select, body.dark span{
    background-color: #333;
    color: #eee;
    border: 1px solid #555;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: large;
}

body.light header{
    background-color: #eee;
    color: #222;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

body.dark header{
    background-color: #222;
    color: #eee;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
}

.popup_window{
    display: none;
    width: fit-content;
    background-color: #333;
    color: #eee;
    text-align: center;
    border-radius: 6px;
    padding: 0.5em 0;
    position: absolute;
    z-index: 20;
    margin-left: -80px;
}

header span{
    z-index: 19;
    cursor: pointer;
}

#rawdet{
    z-index: 20;
    left: 7vw;
    bottom: -180%;
}

#procdet{
    z-index: 20;
    left: 11vw;
    bottom: -180%
}

#incomes{
    z-index: 20;
    left: 16vw;
    top: 2vw;
    bottom: -320%;
}