:root {
    --level1: solid 1px red; 
    --level2: solid 1px orange; 
    --level3: solid 1px yellow;
    --level4: solid 1px green; 
    --level5: solid 1px blue; 
    --level6: solid 1px indigo; 
    --level7: solid 1px black;
    --level8: solid 1px white;  
  }

html {
    box-sizing: border-box;
    background-color: #95a5a5; 
  }

*, *:before, *:after {
    box-sizing: inherit;
    padding: 0; 
    margin: 0; 
  }

  body {
    /* border: var(--level1);  */
    display: grid;
    grid-template-rows: auto 1fr;  
    grid-template-columns: 2.5fr 1fr; 
    padding: 0; 
    margin: 0; 
  }

  h2 {
    text-align: center;
    /* border: var(--level2);  */
    grid-column: 1/3; 
  }

  .container-holder {
    /* border: var(--level2);  */
    justify-items: center;
    height: 100%; 
  }

.container {
    /* border: var(--level3);  */
    /* border: var(--level7);  */
    width: 55%; 
    display: flex; 
    margin: 0 auto; 
    background-color: #ffffff;
    aspect-ratio: 1; 
    flex-flow: column wrap; 
    justify-content: space-evenly; 
    align-content: stretch; 
}

#container {
    grid-column: 1/2; 
    justify-items: center; 
    align-self: end; 
}

.controls {
    /* border: var(--level2);  */
    height: 100%; 
    display: grid; 
    grid-template-rows: 1fr 1fr; 
    grid-template-columns: 1fr 1fr;
}

.cell {
    flex: 1 1; 
    /* border: var(--level2);  */
    border: rgba(128, 128, 128, 0.25) solid .25px; 
    width: auto; 
    /* background-color: yellow; */
}

.cell:hover {
    /* cursor: pointer; */
}

#grid-size {
    /* appearance: slider-vertical;  */
}