/* background-image:url('Images/background.png')*/

    *{
    padding: 0;
    margin:0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
}
:root{
    --bg-color: #ffff;
--text-color:#1111;
--main-color:#c8815f;
--big-font:4.5rem;
--h2-font:3.3rem;
--h3-font:2rem;
--normal-font:4.5rem;         
}
         
         .form {
    width: 500px;
    border-radius: 20px;
    height: 135vh;
    background-color: beige; /* Change background color to beige */
}

.login-heading {
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    color:black; /* Change text color to brown */
}

.username {
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: black; /* Change text color to brown */
}

input {
    width: 100%;
    border: 1px solid transparent;
    box-shadow: none;
  
}

.facebook-icon,
.twitter-icon,
.google-icon {
    border: 1px solid transparent;
    padding: 2% 4%;
    margin-left: 2%;
    border-radius: 50px;
    background-color: #046BAA; /* Change background color to brown */
    color: beige; /* Change text color to beige */
    font-size: 25px;
}

.twitter-icon {
    padding: 2% 3%;
    background-color: #1da1f2;
}

.google-icon {
    padding: 2% 3.5%;
    background-color: #ea4335;
}

.facebook-icon:hover,
.twitter-icon:hover,
.google-icon:hover {
    background-color:#e60e0e;
    transition: 0.5s linear;
}

.hr-1,
.hr-2 {
    border: 1px solid rgb(194, 187, 187);
    transition: 0.2s linear;
}

.input-1,
.input-2 {
    font-size: 18px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    color:black; /* Change text color to brown */
}

#user {
    font-size: 20px;
    color: rgb(194, 187, 187);
}

#lock {
    font-size: 20px;
    color: rgb(194, 187, 187);
}

.login-button,
.signup-button {
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 3% 3%;
    background-size: 300% 100%;
    background-image: linear-gradient(to right, beige, rgb(1, 13, 61), beige); /* Change gradient colors to beige and brown */
    font-family: Arial, Helvetica, sans-serif;
    transition: all 0.5s linear;
}

.login-button:hover,
.signup-button:hover {
    background-position: 100% 0%;
    transition: all 0.5s linear;
}



a:hover {
    text-decoration: none;
}

.forget-password {
    font-size: 15px;
    font-weight: 600;
    
}

.forget-password:hover,
.sign-up:hover {
    color: black;
}

.sign-up {
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:black;
}


.show-me {
    display: none;
}

*:focus {
    outline: none;
}

@media screen and (max-width: 550px) {
    .form {
        width: 450px;
    }
}

@media screen and (max-width: 425px) {
    .form {
        width: 380px;
    }
}

@media screen and (max-width: 375px) {
    .form {
        width: 330px;
    }
}

@media screen and (max-width: 320px) {
    .form {
        margin-left: -5%;
        width: 318px;
    }
}