body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background-color: #181818; color: #bfb; display: -ms-grid; display: grid; -ms-grid-rows: 50px auto 1fr auto; grid-template-rows: 50px auto 1fr auto; -ms-grid-columns: 20px 1fr 20px; grid-template-columns: 20px 1fr 20px; margin: 0; min-height: 100vh; } nav { grid-column: 1 / -1; } nav ul { list-style-type: none; margin: 0; display: -ms-grid; display: grid; padding: 5px 25px; grid-gap: 5px; -ms-grid-columns: (minmax(175px, auto))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(175px, auto)); } nav li { padding: 8px; } nav a { font-size: 24px; color: #000; text-decoration: none; display: block; text-align: center; } header { grid-column: 1 / -1; background-color: #181818; padding: 0; } header h1 { font-size: 40px; margin: 0; } footer { grid-column: 1 / -1; margin: 25px; } main { padding: 0 20px; grid-column: 2 / -2; background-color: #282828; } .visual { margin: 20px; width: -webkit-min-content; width: -moz-min-content; width: min-content; background-color: #000; } .controlbar { background-color: #181818; padding: 2px 5px; height: -webkit-max-content; height: -moz-max-content; height: max-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; } .controlbar button, .controlbar input { padding: 4px 6px; height: 25px; border: 1px solid #000; border: 0; cursor: pointer; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 2px; } .controlbar .slider { -webkit-appearance: none; -moz-appearance: none; outline: none; border-radius: 0; height: 25px; padding: 0; margin: 2px; cursor: pointer; } .controlbar .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 1px; width: 25px; height: 25px; background-color: #46c; margin: 0; border-radius: 0; border: 1px solid #000; } .controlbar .slider::-moz-range-thumb { /*TODO make this look the same as on chrome*/ -moz-appearance: none; width: 25px; height: 100%; background-color: #46c; margin: 0; padding: 0; border-radius: 0; border: 1px solid #000; } .controlbar label { background-color: #181818; color: #fb8; margin: 2px; font-family: 'Consolas', 'Courier New', Courier, monospace; } .controlbar .play-button { -ms-flex-preferred-size: 35%; flex-basis: 35%; } .clickable, nav li, .controlbar button, .controlbar input, .scroll-reset { background-color: #4a4; } .clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover, .scroll-reset:hover { background-color: #4af; } .clickable:active, nav li:active, .controlbar button:active, .controlbar input:active, .scroll-reset:active { background-color: #46c; } .clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled, .scroll-reset:disabled { background-color: #8b8; text-decoration: line-through; color: #000; cursor: default; } .scroll-reset { position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 25%; background-image: url("uparrow.png"); cursor: pointer; } .img-right { float: right; } /*# sourceMappingURL=style.css.map */