.header-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 3px; height: 8%; width: 100%; grid-auto-flow: row; margin-bottom: 1%; } .header-button { align-self: stretch; background-color: #210c0c; border: 1px solid #ff7200; color: #ff7200; font-weight: bold; height: 100%; width: 100%; font-size: large; font-weight: bold; } .button-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 3px; height: 90%; width: 100%; grid-auto-flow: row; } .grid-button { text-align: center; align-self: stretch; background-color: #210c0c; border: 1px solid #ff7200; color: #ff7200; font-weight: bold; font-size: x-large; height: 100%; width: 100%; } .key-container { display: grid; grid-template-columns: repeat(59, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 3px; height: 50%; width: 100%; grid-auto-flow: row; } .track-container { height: 40%; width: 100%; } .track-button { align-self: stretch; background-color: #210c0c; border: 1px solid #ff7200; color: #ff7200; height: 100%; width: 100%; } .grid-key { text-align: center; align-self: stretch; grid-column-end: span 4; background-color: #210c0c; border: 1px solid #ff7200; color: #ff7200; font-weight: bold; height: 100%; width: 100%; font-size: large; font-weight: bold; } .grid-key-empty { text-align: center; align-self: stretch; grid-column-end: span 4; height: 100%; width: 100%; background: #0c0c0c; border: 0px; visibility: hidden; } .grid-key:active { background-color: #ff7200; color: #210c0c; } body, .content, .container { height: 100%; width: 100%; background: #0c0c0c; } body, html { height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden; margin:0; padding:0; position: fixed; }