:root {
  --ratio: 16 / 9;
  --height: 100vmin;
  --width: calc(var(--width) * var(--ratio));
}

*{
  user-select:none
}
.main{
  width: var(--width);
  height: var(--height);
  display:flex;
  flex-direction: row;
  box-sizing:border-box;
  overflow:hidden;
}
.main > .col {
  min-width: 120px;
}

#gparams{
  background: hotpink;
  flex: 0 0 8%;
  display:none;
}
#workspace{
  background: black;
  display:flex; 
  flex: 0 2 100%;
  flex-direction: column;
}
#fxmod{
  flex: 0 0 8%;
  background: hotpink;

  display:none;
}


#master, #modchain{
  height:100px;
  background: yellow;
  flex: 0 0 10%;
  display:flex;
  flex-direction: row;
}
#modchain{
  background:forestgreen;
}
#controls{
  background: forestgreen;
  flex:0 0 100%;
}

#para{
  background: hsla(240, 20%, 20%, 1);
  height: 100%;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.col{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
  
}

#fxmod > div {
}
#fxmod > .col{
}

.col .ico{
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid black;
}

.icon{
  font-size: 54px;
  line-height: 50%;
}
#envelopes .icon, #feedback .icon{
  font-size:45px;
}
.ital{
  font-style: italic;
}
.iocontrols {
  height:22vmin;
  width:22vmin;
  padding:11px;
}
.iocontrols label{
  font-size:14px;
  margin: 0 0 0 1em;
} 

.iocontrols p {
  
}