#inici{
width:70px;
height:70px;
position:absolute;
top:20px;
left:1645px;
cursor:auto;
z-index: 1;
}

#inici_color{
width:70px;
height:70px;
position:absolute;
top:20px;
left:1645px;
cursor:auto;
z-index: 1;
display: none;
}

#insta{
  width:40px; 
  height:40px;
  position:absolute;
  top:885px;
  left:1600px;
  z-index: 1;
}

#mail{
width: 50px;
height: 50px;
position:absolute;
top: 880px;
left:1700px;
z-index: 2;
}

#formulario{
display: none;
position: absolute;
width: 250px;
height:300px;  
top: 100px;
left: 1550px;
border-color: crimson;
background-color: white;
border-style:solid;
border-width: 3px;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
padding-top: 10px;
padding-left: 10px;
padding-right: 20px;
z-index: 2;
}

/*Codi per fer label flotant formulari*/

.signupFrm{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inputContainer {
  position: relative;
  margin-bottom: 10px;
}

.input {
  width: 75%;
  height: 30px;  
  border: 1px solid black;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 20px;
  outline: none;
}

.input::placeholder {
opacity: 1;
}


.input:focus + label,
.input:not(:placeholder-shown)+ label {
  top: 13.5px;
  left: 4px;
  font-size: 14px;
  font-weight: 600;
  color: purple;
  transition: 0.5s;
}
 

.input:focus {
  border: 2px solid crimson;
}

.input:focus::placeholder{
  opacity: 0;
}


.label {
  position: absolute;
  top: 40px;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 4px;
  background-color: white;
  color: gray;
  font-size: 16px;
  pointer-events: none;
}


.submitBtn {
  display: block;
  margin: 20px auto;
  padding: 15px 30px;
  border: none;
  background-color: crimson;
  color: white;
  border-radius: 6px;
  margin-top: 95px;
  margin-right: 20px;
  cursor: pointer;
  font-size: 14px;
}

.submitBtn:hover {
  background-color: crimson;
  transform: translateY(-2px);
}

/*Boto del formulari 2 efecte cap amunt*/

#registrat:hover{
    background-color: crimson;
    transform: translateY(-2px);
  
}


/*Comença el codi del formulari 2*/

#formulario2{
  display: none;
  position: absolute;
  font-size: 20px;
  width: 500px;
  height: 480px;
  left: 580px;
  top: 200px;
  border-color:crimson;
  border-style: groove;
  border-width: 3px;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;  
  z-index: 1;
}

.registerFrm{
  
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/*Codi per fer label flotant formulari2*/

.input1 {
  width: 75%;
  height: 30px;
  border: 1px solid gray;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 16px;
  padding: 0 20px;
  color: black;
}


.label1 {
  position: absolute;
  top: 35px;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 4px;
  background-color: white;
  color: gray;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s, font-size 0.3s, color 0.3s;
  opacity: 0;
}

.input1:focus ~ .label1,
.input1:not(:placeholder-shown) ~ .label1 {
  top: 11px;
  font-size: 16px;
  font-weight: 600;
  color: purple;
  opacity: 1;
}


.input1::placeholder{
  opacity: 1;
}

.input1:focus::placeholder{
  opacity: 0;
}

#mostrar{
  font-size: 14px;
  position: relative;
  top: 20px;
}


#mostrar1{
  font-size: 14px;
  position: relative;
  top: -10px; /* Ajusta el valor según tu preferencia */
  right: 1px; /* Ajusta el valor según tu preferencia */
}

#mostrar2{
  font-size: 14px;
  position: relative;
  top: -60px; /* Ajusta el valor según tu preferencia */
  right: 1px; /* Ajusta el valor según tu preferencia */
}


  








/*.input1 {
  width: 100%;
  height: 30px;  
  border: 1px solid #DADCE0;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
}

.input1::placeholder {
  color:#DADCE0;
  }

.input:focus::placeholder{
  opacity: 0;
}

.label1 {
  position: absolute;
  top: 40px;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 4px;
  background-color: white;
  color: #DADCE0;
  font-size: 16px;
  pointer-events: none;
  z-index: -1;
  }

.input1:focus {
  border: 2px solid crimson;
  }

.input1:focus + label1,
.input1:not(:placeholder-shown)+ label1 {
  top: 13.5px;
  left: 4px;
  font-size: 14px;
  font-weight: 600;
  color: purple;
  transition: 0.5s;
}

*/



#titol{
  font-size: 100px;
  font-family:'Monoton';
  position: absolute;
  color:crimson;
  top: -30px;
  left: 450px;
  overflow: auto;
  z-index: 2;
  }


#titol1{
font-size: 13px;
color: black;
position: absolute;
top: 180px;
left:18px

}

#titol2{
font-size: 21px;
font-family: Arial, Helvetica, sans-serif;
color:crimson;
position: absolute;
top: 885px;
left:100px;
z-index: 2;

}

#contador{
font-size: 27px;
font-family: Arial, Helvetica, sans-serif;
color:crimson;
position: absolute;
top: 900px;
left:350px;
z-index: 2;
}

#registre{

display: none;
position: absolute;
width: 90px;
height: 20px;
left: 1730px;
top: 50px;
font-size: 14px;
border-radius: 10%;
border-color: crimson;
color: white;  
background-color: black;
z-index: 2;
}

/*
Provant text opacity

*/

#back1 {
  background-image: url('back1.jpg');
}

#back2 {
  background-image: url('back2.jpg');
}

.bgimg {
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 6s ease-in-out;
}

  
  #formulario2 #registrat{
    border-radius: 10%;
    position: absolute;
    height: 40px;
    width: 120px;
    top: 420px;
    left: 320px;
    font-size: 20px;
    z-index: 1;
    border-color: crimson;
    color: white;  
    background-color: black;
  }

  

  #close{
  display: none;
  position: absolute;
  height: 40px;
  width: 40px;
  top:220px;
  left: 1055px;
  cursor: pointer;
  z-index: 2;
  }

  /*carregar imatge*/

  .loading-text{

    font-size: 80px;
    color: beige;
}