body {
 background: black;
 color: white;
 font-family: Arial, sans-serif;
}

body::-webkit-scrollbar {
 display: none;
}

.boot-bg {
 background: radial-gradient(circle, rgb(0, 1, 45), #000000);
}

#marplaca {
width: 30vw;
position: absolute;
left: 50%;
top: 40%;
transform: translateX(-50%);
display: none;
}

#logo {
 width: 25vw;
 position: absolute;
 left: 50%;
 top: 40%;
 transform: translate(-50%, -50%);
 display: none;
 filter: drop-shadow(0 0 20px #00aaff);
}

#carre {
 width: 4vw;
 height: 4vw;
 border: 5px solid #333;
 border-top: 5px solid white;
 border-radius: 50%;
 position: absolute;
 left: 50%;
 top: 65%;
 transform: translate(-50%, -50%);
 animation: girar 1.5s linear infinite;
 display: none;
}

@keyframes girar {
 from {
  transform: translate(-50%, -50%) rotate(0deg);
 }

 to {
  transform: translate(-50%, -50%) rotate(360deg);
 }
}


#login {
background-color: gray;
border: 8px solid gray;
border-radius: 5px;
width: 30vw;
height: 50vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;

}

#userPC {
width: 60%;
height: 10%;
text-align: center;
color:black;
border: 2px solid black;
border-radius: 5px; 
position: absolute;
left: 50%;
top: 14%;
transform: translate(-50%, -50%);
}

#user {
color: black;
width: 40%;
height: 10%;
border: 2px solid black;
border-radius: 5px;
text-align: center; 
position: absolute;
left: 50%;
top: 26%;
transform: translate(-50%, -50%);
}

#pass {
color: black;
width: 25%;
height: 10%;
border: 2px solid black;
border-radius: 5px; 
position: absolute;
left: 50%;
top: 38%;
transform: translate(-50%, -50%);
text-align: center;
}

#loginbtn {
height: 5vh;
width: 30%;
color: white;
background-color: #007bff;
border: 2px solid black, white;
border-radius: 5px;
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
}

#barra {
width: 80%;
height: 7%;
border: black solid 3px;
border-radius: 20px;
background-color: rgb(69, 69, 69);
position: absolute;
left: 10%;
top: 1%;
opacity: 0.8;
display: none;
}

#one{
width: 15%;
height: 96%;
background-color: #0a79f7;
position: absolute;
left: 2%;
top: 1%;
border: #000000 solid 3px;
border-radius: 100px;
display: none;
}

#two
{
width: 15%;
height: 96%;
background-color: #004696;
position: absolute;
left: 18%;
top: 1%;
border: #000000 solid 3px;
border-radius: 100px;
display: none;
}

#thr {
 width: 15%;
 height: 96%;
 background-color: #003168;
 position: absolute;
 left: 34%;
 top: 1%;
 border: #000000 solid 3px;
 border-radius: 100px;
 display: none;
}

#four {
 width: 15%;
 height: 96%;
 background-color: #001a39;
 position: absolute;
 left: 50%;
 top: 1%;
 border: #000000 solid 3px;
 border-radius: 100px;
 display: none;
}

#five {
 width: 15%;
 height: 96%;
 background-color: #011126;
 position: absolute;
 left: 66%;
 top: 1%;
 border: #000000 solid 3px;
 border-radius: 100px;
 display: none;
}

#six {
 width: 15%;
 height: 96%;
 background-color: #000b18;
 position: absolute;
 left: 82%;
 top: 1%;
 border: #000000 solid 3px;
 border-radius: 100px;
 display: none;
}

#cen { 
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

#login_sys {
 width: 350px;
 height: 350px;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 border-radius: 10px;
 display: none;
 transform: translate(-50%, -50%);
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}

@keyframes fadeOut {
 from {
  opacity: 1;
 }

 to {
  opacity: 0;
 }
}

#pass_sys {
 width: 80%;
 height: 10%;
 border: 2px solid black;
 border-radius: 5px;
 color: gray;
 text-align: center;
 position: absolute;
 left: 229%;
 top: 180%;
 transform: translate(-50%, -50%);
}

#bar_img {
 width: 2%;
 height: 5%;
 background-color: gray;
 border-radius: 100px;
 border: #000000 solid 2px;
 position: absolute;
 left: 12%;
 top: 5%;
 transform: translate(-50%, -50%);
 filter: drop-shadow(0 0 5px #00aaff);
 opacity: 90%;
 display: none;
}

#bar_img:hover {
 filter: drop-shadow(0 0 5px rgb(0, 13, 255));
}

#menu {
 width: 20vw;
 height: 45vh;
 background-color: gray;
 border-radius: 15px;
 border: #000000 solid 2px;
 position: absolute;
 left: 20%;
 top: 33%;
 transform: translate(-50%, -50%);
 filter: drop-shadow(0 0 5px #0077ff);
 opacity: 90%;
 display: none;
}

h1 {
 color: white;
 text-align: center;
 position: absolute;
 left: 229%;
 top: 140%;
 transform: translate(-50%, -50%);
}

#A {
 width: 55%;
 height: 55%;
 position: absolute;
 left: 229%;
 top: 100%;
 transform: translate(-50%, -50%);
 filter: drop-shadow(0 0 10px #0077ff);
 opacity: 90%;
 display: none;
}