body {
   display : flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height : 100vh;
   margin : 0;
}

p {
   font-size : 14px;
}

#rights {
   position:fixed;
   bottom: 4px;
   left: 2px;
   font-size: 16px;
   margin-bottom: 0px;
}

#connectName {
   margin-top: 0.2em;
   margin-bottom: 0.2em;
   font-size : 45px;
}
#animation {
   background :#008fe2;
   position : fixed;
   font-family: 'Montserrat';
   color : white;
   width : 0;
   height : 0;
   border-radius: 50%;
   font-size : 3em;
   top: 50%;
   left : 50%;
   transform: translate(-50%,-50%);
   display : flex;
   justify-content: center;
   align-items: center;
}
.heure {
    text-align : right ;
 }
 html {
    background : linear-gradient(to left, #0451a8 0%, #25a9d1 100%) ;
    max-width : 100% ;
    font-family: 'Montserrat', sans-serif;
 }
 @media only screen and (max-width: 1200px) {
   body {
      padding : 4px;
   }
 .actions {
      box-shadow: 0 -5px 5px -5px grey;
      padding-top : 4px ;
 }
 .informations {
        height : 60vh ;
    overflow : auto ; 
   }
   .entité {
      display : none;
   }
   .shade2 {
      display: none !important;
   }
   .shade3 {
      display: none !important;
   } 
   .shade1 {
      display: none !important;
   }
   .shade4 {
      opacity : 0.5 !important;
   }
   .texteChamp, .boutonConnexion {
      font-size: 20px;
      height : 35px;
   }
 }
 #connectName2 {
   letter-spacing: 0.5em;
}
 @media only screen and (min-width: 1200px) {
   .actions {
       box-shadow: -5px 0 5px -5px grey;
       padding-left : 5px ;
       width : 564px ;
 }
 }
 h2
 {
    font-size :8em ;
 }
 .inputt
 {
    background-color : white ;
 }
 .entité
 {
    font-size :0.5em ;
 }
 input
 {
    margin-bottom: 10px;
    height: 64px;
    border-radius : 8px/8px;
    font-size : 2em;
 }
 .messageLien
 {
    background-color : white ;
    border-radius : 10px/10px ;
    padding : 10px ;
    margin-left : 4mm ;
    margin-right : 4mm ;
    padding-left : 16px ;
    height : auto ;
    box-shadow: 0 0 1em grey;
    margin-top : 20px ;
 }
 .info
 {
    font-size : 2em ;
 }
 h4
 {
    font-size : 2em ;
 }
 .informations
 {
    margin-bottom : 2px ;
    padding-bottom : 8px ;
    overflow: auto ;
 }
 .message
 {
    background-color : #66FFB2 ;
    border-radius : 10px/10px ;
    padding : 10px ;
    margin-left : 4mm ;
    margin-right : 4mm ;
    padding-left : 16px ;
    height : auto ;
   box-shadow: 0 0 1em grey;
   margin-top : 20px ;
 }
 .progress-bar{
     height: 35px;
     width: 90%;
     margin-left : 5% ;
     border: 2px solid darkblue;
     border-radius : 8px ;
     margin-bottom : 20px ;
 }
 .progress-bar-fill{
     height: 100%;
     width: 0%;
     background: lightblue;
     display: flex;
     align-items: center;
     font-weight: bold;
     transition: width 0.25s;
     border-radius : 6px ;
 }

 .texteChamp {
   border : none;
   background : rgb(238, 237, 237);
   border-bottom : 2px solid darkblue;
   padding-left: 4px;
   width: 95% ;
   max-width: 16em ;
 }
 .texteChamp:focus{
   outline: none;
   background-color: white;
   box-shadow: 0 0 2em rgb(141, 134, 134);
 }
 .progress-bar-text{
     margin-left: 10px;
     font-weight: bold;
     text-align : center ;
 }
 .boutonConnexion {
   background-color: darkblue;
   color: white;
   border : white 2px solid;
   box-shadow: 0 0 1em grey;
   cursor : pointer;
 }
 .boutonConnexion:active {
   background-color: lightblue;
   box-shadow: 0 0 0em grey;
 }
 .connexionPage {
   background-color : white;
   border-radius: 10px/10px;
   border : none;
   text-align: center;
   box-shadow: 0 0 5em grey;
   padding : 8px;
 }
 .formulaire {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 @keyframes load {
    from {
       border-radius: 50%;
       width : 0;
       height : 0;
    }
    to {
       border-radius: 0;
       width : 100vw;
       height: 100vh;
       overflow: hidden;
    }
 }

 .darkMode {
    background-color: rgb(34, 31, 31) ;
    color : rgb(241, 238, 238);
 }
 .nightInput {
    background-color: rgb(124, 118, 118);
    color : rgb(241, 238, 238) ;
 }
 .nightInput::placeholder {
    color : rgb(241, 238, 238) ;
 }
 .nightInput:focus {
    background-color :rgb(180, 180, 180) ;
 }