.container {
    margin: 0 auto;
    border: 2px solid white;
    box-sizing: border-box;
    position: relative; 
    height: 100vh;
    width: 100vw;
}

.sticky-note {
    padding: 10px;
    width: 18vw;
    position: absolute;
    cursor: move;
    border-radius: 2%;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    overflow: hidden; 
}


.username {
    font-weight: bold;
    margin-bottom: 5px;
}

.message {
    margin-bottom: 10px;
}

.time {
    font-size: 12px;
    color: #666;
}



.light {background-color: #f0f0f0;color: #333;}
.dark {background-color: #333;color: #fff;}

.red { background-color: #FF0000; color: #FFFFFF; }
.orange { background-color: #FFA500; color: #FFFFFF; }
.yellow { background-color: #FFFF00; color: #333333; }
.green { background-color: #008000; color: #FFFFFF; }
.blue { background-color: #0000FF; color: #FFFFFF; }
.purple { background-color: #800080; color: #FFFFFF; }



.purple .time{
    color: #f0f0f0;
}
.dark .time{
    color: #f0f0f0;
}
.green .time{
    color: #f0f0f0;
}
.blue .time{
    color: #f0f0f0;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.delete-icon{
    height:auto;
    width: auto;
    color: gold;
    text-shadow: -1px -1px 0 #c8ff00,  1px -1px 0 #fe0505,-1px 1px 0 #4102ff,1px 1px 0 #f511c0;
    margin-top:10px ;
    border: #666 dashed 1px;
    text-align: center;
}