* { box-sizing: border-box; } html, body { font-family: sans-serif; margin: 0; } a { color: currentColor; text-decoration: none; } a.stretched:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } header a:hover { opacity: 0.5; } header { width: 100%; display: flex; justify-content: start; padding: 0 16px; margin: 16px 0; font-size: 32px; } header > * { flex-shrink: 0; } header .title { margin: 0; margin-right: 32px; font-size: 32px; font-weight: normal; } main { margin: 16px 0; padding: 0 16px; } .path-slash { margin: 0 4px; } .parent { /* color: rgb(147, 149, 161); */ } .search, .print { position: relative; display: inline-block; height: 32px; margin-left: auto; overflow: hidden; flex: 0 0 32px; transition: flex 0.3s ease-in; } .search:hover { transition: flex 0.6s ease-out; flex: 1 0 auto; } .search svg, .print svg { width: 32px; height: 32px; padding: 4px; margin: 0; } .search input { border: none; width: 100%; height: 100%; position: absolute; top: 0; left: 32px; outline: none; border-bottom: 1px solid currentColor; font-size: 32px; padding: 0; padding-left: 4px; background: none; }