@import url(/assets/styles/vars.less);

body {
  background: @body-background;
  color: @div-background-color;
  font-family: Lunarfont, Roboto, Arial, sans-serif;
  font-size: 0;
}
.container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
}
.container.home {
  top: 50vh;
  transform: translate(-50%, -50%);
}
.container > h1 {
  font-size: 32px;
  font-weight: bold;
}
.container > div > div {
  color: @text-color-dark;
  background-color: @div-background-color;
  padding: 4px 6px 0 6px;
}
.container > div {
  color: @text-color-dark;
  background-color: @div-gradient-color;
  background-image: @div-background-outline;
  background-size: 100%;
  font-size: 22px;
  padding: 8px;
}

.home-moon {
  height: 50vh;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

div.search {
  display: flex;
  justify-content: center;
}

div.search-btns {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: right;
}

div.search-btns > img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  float: right;
  padding-left: 6px;
  cursor: pointer;
}

input.search {
  background-color: rgba(0,0,0,0);
  color: @text-color-dark;
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 28px;
  padding: 6px 6px 0 6px;
  font-family: Lunarfont, Roboto, Arial, sans-serif;
  width: 80%;
}