body {
    padding: 0%;
    margin: 0%;
    display: grid;
    grid-template-rows: 8% 15% 75% 2%;
    grid-template-columns: 15% 70% 15%;
    height: 100vh;
    width: 100vw;
    background-color: darkslategray;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

#link {
    grid-column: 3;
    grid-row: 3;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

a {
    color: aqua;
}

#title {
    grid-row: 1;
    grid-column: 1 / span 3;
    margin: auto;
}

#inputs {
    grid-row: 2;
    grid-column: 1 / span 3;
    margin: auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 20% 80%;
}

label {
    grid-row: 1;
    margin: auto;
}

textarea {
    grid-row: 2;
    margin: 1%;
    margin-top: 0%;
    margin-bottom: 0%;
}

#treeCanvas {
    grid-row: 3;
    grid-column: 2;
    background-color: rgb(28, 46, 46);
    background-image: url("../img/YurtleGrey.png");
    background-size: cover;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    margin: auto;
}

#controls {
    grid-row: 3;
    grid-column: 1;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 25% 25% 25% 25%;
    width: 100%;
    height: 100%;
}

#controls .sliderDiv {
    grid-column: 1;
    width: 80%;
    height: 50%;
    margin: auto;
}

.slider {
  width: 100%;
  height: 25px;
}