/* universal styles */ * { margin: 0; font-family: sans-serif; font-weight: lighter; } html { color: white; background-color: rgb(11, 8, 20); } button { border: 1px solid white; color: inherit; background-color: inherit; border-radius: 25rem; padding: 0.2rem 0.7rem; } button:active { background-color: darkgreen; } #start-tone { width: 12vw; height: 5vh; position: absolute; left: 45vw; top: 50%; } /* javascript utilities */ .show-on-start { display: none; } /* header styles */ header { display: block; position: sticky; background-color: black; border-bottom: 1px solid white; max-height: 25vh; width: 100%; text-align: center; padding: 2rem; top: 0; z-index: 9; } header h2 { margin: 1rem 1rem 1.5rem; } header button { margin-top: 0.75rem; } header p { padding: 0.4rem; } #navbar-tools { display: flex; } #info-button { position: absolute; text-align: center; top: 1rem; left: 1.5rem; } /* main section style */ main { display: flex; flex-direction: column; width: 100%; margin-top: 4rem; align-items: center; position: relative; z-index: 8; } /* styling for animated visuals */ .visuals { display: inline-flex; flex-direction: row; justify-content: space-between; height: 18rem; } .voice { display: inline-block; background-color: rgb(5, 5, 75); width: 20vw; height: 100%; margin: 0 1rem; } #visuals-border { display: block; width: 85vw; height: 1rem; background-color: white; margin: 3rem 0; border-radius: 15rem; } /* styling for synth control panel */ .control-row { display: inline-flex; flex-direction: row; align-items: center; margin: 1rem 0; } .button-row button { margin: 0 0.4rem; } .controls { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid white; width: 18vw; height: 25vh; margin: 1rem; } .controls h3 { margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.2em; } .controls label { display: inline-flex; flex-direction: row; } .controls label, input { margin: 0.2rem 0; } #synth-button { display: none; }