/* ------------ Created BY InCoder ------------ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #202020;
    font-family: 'Poppins', sans-serif;
}

.inBtn{
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    position: absolute;
    padding: 8px 15px;
    border-radius: 8px; 
    transition: background .2s;
    border: 2px solid #b81cbc;
    background-color: #b81cbc;
}

.inBtn:hover{
    border: 2px solid #a81aac;
    background-color: #a81aac;
}

.modal{
    opacity: 0;
    z-index: 1;
    width: 25rem;
    margin: 0 15px;
    border-radius: 10px;
    pointer-events: none;
    transition: opacity, transform 1s;
    transform: translateY(-50px);
    background-color: #242526;
}

.modal.show{
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
}

.modal .header{
    color: #fff;
    display: flex;
    padding: 10px 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff12;
}

.modal .header h2{
    margin-left: 10px;
}

.modal .close-icon{
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    background-color: rgb(255 255 255 / 4%);
}

.modal .close-icon:hover{
    background-color: rgb(255 255 255 / 10%);
}

.body{
    padding: 10px 15px 0 15px;
}

.body p{
    color: #fffffff5;
}

.social-icon{
    display: flex;
    margin: 15px 0px;
    align-items: center;
    justify-content: space-evenly;
}

.social-icon a{
    width: 3rem;
    height: 3rem;
    display: flex;
    font-size: 1.4rem;
    border-radius: 50%;
    align-items: center;
    text-decoration: none;
    justify-content: center;
    transition: .1s linear;
}

.facebook{
    color: #1877f2;
    border: 2px solid #1877f2;
}

.facebook:hover{
    color: #fff;
    background-color: #1877f2;
}

.instagram{
    color: #e1306c;
    border: 2px solid #e1306c;
}

.instagram:hover{
    color: #fff;
    background-color: #e1306c;
}

.whatsapp{
    color: #25d366;
    border: 2px solid #25d366;
}

.whatsapp:hover{
    color: #fff;
    background-color: #25d366;
}

.twitter{
    color: #1da1f2;
    border: 2px solid #1da1f2;
}

.twitter:hover{
    color: #fff;
    background-color: #1da1f2;
}

.mail{
    color: #505264;
    border: 2px solid #505264;
}

.mail:hover{
    color: #fff;
    background-color: #505264;
}

.footer{
    padding: 0 15px 0 15px;
}

.footer p{
    color: #fffffff5;
}

.link-box{
    width: 100%;
    display: flex;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 6px 10px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffffff3d;
}

.link-box i{
    font-size: 20px;
    color: #ffffff9e;
}

.link-box input{
    width: 65%;
    height: 2.5rem;
    border: 0px;
    padding-left: 2px;
    font-size: 1.2rem;
    color: #a6a6a6;
    background-color: transparent;
}

.copy-link-btn{
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 8px; 
    transition: background .2s;
    border: 2px solid #b81cbc;
    background-color: #b81cbc;
    padding: 8px 8px!important;
}

.copy-link-btn:hover{
    border: 2px solid #a81aac;
    background-color: #a81aac;
}

        let modal = document.querySelector('.modal');
        let copyBtn = document.querySelector('.copy-link-btn');
        let toggleBtn = document.querySelector('.openModal');
        let closeBtn = document.querySelector('.close-icon');
        
        function copyToClipboard() {
            let linkInput = document.querySelector('#linkInput');
            linkInput.select();
            linkInput.setSelectionRange(0, 99999);
            if(navigator.clipboard.writeText(linkInput.value)){
                return true;
            }
        }

        copyBtn.addEventListener('click', function () {
            if(copyToClipboard()){
                copyBtn.innerHTML = 'Copied';
                setInterval(function(){
                    copyBtn.innerHTML = 'Copy Link';
                }, 2000);
            }
        });

        toggleBtn.addEventListener('click', function () {
            modal.classList.add('show');
        });

        closeBtn.addEventListener('click', function () {
            modal.classList.remove('show');
        });