.toppage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  font-size: 3vw;
  flex-wrap: wrap;
  padding-top: 20px;
}

.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-content: center;
  flex-wrap: wrap;
  /* justify-content: center; */
}
.cave {
background-color: #222124;
width: fit-content;
min-width: fit-content;
border: #686868;
border-image-width: 1;
border-style: solid;
border-radius: 20px;
padding: 20px;
margin: 20px;   
}
.box {
  display: flex;
  
}
@media (max-width: 800px) {
.box, .toppage {
  flex-direction: column !important;
}
.cave, .userinfos, .skills, .audits{
  width: 80vw !important;
}
}

@media (max-width:420px) {
.logout {
  position: relative !important;
  font-size: 15px;
  width: fit-content;
  right: auto !important;
}
.xps {
  font-size: 100px !important;
}
.toppage {
  justify-content: center !important;;
}
}

.auth-form {
  display: flex;
  background-color: #222124;
  justify-content: center;
  width: fit-content;
margin-top: 50px;

  padding: 10px;
  border-radius: 10px;
  border-style: dashed;
  border-color: #b40000;
  align-content: flex-start;
  flex-direction: column;
  font-size: 25px;
  align-items: center;
  color: white;
}

.auth-form input {
  height: 30px;
  border-radius: 10px;
  border-style: dashed;
  border-color: #b40000;

  background-color: #474545;
  color: white;
  padding: 5px;
  font-size: 18px;
}
.submit {
cursor: pointer;
transition-duration:  0.4s;
text-align: center;
justify-content: center;
}

.submit:hover {
border-color: #45a049; /* Vert foncé lors du survol */
}
.logout {
  position: absolute;
  right: 25px;
  top: 5%;
  border-style: dashed;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
}



.audits {
  width: 30vw;
  min-width: fit-content;
  max-height: 300px;
  height: fit-content;

}

.userinfos {
  width: 30vw;
  min-width: fit-content;
  color: white;
  height: fit-content;
  font-size: 20px;
}

.xps{
  width: 40vw;    
  height: fit-content;
  font-size: 130px;
  color: white;
  white-space: nowrap;

}

.skills{
  width: 40vw;
}


/***Audits***/

/***Audit graph***/
.audlabel{
  font-size:30px;
  padding-bottom:20px;
  color: white;
}
.auditGraph{
  display:flex;
    /***Audit svg***/
}
.auditsvg{
  /* background-color:wheat; */
  width: 200px;
  min-width: 100px;
}
    /***Audit datas***/
.audata{
  display: flex;
  flex-direction:row;
  font-size:15px;
  padding-left:10px;
  justify-content:right;
  color: white;
}
.audtext{
  display:flex;
  padding-right: 5px;
}
.audval {
  display:flex;
  justify-content:right;
  font-size:15px;
  color: white;

}

/***Audit message***/
.auditMessage{
  display: flex;
  align-items:end;
  color: white;
}
.amv{
  font-size:60px
}
.amt{
  padding:10px      
}


/* Progress graphic*/

.progress {
  width: 100%;
  height: 70vh;
}

/* CSS */
.error-message {
background-color: #f44336; /* Rouge */
color: white;
padding:  10px;
border-radius:  5px;
box-shadow:  0  2px  5px rgba(0,  0,  0,  0.3);
animation: fadeout  3s forwards;
position: absolute;
top: 115px;
left: 50%;
transform: translateX(-50%);
z-index: '1000';;
}

@keyframes fadeout {
to {
    opacity:  0;
    visibility: hidden;
}
}