html {
  scroll-behavior: smooth;
}

body{
  background-color: rgb(17, 82, 122);
  color:white;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: black;
  font-size: 1.2vw;
}

#name2{
  font-size: 1.1vw;
}
h1{
  font-size: 1.3vw;
  font-weight: normal;
  padding: 0;
  margin: 0;
}
#page{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100vh;
  overflow: hidden;
}
#container_account{
  display: flex;
  height:55vh;
  width:60%;
  background-color: rgb(18, 89, 134);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  opacity: 0.7;
  transition: boxShadow 0.5s ease, 
          opacity 0.5s ease;
}
.container_account_register{
  display: flex;
  height:65vh;
  width:60%;
  background-color: rgb(18, 89, 134);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  opacity: 0.7;
  transition: boxShadow 0.5s ease, 
          opacity 0.5s ease;
}
.col-col-40{
  position:relative;
  width:40%;
  height:100%;
}
.col-col-60{
  position:relative;
  width:60%;
  height:100%;
}
.top_left_form{
  width:100%;
  height:40%;
  position:relative;
  display: flex;
}
.bottom_left_form{
  width:100%;
  height:60%;
  position:relative;
}
.top_left_form_right{
  width:100%;
  height:30%;
  position:relative;
}
.bottom_left_form_right{
  width:100%;
  height:70%;
  position:relative;
}

.is_border{
  border: 1px solid black;
}

.return{
  position: absolute;
  transform: translateX(12%);
  left:-10%;
  top: 5%;
  color:black;
  cursor: pointer;
  z-index: 2;
  font-weight: bold;
  display: flex;
  gap:1%;
  opacity: 0.4;
  transition: opacity 0.5s ease;
  font-size:1vw;
  width: 100%;
}
.return:hover > .arrow{
  transform: scale(1.2);
}
.return:hover{
  opacity: 1;
}
.arrow{
  width:1%;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
}
.is_border{
  border:1px solid black;
}

#livre_picture{
  border-radius: 50%;
  width:80%;
  position: absolute;
  right:0;
  bottom:0;
  opacity: 0;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
  transform: translateY(-40%);
  z-index: 1;
}
.conatiner_input{
  position:relative;
  width:70%;
  height:100%;
  margin-left: 15%;
  text-align: right;
}
.align_left{
  text-align: left;
}
.form_input{
  width:100%;
  margin-top: 5%;
  height:13%;
  padding: 0;
  border:2px solid orange;
  color:black;
  font-size: 1.2vw;
  border-radius: 1%;
  transition: transform 0.5s ease;
  transform: translateY(-10px);
}
#btn_validate{
  width:32%;
  margin-top: 8%;
  height:15.5%;
  background: none;
  border:2px solid orange;
  color:orange;
  border-radius: 1%;
  font-size: 1.2vw;
  cursor: pointer;
  opacity:0;
  transform: translateX(20%);
  transition: transform 0.5s ease,
  opacity 0.5s ease;
}
.register_btn{
  height:13%!important;
}
input{
  text-indent: 1%;
}
input:focus{
  outline: none;
}
::placeholder {
  color: gray; 
  font-size: 1.2vw;
}
input::-webkit-input-placeholder { 
  color: gray; 
  font-size: 1.2vw;
}
input::-moz-placeholder { 
  color: gray; 
  font-size: 1.2vw;
}
input:-ms-input-placeholder { 
  color: gray; 
  font-size: 1.2vw;
}
input:-moz-placeholder {
  color: gray; 
  font-size: 1.2vw;
}

#container_name{
  display:flex;
  align-items: center;
  height:100%;
  width:100%;
}
.name{
  width:100%;
  padding-left: 10%;
}
#name1{
  position:relative;
  color:white;
  opacity: 0;
  transform: translateX(-20%);
  transition: transform 0.5s ease,
  oppacity 0.5s ease;
  z-index:0;
}
#name2{
  position:relative;
  color:orange;
  opacity: 0;
  transform: translateX(-25%);
  transition: transform 0.5s ease,
  oppacity 0.5s ease;
  z-index:0;
}
#name3{
}
#titre_connexion{
  float:left;
  color:white;
  letter-spacing: 2%;
}
#or_register{
  margin-top: 5%;
  width: 100%;
  text-align: left;
  color:white;
}
#register{
  cursor: pointer;
  transition: color 0.5s ease;
}
#register:hover{
  color:orange;
}

#register_top{
  height:20%;
}
#register_bottom{
  height:80%;
}
.register_input{
  height: 10%;
}






@media (max-width: 1550px) {
  #livre_picture{
    bottom:10%;
  }
}

@media (max-width: 1450px) {
  #livre_picture{
    bottom:20%;
  }
}
@media (max-width: 1366px) {
  .form_input{
    height:10%;
  }
  #livre_picture{
    bottom: 10%;
  }
  #container_account{
    height: 65vh;
  }
}

@media (max-width: 1280px) and (max-height: 1024px) {
  #livre_picture{
    bottom: 20%;
  }
  #container_account{
    height:45vh;
  }
}
@media (max-width: 1280px) and (max-height: 800px) {
  #livre_picture{
    bottom: 15%;
  }
  #container_account{
    height:55vh;
  }
}
@media (max-width: 1176px) {
  #container_account{
    height:60vh;
  }
}
@media (max-width: 1152px) {
  body{
    font-size: 1.5vw;
  }
  #name2{
    font-size: 1.8vw;
  }
  #btn_validate{
    font-size: 1.2vw;
  }
  h1{
    font-size: 2vw;
    font-weight: normal;
    padding: 0;
    margin: 0;
  }
  .return{
    font-size: 1.2vw;
  }
  #livre_picture{
    bottom:20%;
  }
}
@media (max-width: 1050px) {
  #container_account{
    width: 70%;
  }
}


@media (max-width: 850px) {
  .form_input{
    height:9%;
  }
  #btn_validate{
    font-size: 1.4vw;
    border:1px solid orange;
  }
  .form_input{
    height:12%;
  }
  #livre_picture{
    bottom:15%;
  }
  #container_account{
    height: 65vh;
  }
  .form_input{
    height:10%;
  }

}
@media (max-width: 580px) {

}