body {
    margin: 0;
    height: 100vh;
}
.animated-background {
    background: linear-gradient(45deg, #f8d7f8, #d6b3f8, #b3d4ff, #a8c5ff);
    background-size: 150% 150%;
    animation: gradient 15s ease infinite;
  }
#mainbd {
    display: flex;
    width: 80vw;
    height: 70vh;
    padding: 3vh;
    padding-right: 0;
    /* padding-bottom: 3vh; */
    border-radius: 47px;
}

#content {
    height: 100%;
    width: 50%;
    border-radius: 20px;
    transition: 0.5s;
    flex-direction: column;
    /* background-color: lime; */
}

#listbd {
    height: 100%;
    width: 50%;
    border-radius: 42px;
    flex-wrap: wrap;
    margin: -3vh;
    margin-left: 0;
    /* background-color: lime; */
}


#ppimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.inlistbd {
    margin: 3vh;
}

.square {
    width: 40%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    transition: 0.5s;
    overflow: hidden;
}

.rect {
    height: 45.5%;
    width: 90%;
    border-radius: 20px;
    transition: 0.5s;
}

.link {
    height: 6vw;
    fill: #fff;
    padding: 1.5vh;
    transition: 0.5s;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    filter: 
        drop-shadow(0 0.5px 2px rgba(0, 0, 0, 0.1))
        drop-shadow(0 -0.5px 2px rgba(0, 0, 0, 0.1))
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
}

.good-text {
    font-family: Arial;
    font-weight: bold;
    font-size: 3vw;
    transition: 0.5s;
    color: #fff;
    margin: 3vh;
    text-shadow:
    0 0 1px rgba(255, 255, 255, 0.5),
    0 0 2px rgba(255, 255, 255, 0.5),
    0 0 3px rgba(0, 0, 0, 0.1), 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 -1px 2px rgba(0, 0, 0, 0.1);
}

.fancybox {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25)
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

#invisibl {
    width: 75%;
    height: 100%;
    flex-wrap: wrap;

}

#content:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.square:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.rect:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#content:hover .good-text {
    font-size: 4vw;
}

.good-text:hover {
    /* font-size: 6vh; */
    font-size: 4vw;
}

.link:nth-child(4) {
    order: -1;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}