html {
  font: message-box;
  font-size: 100%;
  background-color: rgb(64, 64, 64);
  color: #000;
  height: 100%;
}

body {
  margin: 0;
  display: -moz-box;
  -moz-box-orient: vertical;
  width: 100%;
  height: 100%;
}

input,
button {
  font-size: inherit;
  font-family: inherit;
}

a {
  color: #bfbbb6;
  text-decoration: none;
}

.spacer {
  -moz-box-flex: 1;
}

#topSection {
  text-align: center;
}

#brandLogo {
  height: 192px;
  width: 192px;
  margin: 22px auto 31px;
  background-image: url("chrome://branding/content/about-logo.png");
  background-size: 192px auto;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(1);
}

#searchForm {
  width: 470px;
}

#searchForm {
  display: -moz-box;
}

#searchLogoContainer {
  display: -moz-box;
  -moz-box-align: center;
  padding-top: 2px;
  padding-inline-end: 8px;
}

#searchLogoContainer[hidden] {
  display: none;
}

#searchEngineLogo {
  display: inline-block;
  filter: saturate(65%);
  height: 28px;
  width: 70px;
  min-width: 70px;
}

#searchText {
  -moz-box-flex: 1;
  color: #bfbbb6;
  padding: 6px 8px;
  background-color: #181411;
  border: 1px solid;
  border-color: rgb(64, 64, 64);
  border-radius: 5px 0 0 5px;
}

#searchText:-moz-dir(rtl) {
  border-radius: 0 5px 5px 0;
}

#searchText:focus,
#searchText[autofocus] {
  border-color: rgb(128, 128, 128);
}

#searchSubmit {
  margin-inline-start: -1px;
  padding: 0 9px;
  color: #bfbbb6;
  background-color: #181411;
  border: 1px solid;
  border-color: rgb(64, 64, 64);
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
}

#searchSubmit:-moz-dir(rtl) {
  border-radius: 5px 0 0 5px;
}

#searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover,
#searchText[autofocus] + #searchSubmit {
  border-color: rgb(128, 128, 128);
  background-color: #181411;
}

#searchText + #searchSubmit:hover:active {
  border-color: rgb(64, 64, 64);
  background-color: #181411;
}

#launcher {
  display: -moz-box;
  -moz-box-align: center;
  -moz-box-pack: center;
  width: 100%;
  background-color: #181411;
  border-top: 1px solid rgb(64, 64, 64);
}

#launcher:not([session]),
body[narrow] #launcher[session] {
  display: block; /* display separator and restore button on separate lines */
  text-align: center;
  white-space: nowrap; /* prevent navigational buttons from wrapping */
}

.launchButton {
  display: -moz-box;
  -moz-box-orient: vertical;
  margin: 16px 1px;
  padding: 14px 6px;
  min-width: 88px;
  max-width: 176px;
  max-height: 85px;
  vertical-align: top;
  white-space: normal;
  background: transparent padding-box;
  border: 1px solid transparent;
  border-radius: 2.5px;
  color: #bfbbb6;
  font-size: 75%;
  cursor: pointer;
}

body[narrow] #launcher[session] > .launchButton {
  margin: 4px 1px;
}

.launchButton:hover {
  background-color: #181411;
}

.launchButton:hover:active {
  background-color: #181411;
  border-color: rgb(64, 64, 64);
}

.launchButton[hidden],
#launcher:not([session]) > #restorePreviousSessionSeparator,
#launcher:not([session]) > #restorePreviousSession {
  display: none;
}

#restorePreviousSessionSeparator {
  width: 1px;
  height: 100px;
  margin: 0 10px;
  border-left: 1px solid;
  border-left-color: rgb(64, 64, 64);
}

body[narrow] #restorePreviousSessionSeparator {
  margin: 0 auto;
  width: 512px;
  height: 3px;
}

#restorePreviousSession {
  max-width: none;
  font-size: 90%;
}

body[narrow] #restorePreviousSession {
  font-size: 80%;
}

.launchButton::before {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 6px;
  line-height: 0; /* remove extra vertical space due to non-zero font-size */
}

#downloads::before {
  content: url("chrome://abouthome/skin/downloads.svg");
}

#bookmarks::before {
  content: url("chrome://abouthome/skin/bookmarks.svg");
}

#history::before {
  content: url("chrome://abouthome/skin/history.svg");
}

#addons::before {
  content: url("chrome://abouthome/skin/addons.svg");
}

#sync::before {
  content: url("chrome://abouthome/skin/sync.svg");
}

#settings::before {
  content: url("chrome://abouthome/skin/settings.svg");
}

#restorePreviousSession::before {
  content: url("chrome://abouthome/skin/restore.svg");
  height: 32px;
  width: 32px;
  display: inline-block; /* display on same line as text label */
  vertical-align: middle;
  margin-bottom: 0;
  margin-inline-end: 8px;
}

#restorePreviousSession:-moz-dir(rtl)::before {
  transform: scaleX(-1);
}

/* [HiDPI]
 * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
 * rather than upscaling the original-size ones (bug 818940).
 */
@media not all and (max-resolution: 1dppx) {
  #brandLogo {
   background-image: url("chrome://branding/content/about-logo@2x.png");
  }
}