#home-logo{
    /* position:fixed;
    top:1vh;
    left:1vh; */
    position:static;
    max-height:5rem;
    aspect-ratio: 1 / 1;
    background-color: rgb(0, 0, 0, 0.7);
    border-radius:50%;
    display:flex;
    justify-content: center;
    align-items:center; 
    border-radius:10em;
    transition:all 0.2s;
}
#home-logo:hover{
    transform:scale(0.9);
    background-color: rgb(0,0,0,1);
}
#home-logo img{
    object-fit: contain;
    width:90%;
}
.unread-count-style {
    position: absolute;
    top: 0;
    right: 0;
    font-size:90%;
    background-color: #0f56b2;
    color: white;
    border-radius: 50%;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 20px; /* Adjust as needed for the circle size */
    width: 20px; /* Should be equal to height for a perfect circle */
    }


    #comms-btns{
        position:fixed;
        bottom:2vh; 
        right:10px;
        width: 200px; 
        min-width: 200px;
        background-color: rgb(255, 255, 255, 0.2);
        border: rgb(255, 255, 255, 0.5) solid 1px;
        border-radius:10em;
        backdrop-filter:blur(10px); 
        display:flex; 
        flex-direction:row; 
        align-items: center; 
        justify-content: space-around;
        padding:0.4em;
    }
    #sidebar{
        position:fixed;
        bottom:2vh;
        left:2vw;
        padding:5px; 
        background-color: rgb(255, 255, 255, 0.2);
        border: rgb(255, 255, 255, 0.5) solid 1px;
        border-radius:10em;
        backdrop-filter:blur(10px); 
        display:flex; 
        flex-direction:column; 
        align-items: center; 
        justify-content: space-around;
        height:auto;
        gap: 0.5rem;
        transition: all 0.4s ease;
    }

    .btn{
        display:flex;
        justify-content:center;
        align-items: center;
        padding:0px 0px 0px 0px;
        box-shadow: none;
        aspect-ratio: 1 / 1 !important;
        height:2.5rem !important;
        width:2.5rem !important;
        cursor:pointer;
        background-color:#666;
        flex-shrink:0;
        transition: all 0.4s ease;
    }
    .btn:hover{
        background-color: #0f56b2;
        scale:1.02;
        /* box-shadow: 4px 4px 48px #666; */
    }
    .btn-iframe{
        visibility: visible !important;
        display:flex;
        justify-content: center ;
        width:100%;
        border-radius: 50rem;
      }
    .btn-iframe img{
        scale:0.8;
    }
    
    .btn img{
        object-fit:contain;
        padding:0px;
        height:100%;
        aspect-ratio: 1 / 1;    
    }


    #ai-ar {
        font-size: 1.2rem;
        color: white;
        border-radius: 50rem;
        background-size: 300% 300%;
        transition: background-position 0.6s ease, transform 0.3s ease;
        cursor: pointer;
        }
    #ai-ar:hover {
        transform: scale(1.02);             
        }