@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');
/* font for heading text font-family: 'Philosopher', sans-serif; */
/* font for paragraph text font-family: 'Nunito', sans-serif; */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    



body{background-color:#e9e9e9 !important;}
#mine-navigation-bar{
    position: fixed;
    width: 100%;
    z-index: 10;
    background-color:#e9e9e9 !important;
}
.navbar-toggler {border: none !important; outline: none !important;}

/* START INDEX PAGE - CONTENT SECTION  */
#content{text-align: left;}
#content img{
    height: 350px;
    width: 400px;
    animation:  imageAnimation 2s alternate forwards infinite;
    margin-top: 6rem;
}
/* @keyframes imageAnimation{
    50%{
        transform: translateY(-5px);
       
    }
    100%{
        transform: translateY(5px);
    
    }
} */
#content h1{
    font-family: 'Philosopher', sans-serif;
    font-size: 3rem;
    color: #3c403D; 
    margin-top:10rem;
}
#content p{
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #39603d;
}
.mine-btn{
    height: 3rem;
    width: 9rem;
    display: block !important;
    background-color: #000000;
    margin-top: 1rem;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    
    border-top-right-radius: 4rem !important;
    border-bottom-right-radius: 2rem !important;
    border-top-left-radius: 5rem !important;
    border-bottom-left-radius: 2rem !important;
}


/* START SIGNUP PAGE  */

#signup-form-container {text-align: left;}
#signup-content img {
 height: 100%;
 width: 100%;
 margin-top: 4rem;
 animation:  imageAnimation 2s alternate forwards infinite;
}
#signup-content h1  {
    font-family: 'Philosopher', sans-serif;
    font-size: 2rem;
    color: #3c403D; 
}
#signup-content h3 {
    font-family: 'Philosopher', sans-serif;
    font-size: 1rem;
    color: #3c403D; 
    margin-top: 6rem;
}
#signup-content p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #242424;
}
.form-group input{
    border: none !important;
    background-color: transparent !important;
    border-bottom: 2px solid #cacaca !important;
    font-family: 'Nunito', sans-serif;
}
input:focus{
   border: none !important;
   outline: none !important;
   border-bottom: 2px solid #1f1a63 !important;
   box-shadow: none !important;
}
.form-check {
    display: inline !important;
    font-family: 'Nunito', sans-serif;
}

/* START SIGN IN PAGE */


#signin-content h2{
    font-family: 'Philosopher', sans-serif;
    font-size: 3rem;
    color: #ecf1ed; 
    margin-top: 6rem;
}
#signin-content p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #e6e6e6;
    margin-top: 1rem;
}
a{text-decoration: none !important;}

/* START CHAT HOME PAGE */

#chat-home-content {background-color: #e9e9e9;}
#chat-home-content h1 {
    font-family: 'Philosopher', sans-serif;
    font-size: 3rem;
    color: #3c403D; 
    margin-top: 7rem;
}
.current-user-avatar {
    height: 100px;
    width: 100px;
    background-color: #39603D;
    border-radius: 50%;
    color: #fff;
    font-family: 'Philosopher', sans-serif;
    display: inline-block;
    margin-top: 5rem;
}
#genrate-avatar {
    font-size: 3rem;
    margin: 1rem;
}
#current-user-fullName {
    font-family: 'Philosopher', sans-serif;
}
#chat-home-content img {
   height: 200px;
   width: 200px;
   margin-top: 3rem;
}
#chat-home-content p{
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
}
#chat-box-container{
    background-color: #fff;
    border-radius: 4rem;
    height:500px; 
    padding: 30px;
}
#chat-box{
    overflow-y:scroll;
    height: 450px;
}
#time {
    display: block;
    text-align: center;
    margin: 0;
    font-size: 0.8rem;
}
#input {
    background-position:fixed;
    margin-top: 1rem;
}
#message-input{
    
    background-color: #fff;
    padding: 20px;
    
    
    padding: 0rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
}
.users-messages{ 
    background-color: #c2b500;
    margin: 1rem; 
    list-style: none;
    font-family: 'Nunito', sans-serif;
    font-size: 1.3rem;
    padding: 10px;
    color: #fff;
    overflow:hidden;
    text-overflow:ellipsis; 
    width:60%;
    border-radius: 0.9rem;
}
.mine-messages{
    background-color: #3c403D  !important;
    overflow: hidden;
    text-align: left;
    margin-top:1rem;
    margin-left:auto !important; 
    list-style: none;
    font-family: 'Nunito', sans-serif;
    font-size: 1.3rem;
    padding: 10px;
    color: #fff;
  
    overflow:hidden;
    text-overflow:ellipsis; 
    width:60%;
    border-radius: 0.9rem;
}
.user-name {
    font-family: 'Philosopher', sans-serif;
    font-size: 1rem;
    color: black;
    text-align: left;
    display: block;
    margin-right : 10px;
    margin-top: 0;
}
.print-time {
    font-family: 'Philosopher', sans-serif;
    font-size: 0.9rem;
    color: #fff;
    /* float: right; */
    display: block;
    margin: auto;
    padding-left: 1rem;
}
.user-avatar {
    height: 60px;
    width: 60px;
    background-color:#3c403D;
    border-radius: 50%;
    color: #fff;
    padding: 1rem;
    margin-bottom: -2rem;
}
.user-avatar-txt{
    font-family: 'Philosopher', sans-serif;
    font-size: 1.3rem;
}
#user-input {
    border: none !important;
    margin-top:0.7rem;
    width: 80%;
    box-shadow: none;
    font-family: 'Nunito', sans-serif;
}
.form-group{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    
}
.send-btn {
    border: none;
    outline: none;
    background-color: transparent;height: auto;
    height: auto;
    width: auto;
    
    cursor: pointer;
}
.fa-paper-plane {font-size: 1.5rem; margin-top:0.5rem;}
.bottom-line {background-color: #e3e7e4; width: 50%; height: 0.1rem; border-radius: 2rem; margin-left: auto; margin-right: auto;}