#app{ display:flex; flex-direction:column; background:#fff; max-width:100%; align-items:flex-start; justify-content:center; width:100%; padding:40px; } #app select.key-select{ width:33%; } #app select.scale-select{ width:67%; } #app button{ cursor:pointer; min-width:70px; min-height:70px; font-size:20px; color:#d35f5f; } #app .page{ display:flex; align-items:center; flex-direction:column; width:100%; } #app .wheels{ position:relative; padding:0 40px; margin-top:30px; border-top:dashed 1px #cecece; } #app .wheels .key-marker{ position:absolute; top:-33px; text-align:center; display:block; left:0; right:0; font-size:80px; color:#ffb100; } #app .wheels .circle-of-notes{ margin-top:30px; position:relative; display:flex; border-radius:400px; height:400px; width:400px; transition:all 700ms ease; } #app .wheels .circle-of-notes .wheel-spoke{ width:72px; display:flex; align-items:flex-start; justify-content:center; position:absolute; left:50%; font-size:23px; text-align:center; transform-origin:bottom; border-radius:106px; } #app .wheels .circle-of-notes .wheel-spoke button{ position:relative; z-index:3; background:none; border:none; color:#d35f5f; font-size:25px; font-weight:600; } #app .wheels .circle-of-notes .wheel-spoke button .chord-symbol{ opacity:0.5; } #app .wheels .circle-of-notes .wheel-spoke.note{ height:50%; top:25%; } #app .wheels .circle-of-notes .wheel-spoke.note button{ font-size:44px; } #app .wheels .circle-of-notes .wheel-spoke.note button span{ color:#d35f5f; } #app .wheels .circle-of-notes .wheel-spoke.note button.inactive{ opacity:0.3; } #app .wheels .circle-of-notes .wheel-spoke.note button.inactive span{ color:#d35f5f; } #app .wheels .circle-of-notes .wheel-spoke.note.active{ opacity:0.3; } #app .wheels .circle-of-notes .wheel-spoke.numeral{ height:50%; top:25%; } #app .wheels .circle-of-notes .wheel-spoke.numeral:first-of-type{ z-index:2; } #app .wheels .circle-of-notes .wheel-spoke.numeral button{ margin-top:48px; display:flex; align-items:center; flex-direction:column; } #app .wheels .circle-of-notes .wheel-spoke.numeral button .chord-symbol{ display:block; line-height:25px; min-height:18px; font-size:29px; } #app .wheels .circle-of-notes .wheel-spoke.numeral button .numeral{ display:flex; font-size:30px; border-radius:60px; height:40px; width:40px; align-items:center; justify-content:center; } #app .wheels .circle-of-notes .wheel-spoke.numeral.active{ color:#d35f5f; } #app .wheels .circle-of-notes .wheel-spoke.numeral.inactive{ background:rgba(255, 255, 255, 0.85); } #app .wheels .circle-of-notes .wheel-spoke.numeral.inactive button{ color:#d35f5f; } #app .wheels .circle-of-numerals{ margin-top:30px; position:relative; display:flex; border-radius:400px; height:400px; width:400px; transition:all 700ms ease; } #app .wheels .circle-of-numerals .wheel-spoke{ width:72px; display:flex; align-items:flex-start; justify-content:center; position:absolute; left:50%; font-size:23px; text-align:center; transform-origin:bottom; border-radius:106px; } #app .wheels .circle-of-numerals .wheel-spoke button{ position:relative; z-index:3; background:none; border:none; color:#d35f5f; font-size:25px; font-weight:600; } #app .wheels .circle-of-numerals .wheel-spoke button .chord-symbol{ opacity:0.5; } #app .wheels .circle-of-numerals .wheel-spoke.note{ height:50%; top:25%; } #app .wheels .circle-of-numerals .wheel-spoke.note button{ font-size:44px; } #app .wheels .circle-of-numerals .wheel-spoke.note button span{ color:#d35f5f; } #app .wheels .circle-of-numerals .wheel-spoke.note button.inactive{ opacity:0.3; } #app .wheels .circle-of-numerals .wheel-spoke.note button.inactive span{ color:#d35f5f; } #app .wheels .circle-of-numerals .wheel-spoke.note.active{ opacity:0.3; } #app .wheels .circle-of-numerals .wheel-spoke.numeral{ height:50%; top:25%; } #app .wheels .circle-of-numerals .wheel-spoke.numeral:first-of-type{ z-index:2; } #app .wheels .circle-of-numerals .wheel-spoke.numeral button{ margin-top:48px; display:flex; align-items:center; flex-direction:column; } #app .wheels .circle-of-numerals .wheel-spoke.numeral button .chord-symbol{ display:block; line-height:25px; min-height:18px; font-size:35px; } #app .wheels .circle-of-numerals .wheel-spoke.numeral button .numeral{ display:flex; font-size:30px; border-radius:60px; height:40px; width:40px; align-items:center; justify-content:center; } #app .wheels .circle-of-numerals .wheel-spoke.numeral.active{ color:#d35f5f; } #app .wheels .circle-of-numerals .wheel-spoke.numeral.inactive{ background:rgba(255, 255, 255, 0.85); } #app .wheels .circle-of-numerals .wheel-spoke.numeral.inactive button{ color:#d35f5f; } #app .wheels .circle-of-notes.circle-of-notes{ position:relative; z-index:3; } #app .wheels .circle-of-numerals.circle-of-notes{ position:relative; z-index:3; } #app .wheels .circle-of-notes.circle-of-numerals{ pointer-events:none; position:absolute; top:0; z-index:3; } #app .wheels .circle-of-numerals.circle-of-numerals{ pointer-events:none; position:absolute; top:0; z-index:3; } #app .text-box{ width:100%; align-items:center; } #app .text-box .readable-notes{ display:flex; flex-direction:column; padding:30px 0; } #app .text-box .readable-notes .note{ display:flex; font-size:16px; font-weight:600; color:#d35f5f; background:none; border-radius:0px; border-bottom:0; min-width:48px; min-height:32px; align-items:center; justify-content:center; } #app .text-box .readable-notes .note .numeral{ cursor:pointer; } #app .text-box .readable-notes .note.inactive{ display:none; color:#b4b4b4; font-size:14px; } #app .text-box .readable-notes .chords{ display:flex; flex-direction:row; justify-content:space-between; } #app .text-box .controls .key-scale-box{ display:flex; padding:30px 0; } #app .text-box .controls .extra-settings{ display:flex; } #app .text-box .controls .extra-settings .field{ display:flex; flex-direction:column; width:33%; align-items:center; text-align:center; } @media only screen and (max-width:400px){ #app{ transform:scale(0.8); } }