:root {
  /*--color-theme:rgb(184,55,55);*/

  --color-theme: #08aeb9;
  --color-off: rgb(146, 146, 146);
  --color-themeblack: rgb(19, 19, 19);
  --color-green: rgba(194, 47, 47, 0.815);
  --color-input: rgb(255, 255, 255);
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-off);
  opacity: 0.7; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--color-off);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--color-off);
}
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;

  width: 250px;
  height: 2px;
}

progress[value]::-webkit-progress-bar {
  background-color: rgb(255, 255, 255);
  border-radius: 2px;
  box-shadow: 0 0 4px 0.1px rgba(24, 24, 24, 0.418);
}
progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.048)),
    -webkit-linear-gradient(left, var(--color-theme),var(--color-theme));

  border-radius: 2px;
  background-size: 40px 25px, 100% 100%, 100% 100%;
}
html {
  background-color: #131313;
  overflow-x: hidden;
}
body {
  display: flex;
  align-items: center;
  font-family: Arial;
  color: "white";
  padding: auto;
  margin: auto;
  overflow-x: hidden;
  padding-left: 20;
  padding-right: 20;
  padding-bottom: 20;
}
#content input {
  color: white;
  font-size: 22;
  background-color: var(--color-theme);
  border-radius: 5px;
  font-weight: bold;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  font-weight: normal;
  transition: 0.5s;
}
label {
  background-color: var(--color-theme);
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
  height: 30px;
  width: 200px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
  padding-top: 18px;
}
label:hover {
  background-color: white;
  color: var(--color-theme);
  box-shadow: 0 0 4px 0.1px var(--color-theme);
  background-image: url("img/uploadchoose.png");
  background-size: cover;
  background-position-y: -10px;
  color: transparent;
}

input#fileButton {
  margin-top: 50px;
  width: 325px;
  padding: 14px 0px 0px -0px;
  height: 60px;
}
#content input:hover {
  background-color: var(--color-green);
}

#uploader {
  height: 0px;
  border-radius: 15px;
}
#header {
  display: flex;
  align-items: center;
  background-color: var(--color-theme);
  height: 50px;
  width: 100%;
  box-shadow: 0 0 4px 0.1px rgb(24, 24, 24);
}
#content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  background-color: rgb(235, 235, 235);
  box-shadow: 0 0 4px 0.1px rgb(0, 0, 0);
  height: fit-content;
  padding-bottom: 50px;
  transition: 1s;
  border-radius: 10px;
  /* background-image: url('/img/back.png'); */
  background-size: cover;
}
/* #fileButton{
    height: 50px;
    background-color: #008bc2;
    border-radius: 5px;
} */

button {
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
#BtnUpload h2 {
  margin-top: 17;
  transition: 0.3s;
}
#BtnUpload button:hover {
  background-color: white;
  background-image: url("./img/upload.png");
  background-size: contain;
  box-shadow: 0 0 4px 0.1px var(--color-theme);
}
#BtnUpload button:hover h2 {
  color: var(--color-theme);
  margin-left: 20px;
}
#BtnUpload button {
  background-color: var(--color-theme);
  border-radius: 5px;
  margin-top: 50px;
  height: 60px;
  width: 200px;
  box-shadow: 0 0 4px 0.1px rgb(0, 0, 0);
  transition: 0.5s;
}
#BtnDownload h2 {
  margin-top: 17;
  transition: 0.3s;
}
#BtnDownload button:hover h2 {
  color: var(--color-green);
  margin-left: 20px;
}
#BtnDownload button:hover {
  background-color: white;
  box-shadow: 0 0 4px 0.1px var(--color-green);
  background-image: url("./img/download.png");
  background-size: contain;
}
#BtnDownload button {
  background-color: var(--color-green);
  border-radius: 5px;
  margin-top: 50px;
  height: 60px;
  width: 200px;
  box-shadow: 0 0 4px 0.1px rgb(0, 0, 0);
  transition: 0.3s;
}

#uploadpanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20;
  padding-right: 20;
}
#downloadpanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20;
  padding-right: 20;
}
#option {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  margin-top: 10px;
}

#uploadheader {
  height: 50;
  width: 60%;
  border-bottom: 2px solid var(--color-theme);
  background-color: rgba(15, 15, 15, 0);
  transition: 0.5s;
}

#downloadheader {
  height: 50;
  width: 40%;
  border-bottom: 2px solid rgb(192, 192, 192);
  background-color: rgba(15, 15, 15, 0);
  transition: 0.5s;
}

#setPass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#passcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 1s;
  height: fit-content;
  text-align: center;
}
#passcontainer input {
  margin-top: 20px;
  height: 60px;
  cursor: text;
  text-align: center;
  background-color: var(--color-input);
  color: var(--color-themeblack);
  width: 80%;
  font-size: 30;
  font-weight: bold;
  box-shadow: 0 0 3px 0.1px rgb(161, 161, 161);
}
#passcontainer input:hover {
  background-color: var(--color-input);
}
#passcontainer1 input {
  margin-top: 10px;
  height: 60px;
  cursor: text;
  text-align: center;
  background-color: var(--color-input);
  color: var(--color-themeblack);
  width: 80%;
  font-size: 30;
  font-weight: bold;
  box-shadow: 0 0 3px 0.1px rgb(161, 161, 161);
}
#passcontainer1 input:hover {
  background-color: var(--color-input);
}
h1 {
  margin-left: 20;
  font-size: 22;
  color: rgb(63, 63, 63);
  font-family: "arial";
}

h2 {
  font-size: 20;
  color: rgb(255, 255, 255);
  font-family: "arial";
}

h3 {
  font-size: 20;
  color: var(--color-off);
}

h4 {
  font-size: 25;
  color: rgb(65, 65, 65);
  margin-top: 13;
}

h5 {
  color: rgb(54, 54, 54);
  font-size: 18;
  font-weight: normal;
}
h6 {
  color: rgb(192, 51, 51);
  font-size: 18;
  float: left;
}
h7 {
  color: rgb(49, 49, 49);
  font-size: 30;
  font-weight: bold;
}
h8 {
  color: rgb(78, 78, 78);
  font-size: 25;
  font-weight: bold;
}
h9 {
  color: var(--color-theme);
  font-size: 60;
  font-weight: bold;
}
footer {
  box-shadow: 0 0 7px 0.1px black;
  max-width: 1000px;
  background-color: rgba(15, 15, 15, 0.801);
  color: white;
  text-align: center;
  height: 280px;
  padding-top: 20px;
  margin: auto;
  font-weight: bold;
  margin-top: 50px;
  position: static;
}
#modal-content button {
  margin-top: 50px;
  height: 50px;
  width: 140px;
  background-color: var(--color-green);
  border-radius: 10px;

  text-align: center;
}
#modal-content button:hover {
  background-color: white;
  box-shadow: 0 0 4px 0.1px var(--color-green);
}
#modal-content button:hover h2 {
  color: var(--color-green);
}
#modal-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  padding-left: 20;
  padding-right: 20;
  text-align: center;
}
#modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 13%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
#modal-content-notify {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 340px;
  height: 200px;
  border-radius: 5px;
  padding-left: 20;
  padding-right: 20;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 0 4px 0.1px rgb(24, 24, 24);
}
#modal-notify {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 15%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  transition: 0.3s;
}
#modal-content-notify button {
  margin-top: 60px;
  height: 50px;
  width: 150px;
  background-color: var(--color-green);
  border-radius: 10px;
  transition: 0.3s;
  text-align: center;
}
#modal-content-notify button:hover h2 {
  color: var(--color-green);
}
#modal-content-notify button:hover {
  background-color: white;
  box-shadow: 0 0 4px 0.1px var(--color-green);
}

#passcontainer1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 1s;
  margin-top: 30px;
  height: fit-content;
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
  line-height: 2;
}

.loader {
  display: none;
  margin-top: 50px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #34db9b;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#container{
  background-color: red;
  height:100px;
  width: 100px;
}