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

.link{
    background-color: rgba(255, 255, 255, 0.601);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 10px 10px 0;
    height: 50px;
    width: 250px;
    font-size: 17px;
    padding: 5px;
    transform: translateY(100px);
    text-align: center;
    animation: in 1s cubic-bezier(0.66, 0, 0.2, 1) forwards;
}

@keyframes in{
    0%{
        margin-left: -500px;
    }
    100%{
        margin-left: 0px;
    }
}

.link.active{
    animation: out 1s cubic-bezier(0.66, 0, 0.2, 1) forwards;
}

@keyframes out{
    0%{
        margin-left: 0;
    }
    100%{
        margin-left: -500px;
    }
}

.link a{
    font-size: 17px;
    color: #06c;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(50%);
    margin-top: -2.5px;
}

.link a:hover{
    text-decoration: underline;
}

.color{
    display: flex;
    float: right;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

iframe .KxUm9 .BNB_2{
    display: none;
}

.link .color:hover{
    background-color: #06c;
}

.link .color:hover .fa-xmark{
    color: #fff;
}

.link .color .fa-xmark{
    color: rgb(130, 130, 130);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5.5px;
}