@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  /*background: #f2f2f2;
  background: linear-gradient(-135deg, #c850c0, #ed4f50); */
}
::selection{
  background: #ed4f50;
  color: #fff;
}
.wrapper{
  width: 380px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  line-height: 100px;
  color: #fff;
  user-select: none;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(-135deg, #ed4f50, #ed4f50);
}
.wrapper form{
  padding: 10px 30px 50px 30px;
}
.wrapper form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.wrapper form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 17px;
  padding-left: 20px;
  border: 1px solid lightgrey;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
  border-color: #ed4f50;
}
.wrapper form .field label{
  position: absolute;
  top: 50%;
  left: 20px;
  color: #999999;
  font-weight: 400;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
form .field input:focus ~ label,
form .field input:valid ~ label{
  top: 0%;
  font-size: 16px;
  color: #ed4f50;
  background: #fff;
  transform: translateY(-50%);
}
form .content{
  display: flex;
  width: 100%;
  height: 50px;
  font-size: 16px;
  align-items: center;
  justify-content: space-around;
}
form .content .checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
    color: #ed4f50;
}
form .content input{
  width: 15px;
  height: 15px;
  background: red;
}
form .content label{
  color: #262626;
  user-select: none;
  padding-left: 5px;
}
form .content .pass-link{
  color: #ed4f50;
}
form .field input[type="submit"]{
  color: #fff;
  border: none;
  padding-left: 0;
  margin-top: -10px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(-135deg, #ed4f50, #ed4f50);
  transition: all 0.3s ease;
}
form .field input[type="submit"]:active{
  transform: scale(0.95);
}
form .signup-link{
  color: #262626;
  margin-top: 20px;
  text-align: center;
}
form .pass-link a,
form .signup-link a{
  color: #ed4f50;
  text-decoration: none;
}
form .pass-link a:hover,
form .signup-link a:hover{
  text-decoration: none;
}
/* Style the navigation bar */
.navbar {
    color: #ed4f50; /* Dark gray color for text in the navbar */
    position: fixed; /* Fix navbar position at the top */
    width: 100%; /* Full width */
    top: 0; /* Align to the top */
    z-index: 1000; /* Ensure it stays on top */
    background-color: #fff !important; /* Background color for visibility with high specificity */
    border-bottom: none; /* Ensure no border at the bottom */
    box-shadow: none; /* Remove box-shadow to avoid visible line */
    padding-left: 80px; /* Padding for larger screens */
    padding-right: 80px; /* Padding for larger screens */
}

/* Style the navbar-toggler (menu icon) */
.navbar-toggler {
    color: #fff; /* Dark gray color for icon if needed */
}

/* Adjust spacing within navbar items */
.navbar-nav {
    margin-left: auto; /* Push items to the right side */
}

/* Media query for mobile devices */
@media (max-width: 767.98px) {
    .navbar {
        padding-left: 10px; /* Padding for mobile devices */
        padding-right: 10px; /* Padding for mobile devices */
    }
}