*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(139 190 190);;
}
.shareLinkXbn{
    cursor: pointer;
    border-style:none;
    font-size:20px;
    position:absolute;
    background-color:#00000000;
    color:rgb(0, 0, 0);
    top:2px;
    right:5px;
    width:20px;
    height:20px;
    text-align:center;
    transition: 0.3s linear;
    font-weight: bold;
}
.shareLinkXbn:hover{
    color: #e62012ea;
    text-shadow: 0px 0px 15px rgba(255, 217, 111, 0.856);
}
.sharebn{
cursor: pointer;
border-style:none;
font-size:20px;
position:absolute;
background-color:#ffffff00;
color:white;
bottom:0px;
left:0px;
width:50px;
height:50px;
padding-right:20px;
padding-top:20px;
text-align:center;
transition: 0.3s linear;
font-weight: 9;
border-radius: 0px 50px 0px 0px;
}
.sharebn:hover{
background-color:#ffffff;
padding-right:10px;
padding-top:10px;
color:rgb(255 154 0);
box-shadow: 0px 0px 20px rgb(255 202 132 / 77%);
}
.shareLinkb{
z-index:1000;
position: fixed;
width: 100%;
height: 100%;
background-color: rgb(66 66 66 / 30%);
display: flex;
justify-content: center;    
align-items: center;  
transition: 0.5s linear;
animation-name: shareLinkb;
animation-timing-function:ease-in-out;
animation-duration:2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;  
display:none;
overflow: hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.shareLink{
z-index:2000;
position: absolute;
width: 400px;
height: 400px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 15px rgb(160 160 160 / 90%);
display: flex;
justify-content: center;    
align-items: center;   
border-radius: 20px;
animation-name: shareLink;
animation-timing-function:ease-in-out;
animation-duration:2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;  
overflow: hidden visible;
}
.shareLinkinputdiv{
    position: relative;
    width: 400px;
    font-size:20px;
    text-align: center;
    height: 50px;
    display: flex;
    justify-content: center;    
    align-items: center;  
    top:150px;
    padding-left: 5%;
    padding-right: 5%;
}
.shareLinkinput{
border-radius: 50px;
position: relative;
width: 300px;
font-size:20px;
text-align: center;
height: 25px;
display: flex;
justify-content: center;    
align-items: center;  
border-style:none;
border-color:rgb(0 0 0 / 94%);
border-style:solid;
border-width:1px;
transition: 0.3s linear;
outline: none;
overflow:hidden;
padding-left: 2px;
padding-right: 2px;
}
.shareLinkinput:hover{
cursor: pointer;
box-shadow: 0px 0px 15px #ffcd8785;
border-color:rgb(255 220 192 / 75%);
background-color:#fff7efa1;
}
.shareLinkbn{
background-color: rgb(168, 212, 238);
color: rgb(255, 255, 255);
position: relative;
text-align: center;
width: 60px;
height: 27px;
display: flex;
justify-content: center;    
align-items: center;  
font-weight: bold;
font-size: 18px;
transition: 0.2s linear;
cursor: pointer;
border-color:rgb(0 0 0 / 94%);
border-style:solid;
border-width:1px;
border-radius: 50px;
margin-left:10px;
}
.shareLinkbn:hover{
background-color: rgb(181 225 255 / 94%);
}
.shareLiinkDiv{
    top:300px;
    position: absolute;
    width: 95%;
    height: 1px;
    text-align: center;
    background-color: black;
    display: flex;
    justify-content: center;    
    align-items: center;
}
.shareLiinkP{
    top:-3px;
    position: relative;
    font-size: 15px;
    width: 65px;
    text-align: center;
    height: 15px;
    color: black;
    background-color: white;
}
.shareLiinkbnDiv{
    top:200px;
    position: absolute;
    width: 95%;
    height: 1px;
    text-align: center;
    background-color: black;
    display: flex;
    justify-content: center;    
    align-items: center;
}
.shareLiinkbnP{
    top:-3px;
    position: relative;
    font-size: 15px;
    width: 95px;
    text-align: center;
    height: 15px;
    color: black;
    background-color: white;
}
.sharebndiv{
width: 300px;
height: 40px;
top:230px;
text-align: center;
position: absolute;
display: flex;
justify-content: center;    
align-items: center;
}
.sharebnfb{
padding-right: 20px;
font-size: 40px;
cursor: pointer;
transition: 0.2s linear;
}
.sharebnline{
padding-right: 20px;
font-size: 40px;
cursor: pointer;
transition: 0.2s linear;
}
.sharebntwitter{
font-size: 40px;
cursor: pointer;
transition: 0.2s linear;
}
.sharebnfb:hover{
    color:#2ca2ffed;
    text-shadow: 0px 0px 15px #93cffc96;
}
.sharebnline:hover{
    color:#0ddb03ed;
    text-shadow: 0px 0px 15px #a0ff9c80;
}
.sharebntwitter:hover{
    color:#18c4fedb;
    text-shadow: 0px 0px 15px #7addffa3;
}
.shareqrdiv{
width: 125px;
height: 125px;
top:50px;
text-align: center;
position: absolute;
display: flex;
justify-content: center;    
align-items: center;
}
.qrcode{
    position: relative;
}
.shareLinkqrDiv{
    top:25px;
    position: absolute;
    width: 95%;
    height: 1px;
    text-align: center;
    background-color: black;
    display: flex;
    justify-content: center;    
    align-items: center;
}
.shareLinkqrP{
    top:-3px;
    position: relative;
    font-size: 15px;
    width: 70px;
    text-align: center;
    height: 15px;
    color: black;
    background-color: white;
}
.shareLinkbnAdivDiv{
    position:fixed;
    width: 100%;
    height: 0px;
    display: flex;
    justify-content: center;    
    align-items: center;    
    z-index:2000;
}
.shareLinkbnAdiv{
    top:20px;
    position:absolute;
    min-width:50px;
    width:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:rgba(100, 255, 77, 0.75);
    min-height:40px;
    height:auto;
    display: flex;
    justify-content: center;    
    align-items: center;
    border-radius: 10px;
    animation-name: shareLinkbnAdiv;
    animation-timing-function:ease-in-out;
    animation-duration:1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;  
    display: none;
    box-shadow: 0px 0px 10px rgba(200, 200, 200, 1);
}
.shareLinkbnA{
    font-size:20px;
    color:white;
}
.shareNowLinkDiv{
    position: absolute;
    width: auto;
    height: auto;
    bottom: 0px;
    left: 0px;
    padding-left:10px;
    padding-bottom:5px;
    font-size:15px;
}
.shareNowLinkDiv input{
    margin-right:2px;
    cursor: pointer;
}
@keyframes shareLinkbnAdiv{
    from{
        opacity: 0;
        margin-top: -5%;
       }
       50%{
        margin-top: 1%;
       }
       to{
        opacity: 1;
       }
}
@keyframes shareLinkbnAdivexit{
    from{
        opacity: 1;
        margin-top: 0%;
       }
       50%{
        margin-top: 0.5%;
       }
       to{
        margin-top: -100%;
        opacity: 0;
       }
}
@keyframes shareLink{
    from{
        opacity: 0;
        margin-top: -100%;
       }
       50%{
        margin-top: 10%;
       }
       to{
        opacity: 1;
       }
}
@keyframes shareLinkexit{
    from{
     opacity:1;
    }
    50%{
    margin-top: 5%;
    }
    to{
     opacity: 0; 
     margin-top: -100%;
     display: none;
    }
}
@keyframes shareLinkb{
    from{
     opacity:0;
    }
    to{
     opacity: 1; 
    }
}
@keyframes shareLinkbexit{
    from{
     opacity:1;
    }
    to{
     opacity: 0; 
     display: none;
    }
}
@media (max-width:1000px){
    .shareLink{
        width: 90%;
    }
    .shareLinkinputdiv{
        width:100%;
    }
    .shareLinkinput{
        width: 95%;
        font-size:15px;
    }
    .sharebn{
        padding-top:20px;
        padding-right:20px;
    }
    .sharebn:hover{
        padding-top:2%;
        padding-right:2%;
    }
    .shareLinkbnAdiv{
        width:70%;
    }
}
@media (max-height:400px){
    .shareLink{
       height: 90%;
    }
}