@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body{
    background-color: rgb(255, 252, 238, 0.8);
    font-size: 18px
}

.box{
    width: auto;
    text-align: center;
    padding: 10px;
    margin: 10px;
    color:white;
}

.tng{
    width: 50%;
}

#fb {
    width: 3%;
}

#tngfooter {
    width: 10%;
}

.navbar-toggler{
    background-color:transparent;
        border: 1px dashed rgb(131, 129, 87);
}
.navbar-toggler-icon{
    background-image:url('./images/menu.png');
}

#share{
    position: fixed;
    bottom:50%;
    background-color:rgb(4, 115, 6);
    right:-10px;
    color:white;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1;
    transform: rotate(90deg);
}





@media only screen and (max-width: 600px) {
.tng{
    width: 100%;
    align-items: center;
    display: block;
        margin-left: auto;
        margin-right: auto;
}
.donorlist{
    font-size: 15px;
}

#fb{
    width: 10%;
}

#tngfooter{
    width: 30%;
}

#title{
    font-size: 20px;
}

}

/* CSS for the Residents */
.flex-container {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}


.card {
    width: 350px;
    background-image: url('/images/Wall\ pots.jpg');
    background-size: cover;
    border: 1px solid rgb(143, 194, 170);
    border-radius:10px;
    cursor: pointer;
    transition: all 0.5s;
}

.image img {
    transition: all 0.5s
}

.card:hover .image img {
    transform: scale(2.5)
}

.btn1{
    width: 100px;
    height: 100px;
    border-radius: 10%;
}

.name {
    font-size: 22px;
    font-weight: bold
}

.idd {
    font-size: 14px;
    font-weight: 600
}

.idd1 {
    font-size: 20px
}

.number {
    font-size: 22px;
    font-weight: bold
}


.text span {

    text-align: left;
    font-size: 15px;
    color: black;
    font-weight: 500
}

hr .new1 {
    border: 1px solid
}

.join {
    font-size: 14px;
    color: #a0a0a0;
    font-weight: bold
}

.date {
    background-color:lightblue;
}

.overlay{
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    opacity: 0.8;
}

/*End of Residents */
