body {
  background-image: url("../img/background.jpeg");
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
}

warpper {
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 0.7rem;
  line-height: 0rem;
  font-weight: 400;
  color: black;
  /* -webkit-text-stroke: 2px black; */
  -webkit-font-smoothing: antialiased;
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: center;
  margin-bottom: 10px;
  /* background: #000; */
}

.warpperBox {
  box-sizing: border-box;
  display: flex;
  color: black;
  -webkit-text-stroke: 0px;
  justify-content: center;
  /* Centers Horizontally */
  /* align-items: center; Centers vertically */
  /* background: #000; */
}

.Filebtn {
  position: absolute;
  background: radial-gradient(circle at 50% 0%, rgb(125, 203, 252) 0%, #3e9bff 64%);
  /* background-color: rgb(125, 203, 252); */
  box-shadow: inset 0 1.01rem 0.4rem -1rem #fff0,
    inset 0 -1.01rem 0.4rem -1rem #0000, 0 -1.02rem 0.4rem -1rem #fff0,
    0 1rem 0.4rem -1rem #0000, 0 0 0 1px #fff3, 0 4px 4px 0 #0004, 0 0 0 1px #333;
  border: none;
  /* Remove default border */
  color: black;
  /* text */
  padding: 8px 0px 8px 8px;
  /* Space inside button */
  /* top left bottom right */
  text-align: center;
  font-size: 10px;
  border: 2px solid black;
  border-radius: 0px;
  /* Rounded corners */
  cursor: pointer;
  /* Pointer on hover */
  transition: background-color 0.3s, transform 0.2s;
  /* Smooth effects */
  max-width: 200px;
  left: 10px;
}

.btn:hover {
  background-color: #41c3ca;
  /* Darker on hover */
  transform: translateY(-2px);
  /* Slight lift effect */
}

.btn:active {
  transform: translateY(0);
  /* Pressed effect */
}

.logo {
  position: fixed;
  top: 10px;
  width: 20vh;
}

.crop-container {
  position: absolute;
  height: 50px;
  overflow: hidden;
  width: 100%;
  top: 18px;
}

.crop-container img {
  position: absolute;
}