* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style-type: none;
      text-decoration: none;
      
    }


    a{
        color: black;
    }

    body {
      font-family: sans-serif;
      background: #f5f5f5;
    }

    .albums {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding: 1rem;
    }

    .album {
      background: #44a0e281;
      border-radius: 1rem;
      overflow: hidden;
      text-align: center;
      flex: 1 1 250px; 
      max-width: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
    }

    .singer {
      width: 100%;
      min-height: 270px;
      object-position: center;
      object-fit: cover;
      border-radius: 0.5rem;
    }

    .albumName {
      font-size: 1.2rem;
      margin: 1rem 0 0.5rem 0;
    }

    .albumDescription {
      font-size: 0.95rem;
      color: #333;
    }


    @media (max-width: 768px) {
      .album {
        max-width: 100%;
      }
    }

    


        
    .mahsa {
        position: fixed;
        bottom: 25px;
        right: 25px;
        border-radius: 50%;
        z-index: 999;

        .circle {
            width: 180px;
            height: 180px;

            &::before,
            &::after {
                content: '';
                width: 175px;
                height: 175px;
                position: absolute;
                top: -5px;
                left: -5px;
                transition: 1s;
                rotate: 10deg;
            }

            &::before {
                background-color: gray;
                border-radius: 30% 70% 35% 65% / 30% 36% 64% 70%;
                z-index: -998;
            }

            &::after {
                background-color: rgb(49, 49, 49);
                border-radius: 64% 36% 61% 39% / 43% 36% 64% 57%;
                z-index: -999;
            }

            >img {
                width: 165px;
                height: 165px;
                border-radius: 50%;
                object-fit: cover;
                object-position: bottom;
            }

        }

        &:hover {
            >a {
                >i {
                    visibility: visible;
                }
            }

            .circle {

                &::before,
                &::after {
                    rotate: 45deg;
                }
            }
        }

        >a {
            >i {
                font-size: 28px;
                color: black;
                transition: .6s;
                position: absolute;
                visibility: hidden;

                &:hover {
                    color: #7e7e7e;
                }
            }

            &:nth-of-type(1) {
                >i {
                    top: -5px;
                    left: -30px;
                }
            }

            &:nth-of-type(2) {
                >i {
                    top: 35px;
                    left: -52px;
                }
            }

            &:nth-of-type(3) {
                >i {
                    top: 85px;
                    left: -52px;
                }
            }

            &:nth-of-type(4) {
                >i {
                    top: 125px;
                    left: -30px;
                }
            }
        }
    }