@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
:root{
   --background-color:white;
   --text-title-color:#053D4E;
   --icon-color:#31363B;
   --icon-menu-color:#707780;
   --menu-color:#707790;

   --text-selected-color: #355CC0;
   --background-seleted:#EBF0FF;
   --background-hover:#F7F9FA;

   --border-color:#E6E9ED;

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Nunito Sans", serif;
}

body{
  width:100%;
  height:100vh;
}
header{
  z-index: 200;
  width: 100%;
  display: flex;
  justify-content:space-between;
  padding:0.45rem 2rem 0.45rem 1.27rem;
  border-bottom:1px solid var(--border-color);
  position: fixed;
  background-color: var(--background-color);
  top: 0;
  left: 0;
}

.menu-container{
  height:100%;
  display:flex;
  align-items:center;
  cursor:pointer;
}
.menu{
  width:1.5rem;
  height:37%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.menu div{
  width: 100%;
  height:0.15rem;
  background-color:var(--menu-color);
  transition: all 0.4s ease;
}
.menu.menu-toggle div:first-child{
  width:40%;
  transform:rotate(-35deg) translate(-30%,175%); 
}
.menu.menu-toggle div:last-child{
  width: 40%;
  transform:rotate(35deg) translate(-30%,-160%);
}


.left{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
}
.brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.6rem;
}
.brand .name{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text-title-color)
}

.brand .logo{
  width: 2rem;
}


.right{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.6rem;
}
.right a{
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:0.5rem;
  transition:background-color 2.2s ease;
}
.right a:hover{
  background-color:var(--background-hover)

}

.right img{
  width:1.5rem;
  margin:0.5rem;
}
.right .user{
  width:2.1rem;
  border-radius:50%;
}

.sidebar{
  margin-top:4rem;
  width:4rem;
  height:100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 1.1rem 0;
  border-right:1px solid var(--border-color);
  overflow-y:auto;
  background-color:var(--background-color);
  transition: width 0.5s ease;
}
.sidebar.menu-toggle{
  width:18.75rem;
}
.sidebar a{
  display:flex;
  align-items:center;
  gap:1.3rem;
  padding:0.9rem 0.7rem;
  text-decoration:none;
  margin:0 0.5rem;
  border-radius:0.5rem;
  white-space:nowrap;
  overflow:hidden;
  color:var(--text-color)
}
.sidebar a:hover{
  background-color:var(--background-hover)
}
.sidebar .homepage_selected.selected{
  color:var(--text-selected-color);
  background-color:var(--background-seleted);
}
.sidebar .scrapping_selected.selected{
  color:var(--text-selected-color);
  background-color:var(--background-seleted);
}
.sidebar .begin.selected{
  color:var(--text-selected-color);
  background-color:var(--background-seleted);
}


.sidebar a.search{
  padding 1rem 0.7rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.2rem;
}


.sidebar img{
  width:1.6rem;
}
/* Estilos generales para la lista de mensajes flash */
.flash-messages {
    list-style-type: none;
    padding: 0;
}

.flash-messages li {
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos para diferentes categorías de mensajes flash */
.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}


main{
  margin-top: 4rem;
  margin-left:4rem;
  padding:2rem;
  transition:margin-left 0.5s ease;
}
main.menu-toggle{
  margin-left:18.75rem;
}

.modal{
  position:fixed;
  right: 16px;
  top:4.5rem;
  width: 10%;
  background-color:var(--background-color);
  padding:1.2rem;
  border-radius:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  visibility: hidden;
  opacity:0;
  transition:0.5s;
  box-shadow: 0 19px 38px
  rgba(0,0,0,0.30), 0 15px 12px
  rgba(0,0,0,0.22);

}
.modal a{
  display:flex;
  color:var(--text-title-color);
  justify-content:center;
  align-items:center;
  border-radius:0.5rem;
  transition:background-color 2.2s ease;
  text-decoration:none;

}
.modal.active{
  transform:scale(1);
  opacity: 1;
  visibility: visible;
}
.modal a:hover{
  background-color:var(--background-hover)
}


.modal img{
  width:1.6rem;
}
.form_login{
  flex-direction:column;
  position: relative;
  top:2rem;
  left:5rem;
  width:40%;
  margin-left:17rem;
  padding:1.2rem;
  display: flex;
  justify-content:center;
  gap:3rem;
  background-color:var(--background-color);
  border-radius:1rem;
  box-shadow: 0 19px 38px
  rgba(0,0,0,0.30), 0 15px 12px
  rgba(0,0,0,0.22);
  visibility: hidden;
  opacity: 0;
  transition:3s ease;
}
.form_login.active{
  visibility: visible;
  opacity:1;
}
.login{
  text-align:center;
  position: relative;
  font-size:2rem;

}
#form-email{
  width:0;
  height:150%;
  position:relative;
  left:15rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden;
}
#form-email.over{
  width:70%;
  left:3.8rem;
  opacity: 1;
  visibility: visible;
}
.text_email{
  font-size:1.44rem;
  font-weight:1rem;
  left:13.4rem;
  top: 7rem;
  transition:0.3s;
  text-align:center;
  position:absolute;
}
.text_email.over{
  opacity:0;
  visibility: hidden;
}

#form-password{
  width:0;
  height:150%;
  position:relative;
  top: 2.3rem;
  left:15rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden;
}
#form-password.over{
  width:70%;
  left:3.8rem;
  opacity: 1;
  visibility: visible;
}
.text_password{
  font-size:1.44rem;
  font-weight:1rem;
  left:11rem;
  top: 13.80rem;
  transition:0.3s;
  text-align:center;
  position:absolute;
}
.text_password.over{
  opacity:0;
  visibility: hidden;
}
.stay-loggedin{
  position: relative;
  top: 1.10rem;
  font-size:1.1rem;
}
.stay_loggedin{
  position:relative;
  top: 1.10rem;
  border-radius:1rem;
}
.images a{
  display:flex;
  justify-content:center;
  border-radius:0.5rem;
  transition:background-color 2.2s ease;
  text-decoration:none;
}
.images img{
  width:3rem;
}
.google{
  position: absolute;
  top: 66.2%;
  left:30%;
}
.github{
  position: absolute;
  top: 66.2%;
  left:60%;
}
.images a:hover{
  background-color:var(--background-hover)
}

.form_submit{
  width: 50%;
  font-size:2rem;
  position: relative;
  left:7rem;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:background-color 2.2s ease;
  color:var(--text-color);
  border-radius:0.5rem;
  box-shadow: 0 10px 20px
  rgba(0,0,0,0.19), 0 6px 6px 
  rgba(0,0,0,0.23);
}
.form_submit:hover{
  background-color:var(--background-hover);
}
.form_register{
  flex-direction:column;
  position: relative;
  top:2rem;
  left:5rem;
  width:40%;
  margin-left:17rem;
  padding:1.2rem;
  display: flex;
  justify-content:center;
  gap:3rem;
  background-color:var(--background-color);
  border-radius:1rem;
  box-shadow: 0 19px 38px
  rgba(0,0,0,0.30), 0 15px 12px
  rgba(0,0,0,0.22);
  visibility: hidden;
  opacity: 0;
  transition:3s ease;
}
.form_register.active{
  visibility: visible;
  opacity:1;
}
.register{
  text-align:center;
  position: relative;
  font-size:2rem;
}
.form_name{
  width:0;
  height:150%;
  position:relative;
  left:14rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden;
}
.form_name.over{
  width: 70%;
  left:3.5rem;
  opacity:1;
  visibility:visible;
}
.text-name{
  font-size:1.44rem;
  font-weight:1rem;
  left:13.4rem;
  top: 7rem;
  transition:0.3s;
  text-align:center;
  position:absolute; 
}
.text-name.over{
  opacity:0;
  visibility: hidden;
}
.form_email_register{
  width:0;
  height:150%;
  position:relative;
  left:14rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden;
}
.form_email_register.over{
  width: 70%;
  left:3.5rem;
  opacity:1;
  visibility: visible;
}
.text-email-register{
  font-size:1.44rem;
  font-weight:1rem;
  left:13.4rem;
  top: 11.4rem;
  transition:0.3s;
  text-align:center;
  position:absolute;
}
.text-email-register.over{
  opacity:0;
  visibility: hidden;
}
.form_password_register{
 width:0;
  height:150%;
  position:relative;
  left:14rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden; 
}
.form_password_register.over{
  width: 70%;
  left:3.5rem;
  opacity:1;
  visibility: visible;
}
.text-password-register{
  font-size:1.44rem;
  font-weight:1rem;
  left:11.42rem;
  top: 16rem;
  transition:0.3s;
  text-align:center;
  position:absolute;
}
.text-password-register.over{
  opacity:0;
  visibility: hidden;
}
.form_confirm_password{
  width:0;
  height:150%;
  position:relative;
  left:14rem;
  border-radius:1rem;
  text-align:center;
  background-color:var(--background-color);
  transition:0.4s;
  opacity: 0;
  visibility: hidden; 
}
.form_confirm_password.over{
  width: 70%;
  left:3.5rem;
  opacity:1;
  visibility: visible;
}
.text-confirm-password{
  font-size:1.44rem;
  font-weight:1rem;
  left:8rem;
  top: 20rem;
  transition:0.3s;
  text-align:center;
  position:absolute;
}
.text-confirm-password.over{
  opacity:0;
  visibility: hidden; 
}
.google2{
  position: absolute;
  top: 75%;
  left:30%;
}
.github2{
  position: absolute;
  top: 75%;
  left:60%;
}
.form_submit_register{
  width: 50%;
  font-size:2rem;
  position: relative;
  left:6.80rem;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:background-color 2.2s ease;
  color:var(--text-color);
  border-radius:0.5rem;
  box-shadow: 0 10px 20px
  rgba(0,0,0,0.19), 0 6px 6px 
  rgba(0,0,0,0.23);
}
.form_submit_register:hover{
  background-color:var(--background-hover);
}





input:focus::placeholder { 
  color: transparent; 
} 


@media(max-width:500px){
  .right.icon-header{
    display:none;
  }
  .sidebar{
    width: 0;
  }
  .menu.menu-toggle div:first-child{
  width:100%;
  transform:rotate(-45deg) translate(-0.2rem,0.3rem); 
  }
 .menu.menu-toggle div:nth-child(2){
   opacity:0;
  }
.menu.menu-toggle div:last-child{
  width: 100%;
  transform:rotate(45deg) translate(-0.2rem,0.3rem);
  }
}