#body{
    margin: 0px;
    width:100%; 
    height:100vh; 
    display:flex; 
    overflow: hidden;
}

.menu{
    background-color: burlywood;
    display:flex;
    flex-direction: column;
    gap: 4px;
    flex:1 1 auto;
    margin:2px;
    font-size: 20px;
    max-width: 210px;
    min-width: 210px;
    overflow-y: auto;
}

.menu>div{
    display: flex;
    flex: 1 1 auto;
    background-color:tomato;
    border: 2px solid black;
    font-size: 17px;
    max-height: 20px;
    justify-content: center;
}

.menu>div>input{
    width: 100%;
    border-right-width: 0px !important; /*this turns of the border between input and div containing the unit*/
    border: 1px solid #555; 
}

.menu>div:hover{
    box-shadow: 0px 4px 10px #00000075;
}

.menu>button{
    background-color: coral;
}


.menu>button:hover{
    box-shadow: 0px 4px 10px #00000075;
}

.energy{
    background-color: gold !important;
}

.colours{
    background-image: linear-gradient(to right, red, lawngreen, deepskyblue) !important;
}

.auto{
    background-image: radial-gradient(circle at center,crimson,purple,darkblue) !important;
}

#content{
    display: flex;
    flex: 1 1 auto;
    max-width: 100%;
    flex-direction: row;
}

#c1{
    display:flex;
    flex: 0 0 auto;
    min-width: 60%;
    max-width: 60%;
    z-index: 1;
}

#c2{
    display:flex;
    flex: 0 0 auto;
    min-width: 40%;
    max-width: 40%;
}

#canvas{
    display: flex;
    flex: 1 1 auto;
    position: absolute; 
}

#canvas2{
    display: flex;
    flex: 1 1 auto;
    position: absolute;
    background-image: linear-gradient(to right bottom, lightcoral,sandybrown,darkseagreen);
}

#canvasText{
    margin: 10px; /*Makes text not start right in the upper right corner of canvas*/
    letter-spacing: 0.5px;
    font-size: 17px;
    display: flex;
    flex: 1 1 auto;
    position: absolute; 
    z-index: 0;
    color: white;
}


#tutorialPointer{
    margin-top: 33px; /*Makes text not start right in the upper right corner of canvas*/
    letter-spacing: 0.5px;
    font-size: 17px;
    display: flex;
    flex: 1 1 auto;
    position: absolute; 
    z-index: 10;
    color: white;
}

.unit{
    display: flex;
    flex: 1 1 auto;
    max-width: 20px;
    min-width: 20px;
    background-color: white;
    border: 1px solid #555;
    border-left-width: 0px; /*Removes border towards input*/
}

.padding{
    gap: 10px;
}