@font-face {
  font-family: 'Ubuntu';
  src: url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
}

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #833ab4;
  background: -moz-linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    204deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
}
.wrapper {
  width: 450px;
  height: 280px;
  overflow: hidden;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  transition: 0.5s ease-out;
}
.active {
  height: max-content;
}
.wrapper .upload-box {
  height: 225px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-direction: column;
  border: 2px dashed #696969;
}
.upload-box p {
  font-size: 1.2rem;
  margin-top: 20px;
  color: #696969;
}
.upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 6px;
}
.upload-box i {
  width: 30%;
  fill: #696969;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 6px;
}
.wrapper .content {
  margin-top: 30px;
}
.content .row {
  display: flex;
  justify-content: space-around;
}
.row .column label {
  font-size: 1.2rem;
  font-stretch: condensed;
  margin: 0 10px;
}
#FileInput {
  width: 100%;
  height: 100%;
  display: none;
}
.sizes .column input {
  width: 100%;
  height: 50px;
  outline: none;
  margin-top: 8px;
  padding: 0 16px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #363bb6;
  border-radius: 6px;
  border: 1px solid #7c7db6;
}
.sizes .column input:focus {
  padding: 0 16px;
  border: 2px solid #5f5f5f;
}
.content .checkboxes {
  margin-top: 20px;
}
.checkboxes .column {
  display: flex;
  align-items: center;
}
.checkboxes .column input {
  width: 18px;
  height: 18px;
  accent-color: #7c7db6;
}
.content .download-btn {
  width: 100%;
  transition: all 0.5s ease-in-out;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 6px;
  padding: 16px 0;
  margin: 30px 0 10px;
  background: cadetblue;
  background: rgb(131, 58, 180);
  background: -moz-linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    94deg,
    #833ab4de 0%,
    #1d70fdde 62%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
  text-transform: capitalize;
}
.content .download-btn:active {
  background: #833ab4;
  background: -moz-linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  background: -webkit-linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  background: linear-gradient(
    189deg,
    #833ab4de 19%,
    #1d70fdde 71%,
    #45fcdb93 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#45fcdb",GradientType=1);
}
.github-wrapper{
  background: #161b22;
  color: #f0f6fc;
  fill: #f0f6fc;
  padding: .5rem 3.8rem;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  position: fixed;
  left: -60px;
  top: 15px;
  transform: rotate(315deg);
}
.github-widget{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-size: small;
  /* display: flex; */
  /* position: fixed; */
}
.github-widget svg{
  width: 18px;
}
.hidden {
  display: none;
}
@media (min-width: 375px) {
  .wrapper {
    width: 350px;
    height: 250px;
    padding: 15px;
  }
  .active {
    height: max-content;
  }
  .row .column label {
    font-size: 0.8rem;
    text-transform: capitalize;
  }
  .checkboxes .column input {
    width: 12px;
    height: 12px;
  }
  .sizes .column input {
    height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    font-size: 1rem;
  }
}