button {
    width: 100%;
    height:100%;
    min-height: 50px;
    color: white;
    background-color: #333;
    font-size: large;
}

input#level_name {
    height: 3em;
    width: 20em;
    font-size: 2rem;
    text-transform: capitalize;
}

button.level_button {
    width: 33%;
    height: 3rem;
}

div#game {
    display: grid;
    grid-template-rows: 1fr 1fr 1f 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(9, 1fr);
}

div#p5canvas {
    grid-row: 1 / 4;
    grid-column: 2 / -1;
}

div#status {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    background-color: aliceblue;
}

div#level-info {
    
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
        
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: xx-large;
    background-color: rgb(236, 220, 220);
    text-align: center;
    height: 100%;
}

button#play {
    grid-row: 3 ;
    grid-column: 1 ;
}

button.active {
    background-color: #666;
}

button#solution {
    grid-row: 4;
    grid-column: 1;
}

button#source {
    grid-row: 5;
    grid-column: 1;
}

button#destination {
    grid-row: 6;
    grid-column: 1;
}

button#barrier {
    grid-row: 7;
    grid-column: 1;
}


button#clear_level {
    grid-row: 8;
    grid-column: 2;
}

button#clear_solution {
    grid-row: 8;
    grid-column: 3;
}
button#eraser {
    grid-row: 8;
    grid-column: 4;
}

div#solution-red {
    grid-row: 4;
    grid-column: 2;
}
div#solution-green {
    grid-row: 4;
    grid-column: 3;
}
div#solution-blue {
    grid-row: 4;
    grid-column: 4;
}


div#source-red {
    grid-row: 5;
    grid-column: 2;
}
div#source-green {
    grid-row: 5;
    grid-column: 3;
}
div#source-blue {
    grid-row: 5;
    grid-column: 4;
}
div#source-vx {
    grid-row: 5;
    grid-column: 5;
}
div#source-vy {
    grid-row: 5;
    grid-column: 6;
}
div#source-random {
    grid-row: 5;
    grid-column: 7;
}
div#source-charge {
    grid-row: 5;
    grid-column: 8;
}
div#source-period {
    grid-row: 5;
    grid-column: 9;
}



div#destination-red {
    grid-row: 6;
    grid-column: 2;
}
div#destination-green {
    grid-row: 6;
    grid-column: 3;
}
div#destination-blue {
    grid-row: 6;
    grid-column: 4;
}
div#destination-capacity {
    grid-row: 6;
    grid-column: 5;
}


div#barrier-red {
    grid-row: 7;
    grid-column: 2;
}
div#barrier-green {
    grid-row: 7;
    grid-column: 3;
}
div#barrier-blue {
    grid-row: 7;
    grid-column: 4;
}