* {
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s;
}
#backgroundArt {
  position: absolute;
  width: 100vw; height: 100vh;
  background: linear-gradient(135deg, rgba(78,113,153,1) 0%,rgba(94,160,214,1) 50%,rgba(193,77,77,1) 51%,rgba(226,156,156,1) 100%);
}
#warpAll {
  position: absolute;
  left: 7.5vw; top: 20vh;
  width: 85vw; height: 60vh;
  border-radius: 1vh; box-shadow: 0 0 25px #fff;
  background-color: rgba(255, 255, 255, 0.4);
}
#welcomeTxt {
  margin-left: 2vw;
  font-size: 4vh; color: #444; font-weight: bolder; text-shadow: 0.4vh 0.4vh 0 #888;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#welcomeTxt > span {
  background: linear-gradient(to right, #f22, #22f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 4.8vh;
  text-shadow: none;
}
#dropFile {
  margin: 2vh 0 0 10vw; padding: 7vh 0 0 0;
  width: 65vw; height: 13vh;
  text-align: center; font-size: 2vh; color: #333; text-shadow: 0 0 0.1vh #333;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border: 2px dashed #333;
  background-color: rgba(200, 200, 200, 0.2);
  cursor: pointer;

  transition: all 0.2s;
}
#dropFile:hover {
  transform: scale(1.05);
  background-color: rgba(200, 200, 200, 0.4);
}
#transferProgress {
  margin-left: 5%; padding-left: 5%;
  width: 85%; height: 3vh;
  color: white;
  background-color: #888;
}
#downloadFile {
  margin: 5vh auto 0 auto; padding-top: 1vh;
  width: 30vw; height: 4vh;
  color: #eee; text-align: center; font-size: 2.5vh;
  box-shadow: 0.55vh 0.55vh 0.3vh #666;
  background-color: rgba(40, 40, 40, 0.3);
  cursor: pointer;

  transition: all 0.1s;
}
#downloadFile:hover {
  transform: scale(1.1);
  background-color: rgba(40, 40, 40, 0.6);

  transition: all 0.5s;
}
#downloadFile:active {
  transform: scale(1);
  color: #000;
  background-color: rgba(255, 255, 255, 0.7);

  transition: all 0s;
}
@keyframes goApper {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#deleteEffect {
  margin: 2vh 0 0 12.5vw;
  width: 60vw; height: 20vh;
  background-color: rgba(200, 200, 200, 0.4);
  border-radius: 0.5vh; box-shadow: 0 0 1vh #fff;
}
#deleteEffect > p {
  margin-left: 0.5vh;
  color: #f44; font-size: 3vh;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.delEffButton {
  display: block; float: left;
  margin: 0.5vh 2vw; padding: 0.5vh 0 0 0;
  width: 16vw; height: 3.5vh;
  font-size: 2vh; text-align: center; color: #fff; text-shadow: 0 0 0.3vh #fff;
  box-shadow: 0.3vh 0.3vh 0.3vh #222;
  cursor: pointer;
  transition: all 0.2s;
}
.delEffButton:hover {
  transform: translateX(-0.2vh) translateY(-0.2vh);
  box-shadow: 0.5vh 0.5vh 0.5vh #333;
}
.delEffButton:active {
  transform: translateX(0.3vh) translateY(0.3vh);
  box-shadow: 0 0 0 #fff;
  transition: all 0s;
}
.effYes {
  background-color: rgba(124, 227, 45, 0.4);
}
.effNo {
  background-color: rgba(227, 72, 45, 0.4);
}
#infoText {
  margin-top: 0.5vh;
  width: 100%;
  text-align: center; font-size: 1.6vh; color: #222; text-shadow: 0 0 0.3vh #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#transferAlert {
  margin-top: 1vh;
  width: 100%;
  font-style: 1.2vh; color: rgba(255, 20, 20, 1); text-align: center;
}