svp convertez css en bootstrap les khey c'est URGENT

ET MON CSS:
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: 100vw;
height: 2.5vw;
display: flex;
justify-content: space-between;
z-index: 99;
}
.menu-button {
height: 2.5vw;
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;
}
tr {
height: 2vw;
border: 1px solid;
}
td {
width: 5vw;
max-width: 5vw;
}
.unsafe {
text-decoration: line-through;
color: red;
}

/* LOGO BACKGROUND */
.logo-background {
position: absolute;
display: flex;
width: 40vw;
margin-left: 30vw;
z-index: 0;
}
.logo-background-text {
display: flex;
color: rgb(0, 122, 0);
font-size: 0.1vw;
margin: 1vw auto;
}

/* INPUT ZONE */
.input-zone-full-screen {
width: 100%;
height: auto;
}
.input-zone {
width: 40vw;
margin-left: 30vw;
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;
}

.custom-file-input {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

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

.input-file-button {
display: flex;
margin: auto;
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;
}

1. input-file::file-selector-button {

background-color: black;
color: rgb(0, 255, 0);
border: 0.01vw solid rgb(0, 255, 0);
border-radius: 0.25vw;
}

1. input-file::file-selector-button:hover {

cursor: pointer;
color: white;
border: 0.01vw solid white;
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

/* 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 */

1. btn-add {

width: 25vw;
margin: 2vw 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;
}

1. btn-add:hover {

color: white;
border: 1px solid white;
-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: 2.5vh;
border-bottom: 0.25vh solid;
}

/* HEADER */
header {
width: 100vw;
height: 2.5vh;
}
.menu-button {
height: 2.5vh;
font-size: 1vh;
margin: 0.5vw 5vh 0 5vw;
}

/* 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 {
margin: 0 10vw 0 10vw;
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;
}
tr {
height: 2vw;
}
td {
width: 5vw;
}

/* LOGO BACKGROUND */
.logo-background {
width: 40vh;
margin-left: 32vw;
}
.logo-background-text {
font-size: 0.1vh;
margin: 1vh;
}

/* INPUT ZONE */
.input-zone {
width: 60vw;
margin-left: 17.5vw;
padding-top: 1vh;
border-top: 0.25vh solid;
border-bottom: 0.25vh solid;
}

/* BOUTON INPUT */
.input-file-button {
padding: 0.5vw;
border: 0.01vh solid rgb(0, 255, 0);
}

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

/* AJOUTER DESCRIPTION */
.input-description {
width: 40vw;
height: 5vh;
}
.input-description-tag {
border: 0.01vh solid rgb(0, 255, 0);
border-radius: 0.25vh;
margin-top: 1vh;
font-size: 1vh;
}

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

/* BOUTON ADD */
#btn-add {
width: 40vw;
margin: 2vh 0 1vh 10vw;
padding: 0.1vh 0.5vh 0.1vh 0.5vh;
font-size: 1vh;
border: 0.02vh solid rgb(0, 255, 0);
border-radius: 0.25vh;
}
}

Demande à chatGpt...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Votre Page</title>
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}

body, p, a {
font-family: "Roboto Mono", monospace;
}

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

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

/* BACKGROUNDS */
.background-header {
position: fixed;
width: 100%;
height: 40px; /* Vous pouvez ajuster la hauteur en pixels */
top: 0;
border-bottom: 1px solid rgb(0, 255, 0);
z-index: 90;
}

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

.menu-button {
height: 40px; /* Vous pouvez ajuster la hauteur en pixels */
font-size: 20px; /* Vous pouvez ajuster la taille de la police en pixels */
color: rgb(0, 255, 0);
text-decoration: none;
text-align: center;
margin: 5px 50px 5px 50px;
z-index: 99;
transition: transform 0.1s;
}

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

/* BODY */
/* BINARIES */
.binary-text {
text-align: center;
font-size: 15px; /* Vous pouvez ajuster la taille de la police en pixels */
color: rgb(0, 122, 0);
opacity: 0.5;
}

.binary {
width: 100%;
margin: 30px 0 10px 0; /* Vous pouvez ajuster les marges en pixels */
}

.binary2 {
width: 100%;
margin: 10px 0 10px 0; /* Vous pouvez ajuster les marges en pixels */
}

.binary3 {
width: 40%;
margin: 10px 0 10px 30%; /* Vous pouvez ajuster les marges en pourcentage */
}

/* TABLEAU */
.tableau-full-screen {
width: 80%;
margin: 0 10%;
border-top: 1px solid rgb(0, 255, 0);
border-bottom: 1px solid rgb(0, 255, 0);
padding: 10px 0 10px 0; /* Vous pouvez ajuster les marges et le rembourrage en pixels */
}

.tableau-general {
width: 100%;
color: white;
padding: 0 5% 0 5%; /* Vous pouvez ajuster les marges en pourcentage */
}

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

.table-title {
color: rgb(0, 255, 0);
padding-bottom: 20px; /* Vous pouvez ajuster la marge en pixels */
}

table {
width: 100%;
}

tr {
height: 40px; /* Vous pouvez ajuster la hauteur en pixels */
}

td {
width: 10%; /* Vous pouvez ajuster la largeur en pourcentage */
max-width: 10%; /* Vous pouvez ajuster la largeur maximale en pourcentage */
}

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

/* LOGO BACKGROUND */
.logo-background {
position: absolute;
display: flex;
width: 40%;
margin-left: 30%; /* Vous pouvez ajuster la marge en pourcentage */
z-index: 0;
}

.logo-background-text {
display: flex;
color: rgb(0, 122, 0);
font-size: 15px; /* Vous pouvez ajuster la taille de la police en pixels */
margin: 10px auto;
}

/* INPUT ZONE */
.input-zone-full-screen {
width: 100%;
height: auto;
}

.input-zone {
width: 40%;
margin-left: 30%; /* Vous pouvez ajuster la marge en pourcentage */
padding-top: 10px; /* Vous pouvez ajuster le rembourrage en pixels */
color: black;
border-top: 1px solid rgb(0, 255, 0);
border-bottom: 1px solid rgb(0, 255, 0);
}

.input-zone-title {
font-size: 40px; /* Vous pouvez ajuster la taille de la police en pixels */
color: rgb(0, 255, 0);
margin: 20px 0 20px 0; /* Vous pouvez ajuster la marge en pixels */
text-align: center;
}

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

.custom-file-input {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

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

.input-file-button {
display: flex;
margin: auto;
padding: 5px; /* Vous pouvez ajuster le rembourrage en pixels */
background-color: black;
color: rgb(0, 255, 0);
border: 0.1px solid rgb(0, 255, 0); /* Vous pouvez ajuster l'épaisseur de la bordure en pixels */
border-radius: 5px; /* Vous pouvez ajuster le rayon de la bordure en pixels */
font-size: 20px; /* Vous pouvez ajuster la taille de la police en pixels */
}

.input-file::file-selector-button {
background-color: black;
color: rgb(0, 255, 0);
border: 0.1px solid rgb(0, 255, 0); /* Vous pouvez ajuster l'épaisseur de la bordure en pixels */
border-radius:

Je suis tellement mauvais en HTML/CSS, que pour t’aider je devrais y passer la journée