Cultivation/src/ui/App.css

html,
body {
  user-select: none;
  height: 100vh;
  overflow: hidden;
}

select {
  width: 217px;
  border: none;
  border-bottom: 2px solid #cecece;

  padding-right: 16px;

  text-decoration-color: #000;

  transition: border-bottom-color 0.1s ease-in-out;
}

select:focus {
  outline: none;
  border-bottom-color: #ffd326;
}

#root,
.App {
  height: 100%;
}

.App {
  background-size: cover !important;
  background-position: bottom !important;
}

.TopButton {
  height: 60%;
  margin: 0px 10px;

  color: #c5c5c5;
  transition: color 0.1s ease-in-out;
}

.TopButton span {
  display: inline-block;
  line-height: normal;
  border-bottom: 1px solid #c5c5c5;
}

.TopButton img {
  filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%);

  transition: filter 0.1s ease-in-out;
}

.TopButton:hover {
  color: #fff;
  cursor: pointer;
}

.TopButton:hover img {
  filter: invert(100%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(100%) contrast(100%);
  cursor: pointer;
}

.TopButton img {
  height: 80%;
  vertical-align: super;
}

#DownloadProgress {
  position: absolute;
  transform: translate(0%, -50%);
  top: 50%;
  left: 5%;
  width: 50%;
}

.MiniDownloads {
  position: absolute;
  top: 40%;
  left: 12%;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;

  /* Colored section */
  border-top: 50px solid #fff;

  position: fixed;
  top: 73%;
  left: 15%;

  z-index: 99;
}

.BottomSection {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);

  width: 100%;
  height: 160px;

  margin: 0;
  text-align: right;
}

@media (max-height: 580px) {
  .BottomSection {
    height: 150px;
  }
}

@media (max-height: 500px) {
  .BottomSection {
    height: 140px;
  }
}