@import url('https://fonts.googleapis.com/css2?family=Roboto_old&display=swap'); html, body { margin: 0; min-height: 100vh; padding: 0; } body { display: flex; flex-direction: column; font: 400 16px Roboto, "Helvetica Neue", sans-serif; } .filler { flex: 1; } .filler.top { min-height: 1em; } .filler.bottom { flex: 2; } .row { align-items: baseline; display: flex; flex-direction: row; } header, footer { background: #f5f5f5; padding: 16px; width: calc(100% - 32px); } footer { color: #616161; border-top: 1px solid #e4e4e4; font-size: 14px; margin-top: 2em; } footer a { color: inherit; text-decoration: none; } footer a + a { margin-left: 1em; } footer a:hover { text-decoration: underline; } .matter-primary, .matter-textfield-outlined, .matter-switch { /* https://www.materialui.co/colors/blue/600 */ --matter-theme-rgb: var(--matter-primary-rgb, 30, 136, 229); /* According to https://material.io/components/text-fields . */ --matter-helper-safari2: rgba(0, 0, 0, 0.42); --matter-helper-safari3: rgba(0, 0, 0, 0.87); } #banner { height: 140px; overflow: hidden; position: absolute; right: 0; top: 0; width: 140px; } #banner div { background: #c62828; /* https://www.materialui.co/colors/red/800 */ border-width: 1px 0 1px 0; border: solid white; box-shadow: 0 0 3px black; color: white; left: -90px; padding: 1ex 10em; position: relative; top: 10px; transform: rotate(45deg); z-index: 9999999; } .logo { background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat; background-size: 272px 92px; height: 92px; width: 272px; } @media (-webkit-max-device-pixel-ratio: 1),(max-resolution:96dpi) { .logo { background: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat; } } .logo-text { color: #4285f4; font: 16px/16px roboto-regular, arial, sans-serif; left: 215px; position: relative; top: 76px; white-space: nowrap; }