* { margin: 0; padding: 0; } body { background-color: #efefef; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1em; line-height: 1.4; } a { color: darkblue; } .mb { display: block; margin-bottom: 1rem; } .topnav { background-color: orangered; color: rgba(255, 255, 255, 0.87); display: flex; justify-content: space-between; padding: 1rem; } .topnav a { color: white; font-weight: bold; text-decoration: none; } .loggedin-panel { display: flex; align-items: center; } .loggedin-panel__out { background-color: transparent; border: none; color: white; cursor: pointer; font: inherit; font-weight: bold; margin-left: 1rem; appearance: none; } .main-content { margin: 2rem auto; max-width: 900px; width: 100%; } .main-content__title { font-size: 2rem; font-weight: bolder; color: gray; } .links { list-style-type: none; } .link, .form { background-color: white; padding: 1rem; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12); margin-bottom: 1rem; } .link_title { color: rgba(0, 0, 0, 0.87); font-size: 1.25rem; font-weight: bold; text-decoration: none; } .link_title:hover, .link_title:focus { text-decoration: underline; } .link__actions { align-items: center; color: rgba(0, 0, 0, 0.54); display: flex; list-style-type: none; } .link__actions li + li { margin-left: 1rem; } .link__actions a { text-decoration: none; } .link__actions a:hover, .link__actions a:focus { text-decoration: underline; } label, input, .field-validation-error { display: block; } label { font-weight: bold; } .field-validation-error { color: orangered; } .field { margin-bottom: 1rem; } .message { background-color: bisque; padding: 1rem; margin-bottom: 1rem; } .votable { align-items: center; display: flex; } .votable input[value="up"]::before { color: red; content: "test"; display: block; }