@import url(loader.css);
@font-face {
  font-family: "Inter"; /*a name to be used later*/
  src: url("../Inter-VariableFont_opsz_wght.ttf");
  /* src: url("../SmoochSans-VariableFont_wght.ttf"); */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", serif;
  text-align: center;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(245, 155, 32, 0.3) 0%,
    rgba(32, 129, 245, 0.3) 100%
  );
}

p {
  font-size: medium;
  font-weight: 500;
  margin-top: 15px;
  color: rgb(104, 104, 104);
}

.card {
  background-color: white;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 50px 40px;
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transition: width 0.3s;
}
.card.wide {
  width: 1000px;
}

.card > .content {
  display: grid;
  grid-template-columns: [uploadArea] 100% [divider] 0% [downloadButton] 0%;
  align-items: center;
  margin: 50px 20px;

  /* transition: all 0.3s; */
}
.card.wide > .content {
  grid-template-columns: [uploadArea] 42% [divider] 16% [downloadButton] 42%;
}

.upload-area {
  /* width: 380px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  align-items: center;

  border-radius: 15px;
  border: 2.5px dashed grey;
  padding: 30px;
  /* margin: 50px 20px; */
  background-color: #f8f8f8;
  cursor: pointer;
  height: 200px;
}
/* .upload-area.hide {
  display: none;
} */
.upload-area > p {
  margin-top: 0px;
  text-align: initial;
}

.upload-area.dragover {
  scale: 1.02;
  background-color: #f59c201b;
}

#divider {
  border-left: 2.5px solid lightgray;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
}

#download-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  align-items: center;

  border-radius: 15px;
  background-color: red;
  border: none;
  padding: 30px;
  background-color: #2080f523;

  height: 120px;
  /* width: 350px; */

  font-size: medium;
  font-weight: 600;

  transition: all 0.1s;
}
#download-button.hide {
  display: none;
}

#download-button:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hide-initially {
  display: none !important;
}

#loaderWrapper {
  border-radius: 15px;
  height: 200px;
  /* width: 200px; */
  /* background-color: lightgray; */
  background-color: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  align-items: center;
  justify-content: center;
  display: none;
}
#loaderWrapper.show {
  display: flex;
}
#loaderWrapper > .loader {
  background-color: #3f90f39e;
}

#error-message {
  /* position: fixed; */
  display: initial;
  border-radius: 5px;
  margin: 25px;
  padding: 15px;
  background-color: rgb(255, 150, 150);
  font-weight: 600;

  transition: bottom 0.2s ease-in-out;
}
#error-message.hide {
  display: none;
}