:root{
  --square-size: 40px;
  --grid-width:20;
  --grid-height:20;
  --color1:black;
  --color2:orange;
  
}
.show {
  display: block !important;
}

#squareContainer {
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--square-size)* var(--grid-width) );  
    height: calc(var(--square-size)* var(--grid-height) );  
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1000; 
}

body {
  background-image: linear-gradient(90deg, #7d5fff, #7158e2);
  font-family: "Roboto", sans-serif;
  height: 100vh;
}

.square {
  position: relative;
  height: var(--square-size);
  width: var(--square-size);
  background-color: var(--color1);
  transition: background-color 0.5s linear;
  color:white;
  font-size:calc(var(--square-size) / 3);
  text-align: center;
}
.dropDownDiv{
  width: 220px;
  display: none;
  position: absolute;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  background-color:rgb(101, 136, 207);
}
#rightDiv{
  float:right;
}
#rightDiv * {
  margin-bottom: 10px;
}
#btnDiv * {
  margin-bottom: 10px;
}
.number{
  font-size:30px;
}
#patternStringOutput{
  width:300px;
}
.dropDownButton{
  height:40px;
  width:150px;
  display:inline;
}
#settings1Div button{
  display:block;
  margin-bottom: 10px;
  height:50px;
}