v.css

/* Created by vedantK */


body {
    background-image: url(https://i.ibb.co/YfsNC1V/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);
    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;
}




#profile {
    position:fixed;
    background-color: #075F53;
    /* #25D366 #25B166 */
    width:100%;
    height:55px;
    left:0px;
    top:0px;
    opacity:1;
}

td .back {
    position:fixed;
    height:35px;
    width:20px;
    top:13px;
    left:0%;
}

td .propic {
    position:fixed;
    height:50px;
    width:50px;
    top:5px;
    left:6%;
}

.numberandstatus {
    position:fixed;
    color:white;
    display:block;
    top:0px;
    left:20%;
}

#num {
    position:fixed;
    top:0px;
    font-size:18px;
    font-weight:500;
    transition:0.7s ease-out;
}

#status {
    position:fixed;
    top:20px;
    font-size:12px;
}

.vidcall {
    position:fixed;
    height:60px;
    width:60px;
    top:0px;
    right:20%
}

.voicall {
    position:fixed;
    height:55px;
    width:55px;
    top:2px;
    right:10%
}

#tdots {
    position:fixed;
    height:35px;
    width:35px;
    top:11.5px;
    right:3%
}

.about {
    position:fixed;
    background-color:grey;
    text-align:center;
    color:white;
    top:55px;
    left:0%;
    width:100%;
    opacity:0.8;
    
}

#today {
    position:fixed;
    height:40px;
    width:65px;
    top:70px;
    left:40%;
    opacity:0;
}



footer {
    position:fixed;
    bottom:0px;
    margin-bottom:1%;
    width:100%;
}



td .typehere {
    width:80%;
}


input {
    position:absolute;
    border:1px solid black;
    border-radius:20px;
    height:40px;
    width:55%;
    font-size:110%;
    padding-left:10%;
    padding-right:19%;
    bottom:1%;
    left:0%;
    outline:none;
    overflow:hidden;
}

td #mic {
    position:absolute ;
    height:50px;
    width:50px;
    right:2.5%;
    bottom:-1px;
}

#stickers {
    position:fixed;
    height:30px;
    width:30px;
    bottom:11px;
    left:4%
}

#doc {
    position:fixed;
    height:35px;
    width:35px;
    bottom:9px;
    right:24%;
}

#cam {
    position:fixed;
    height:35px;
    width:35px;
    bottom:9px;
    right:15%;
}

#body {
    margin-bottom:15%;
    background-attachment: fixed;
    overflow-x:auto;
}


#message {
    position:right;
    border-radius:4px 4px 4px 4px;
    margin-left:40%;
    margin-right:10px;
    background-color:#E1FEC4;
    word-wrap:break-word;
    overflow:auto;
    margin-top:2%;
    /*border-bottom:0.1px solid black;
    border-left:0.1px solid black;*/
}



#messagetext {
    margin-left:10%;
    width:70%;
    word-wrap:break-word;
    overflow:hidden;
    
}

#messagetext2 {
    width:80%;
    word-wrap:break-word;
}

#senttime {
    vertical-align:bottom;
    font-weight:300;
    font-size:10px;
    width:25%;
    opacity:0.8;
    overflow:hidden;
    
}

#senttime2 {
    vertical-align:bottom;
    font-weight:300;
    font-size:10px;
    opacity:0.8;
    width:20%;
}


#ticks {
    vertical-align:bottom;
    text-align:right;
    width:5%;
    
}
#ticks img {
    height:15px;
    width:30px;
    margin-top:15%;
}

#msgtable {
    table-layout:fixed;
}

#reply {
   display:inline-block;
   border-radius:4px 4px 4px 4px;
   background-color:white;
   height:5%;
   width:70%;
   margin-top:2%;
   margin-left:10px;
   /*border-bottom:0.1px solid black;
   border-right:0.1px solid black;*/
}

#reply p {
    vertical-align:center;
    text-align:right;
}


#voicecall {
    position:fixed;
    left:center;
    top:35%;
    background-color:white;
    height:125px;
    width:90%;
    margin-left:3%;
    border-radius:5px;
    opacity:1;
    display:none;
    
}

#voicecall p {
    margin-left:10%;
    font-weight:400;
    opacity:1;
}



#voicecall td {
    color:#128C7E;
    font-weight:600;
    opacity:1;
}

#voicecall table {
    margin-right:5%;
    border-spacing:15px;
    opacity:1;
}

#blank {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:black;
    opacity:0.5;
    display:none;
}

#voicecall a {
    color:#128C7E;
    text-decoration:none;
}

#videocall {
    position:fixed;
    left:center;
    top:35%;
    background-color:white;
    height:125px;
    width:90%;
    margin-left:3%;
    border-radius:5px;
    opacity:1;
    display:none;
    
}

#videocall p {
    margin-left:10%;
    font-weight:400;
    opacity:1;
}



#videocall td {
    color:#128C7E;
    font-weight:600;
    opacity:1;
}

#videocall table {
    margin-right:5%;
    border-spacing:15px;
    opacity:1;
}


#options {
    position:fixed;
    display:inline-block;
    background-color:white;
    border-radius:4px;
    top:1%;
    right:1%;
    display:none;
    transition:5s;
}

#options div {
    font-weight:300;
    padding:20px;
    border-bottom:0.1px solid grey;
}

.opt:active {
    background-color:lightgrey;
}

#options div:last-child {
    position:absolute;
    color:green;
    left:100px;
    bottom:-2px;
}


#options div:last-child img{
    height:15px;
    width:15px;
}

#options2 {
    position:fixed;
    display:inline-block;
    background-color:white;
    border-radius:4px;
    top:1%;
    right:1%;
    display:none;
    color:black;
    
}

#options2 div {
    font-weight:300;
    padding:20px;
    padding-left:20px;
    padding-right:88px;
    border-bottom:0.1px solid grey;
}


#follow {
    color:black;
    text-decoration:none;
}

#rec_bubble {
    position:absolute;
    margin-left:-4px;
    margin-top:-6.8px;
    height:0px;
    width:0px;
    background-color:transparent;
    border:7px solid transparent;
    border-bottom:7px solid white;
    transform:rotateZ(45deg);
    border-radius:3px;
}

#sen_bubble {
    position:absolute;
    right:14px;
    margin-top:-6.9px;
    height:0px;
    width:0px;
    background-color:transparent;
    border:7px solid transparent;
    border-bottom:7px solid #E1FEC4;
    transform:rotateZ(-45deg);
    border-radius:3px;
}