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: center !important;
}

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

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

.TopButton:hover {
  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;

  backdrop-filter: blur(10px);
  box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%);

	margin: 0;
	padding: 0;
}

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

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