body {
  padding: 0;
  margin: 0;
  background-color: black;
}

* {
  font-family: "Roboto Mono", monospace;
  font-size: 1vw;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

/*                  BACKGROUNDS                  */
.background-header {
  position: fixed;
  width: 100vw;
  height: 2.5vw;
  top: 0;
  border-bottom: 0.25vw solid;
  border-image: radial-gradient(rgb(0, 255, 0), black) 1;
  z-index: 90;
}

/*                  HEADER                  */
header {
  position: fixed;
  background-color: black;
  top: 0;
  width: 100%;
  height: 2.5vw;
  display: flex;
  justify-content: space-between;
  z-index: 99;
}

.menu-button {
  height: 2vw;
  font-size: 1.25vw;
  color: rgb(0, 255, 0);
  text-decoration: none;
  text-align: center;
  margin: 0.5vw 5vw 0 5vw;
  z-index: 99;
  transition: transform 0.1s;
}

.menu-button:hover {
  cursor: pointer;
  color: white;
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/*                  BODY                    */
/*              BINARIES                */
.binary-text {
  text-align: center;
  font-size: 0.75vw;
  color: rgb(0, 122, 0);
  opacity: 0.5;
}

.binary {
  width: 100%;
  margin: 3.5vw 0 1vw 0;
}

.binary2 {
  width: 100%;
  margin: 1vw 0 1vw 0;
}

.binary3 {
  width: 40vw;
  margin: 1vw 0 1vw 30vw;
}

/*              TABLEAU             */
.tableau-full-screen {
  width: 80%;
  margin: 0 10vw 0 10vw;
  border-top: 0.25vw solid;
  border-bottom: 0.25vw solid;
  border-image: radial-gradient(rgb(0, 255, 0), black) 1;
  padding: 1vw 0 1vw 0;
}

.tableau-general {
  width: 100%;
  color: white;
  padding: 0 5vw 0 5vw;
}

.tableau-general a:hover {
  color: rgb(0, 122, 0);
}

.table-title {
  color: rgb(0, 255, 0);
  padding-bottom: 2vw;
}

.red {
  color: red;
}

tr {
  height: 2vw;
  border: 1px solid;
}

td {
  width: 5vw;
  overflow: hidden;
}

.dossier {
  width: 1vw;
}

.dossier-previous {
  width: 1.5vw;
}

.unsafe {
  text-decoration: line-through;
  color: red;
}

/*                  LOGO BACKGROUND             */
.container-logo-background {
  display: flex;
  width: 100%;
}

.logo-background {
  width: auto;
  margin: auto;
  z-index: 0;
}

.logo-background-text {
  display: flex;
  color: rgb(0, 122, 0);
  font-size: 0.1vw;
  margin: 1vw auto;
}

/*                  INPUT ZONE                  */
/* TITRE TELECHARGER UN FICHIER */
.input-zone-title {
  color: rgb(0, 122, 0);
}

.input-zone-full-screen {
  width: 100%;
  height: auto;
}

.input-zone {
  width: 40vw;
  margin: auto;
  padding-top: 1vw;
  color: black;
  border-top: 0.25vw solid;
  border-bottom: 0.25vw solid;
  border-image: radial-gradient(rgb(0, 255, 0), black) 1;
  overflow: hidden;
}

.input-zone-title {
  font-size: 2vw;
  color: rgb(0, 255, 0);
  margin: 0.5vw 0 0.5vw 0;
  text-align: center;
}

.button-zone {
  width: auto;
  height: auto;
  margin: auto;
}

/*              BOUTON INPUT                */
.add-file {
  display: flex;
}

.input-file-button {
  display: flex;
  margin: auto;
  margin-top: 1vw;
  padding: 0.5vw;
  background-color: black;
  color: rgb(0, 255, 0);
  border: 0.01vw solid rgb(0, 255, 0);
  border-radius: 0.25vw;
  font-size: 1vw;
}


/* AJOUTER DESCRIPTION             */
.input-description {
  width: 25vw;
  height: 5vw;
  margin: auto;
}

.input-description-tag {
  background-color: black;
  border: 0.01vw solid rgb(0, 255, 0);
  border-radius: 0.25vw;
  margin-top: 1vw;
  font-size: 1vw;
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
}

input::placeholder {
  color: rgb(0, 122, 0);
  opacity: 0.5;
  font-size: 1.5vw;
  text-align: center;
}

/*              BOUTON ADD              */
#btn-add {
  width: 25vw;
  margin: 1vw 0 1vw 7.5vw;
  padding: 0.1vw 0.5vw 0.1vw 0.5vw;
  font-size: 2vw;
  color: rgb(0, 255, 0);
  text-align: center;
  background-color: black;
  border: 0.02vw solid rgb(0, 255, 0);
  border-radius: 0.25vw;
  cursor: pointer;
}

#btn-add:hover {
  color: white;
  border: 1px solid white;
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}


/*              BOUTONS SUPPRIMER             */
form input[type="submit"] {
  background-color: transparent;
  margin-left: 5px;
  color: red;
  padding: 2px;
  border: solid 1px red;
  border-radius: 3px;
  cursor: pointer;
}

form input[type="submit"]:hover {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}


/*                    MEDIA MOBILE                   */
@media (max-width: 767px) {
  * {
    font-size: 1vh;
  }

  .background-header {
    height: 3.75vh;
    border-bottom: 0.25vh solid;
  }

  /*                  HEADER                  */
  header {
    height: 3.75vh;
  }

  .menu-button {
    margin-top: 1vh;
    height: 2.75vh;
    font-size: 1.5vh;
  }


  /*                  BODY                    */
  /*              BINARIES                */
  .binary-text {
    font-size: 0.75vh;
  }

  .binary {
    margin: 3.5vh 0 1vh 0;
  }

  .binary2 {
    margin: 1vh 0 1vh 0;
  }

  .binary3 {
    width: 40vh;
    margin: 1vh 0 1vh 30vh;
  }

  /*              TABLEAU             */
  .tableau-full-screen {
    width: 100%;
    margin: 0;
    border-top: 0.25vh solid;
    border-bottom: 0.25vh solid;
    padding: 1vw 0 1vw 0;
  }

  .tableau-general {
    padding: 0 5vw 0 5vw;
  }

  .table-title {
    padding-bottom: 2vw;
  }

  .dossier {
    width: 1vh;
  }

  .dossier-previous {
    width: 1.5vh;
  }

  tr {
    height: 2vw;
  }

  td {
    width: 5vw;
  }

  /*                  LOGO BACKGROUND             */
  .logo-background-text {
    font-size: 0.2vh;
    margin: 1vh;
  }

  /*                  INPUT ZONE                  */
  /* TITLE */
  .input-zone-title {
    font-size: 2vh;
  }

  .input-zone {
    width: 80vw;
    padding-top: 1vh;
    border-top: 0.25vh solid;
    border-bottom: 0.25vh solid;
  }

  /*              BOUTON INPUT                */
  .input-file-button {
    margin-top: 1vh;
    padding: 0.75vw;
    border: 0.015vh solid rgb(0, 255, 0);
    font-size: 2vw;
  }

  #input-file::file-selector-button {
    border: 0.015vh solid rgb(0, 255, 0);
    border-radius: 0.25vh;
  }

  /*              AJOUTER DESCRIPTION             */
  .input-description {
    width: 60vw;
    height: 5vh;
  }

  .input-description-tag {
    border: 0.01vh solid rgb(0, 255, 0);
    border-radius: 0.25vh;
    margin-top: 1.5vh;
    font-size: 1.5vh;
  }

  input::placeholder {
    font-size: 1.75vh;
  }

  /*              BOUTON ADD              */
  .button-zone {
    width: 60vw;
    height: auto;
    margin: auto;
  }

  #btn-add {
    width: 100%;
    margin: 1vh 0 1vh 0;
    padding: 0.1vh 0.5vh 0.1vh 0.5vh;
    font-size: 1vh;
    border: 0.02vh solid rgb(0, 255, 0);
    border-radius: 0.25vh;
  }
}



/*                    MEDIA TABLETTE                   */
@media (min-width: 767px) and (max-width: 1279px) {
  * {
    font-size: 1.5vh;
  }

  .background-header {
    height: 3.75vh;
    border-bottom: 0.375vh solid;
  }

  /*                  HEADER                  */
  header {
    height: 3.75vh;
  }

  .menu-button {
    height: 2.75vh;
    font-size: 1.5vh;
    margin-top: 0.5vh;
  }

  /*                  BODY                    */
  /*              BINARIES                */
  .binary-text {
    font-size: 1.125vh;
  }

  .binary {
    margin: 5.25vh 0 1.5vh 0;
  }

  .binary2 {
    margin: 1.5vh 0 1.5vh 0;
  }

  .binary3 {
    width: 60vh;
    margin: 1.5vh 0 1.5vh 45vh;
  }

  /*              TABLEAU             */
  .tableau-full-screen {
    width: 90%;
    margin: 0 5vw 0 5vw;
    border-top: 0.375vh solid;
    border-bottom: 0.375vh solid;
    padding: 1.5vw 0 1.5vw 0;
  }

  .tableau-general {
    padding: 0 7.5vw 0 7.5vw;
  }

  .table-title {
    padding-bottom: 3vw;
  }

  .dossier {
    width: 1.5vh;
  }

  .dossier-previous {
    width: 2.25vh;
  }

  tr {
    height: 3vw;
  }

  td {
    width: 7.5vw;
  }

  /*                  LOGO BACKGROUND             */
  .logo-background-text {
    font-size: 0.15vh;
    margin: 1.5vh;
  }

  /*                  INPUT ZONE                  */
  /* TITLE */
  .input-zone-title {
    font-size: 2.5vh;
  }

  .input-zone {
    width: 90vw;
    padding-top: 1vh;
    border-top: 0.375vh solid;
    border-bottom: 0.375vh solid;
  }

  /*              BOUTON INPUT                */
  .input-file-button {
    margin-top: 1vh;
    padding: 0.75vw;
    border: 0.015vh solid rgb(0, 255, 0);
    font-size: 2vw;
  }

  #input-file::file-selector-button {
    border: 0.015vh solid rgb(0, 255, 0);
    border-radius: 0.375vh;
  }

  /*              AJOUTER DESCRIPTION             */
  .input-description {
    width: 60vw;
    height: 7.5vh;
  }

  .input-description-tag {
    border: 0.015vh solid rgb(0, 255, 0);
    border-radius: 0.375vh;
    margin-top: 1.5vh;
    font-size: 1.5vh;
  }

  input::placeholder {
    font-size: 2.5vh;
  }

  /*              BOUTON ADD              */
  .button-zone {
    width: 60vw;
    height: auto;
    margin: auto;
  }

  #btn-add {
    width: 100%;
    margin: 1vh 0 1.5vh 0;
    padding: 0.15vh 0.75vh 0.15vh 0.75vh;
    font-size: 1.5vh;
    border: 0.03vh solid rgb(0, 255, 0);
    border-radius: 0.375vh;
  }
}