body {
    padding: 5vh 5vw;
    overflow: hidden;
    background: url('/docs/images/blurryback.PNG') no-repeat center/cover;
    background-color: var(--black);
}

.title {
    font-size: 40px;
    width: 5vw;
    text-transform: uppercase;
    text-orientation: upright;
    writing-mode: vertical-lr;
    margin-left: -30%;
    background-color: rgba(129, 129, 129, 0.08);
    padding: 5vh 5vw;
    transition: .3s;
}

.link_cover {
    transition: all .3s;
    align-self: start;
    display: flex;
    gap: 5px;
}

.back {
    transform: rotate(135deg);
}

.title, .link {
    text-transform: uppercase;
}

.link {
    font-size: 24px;
}

.book_cover {
    visibility: hidden;
    opacity: 0;
    transform: translateX(0);
    transition: 
        opacity 0.3s ease,
        transform 0.3s ease;
    padding-top: 20px;
    color: #69be71;
    display: flex;
    gap: 5px;
    position: fixed;        
    margin-top: auto;        
}

.artist_info {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    background-color: #69be71;
    padding: 2vh 2vw;
    height: 20%;
    width: 30%;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.537), -15px -15px 30px rgba(0, 0, 0, 0.393);
}

.description {
    font-size: 18px;
}

.artist_photo {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 10vh;
}

.info_cover {
    text-align: end;
    gap: 30px;
    transition: transform 0.3s ease;
}

.name {
    text-transform: uppercase;
    color: var(--black);
    font-weight: 800;
    font-size: 32px;
}

.gallery_cover {
    display: flex;
    gap: 20px;
    margin-left: -8vw;
}

.gallery_image {
    width: calc(17vw - 10px);
    height: 350px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-bottom: solid 1.5px var(--green);
    border-top: solid 1.5px var(--green);
}

.gallery_container {
    align-items: center;
    margin-top: 20vh;
    gap: 10vw;
    display: flex;
    width: 70%;
}

.pricing {
    color: #808080;
    margin-top: 10px;
    font-size: 18px;
}

.grey {
    color: grey;
}

/* ====  HOVER EFFECT ==== */


.gallery_cover:has(.gallery_image:hover) .gallery_image {
    filter: blur(3px) brightness(.5);
}

.gallery_image:hover {
    filter: none !important;
    top: 0;
    left: 0;
    transform: scale(1.5) rotate(-2deg) translateY(-30px);
    z-index: 500 !important; 
    position: relative;
    filter: brightness(1.7);
    border: none;
}

.link_cover:hover {
    transition: .3s;
    transform:  translateX(-10px);
}

body > *:not(.artist_info) {
    transition: filter 0.3s ease;
  }
  .artist_info:hover ~ *,
  .artist_info:hover ~ * ~ * {
    filter: brightness(0.3);
  }
  
.gallery_container:has(.gallery_image:hover) .title,
.gallery_container:has(.gallery_image:hover) .pricing{
    filter: brightness(0.3);
}
  
.book_cover:hover {
    transform: translateX(-20px);
}
  
.artist_info:hover .book_cover {
    visibility: visible;
    opacity: 1;
    transition: 
    opacity 0.3s ease 0.1s, 
    transform 0.3s ease;
}
  
.artist_info:not(:hover) .book_cover {
    transition: 
      opacity 0s linear,
      visibility 0s linear 0s,
      transform 0s linear;
}

.artist_info:hover{
    height: 80%;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.854), -15px -15px 30px rgba(0, 0, 0, 0.735);
    padding-bottom: 7vh;
    z-index: 20;
    background-color: var(--black);
    border-bottom: 1.5px var(--green) solid;
}

.artist_info:hover .name {
    color: var(--white) !important;
}

.artist_info:hover .artist_photo {
    visibility: visible !important;
}

.artist_info:hover .info_cover {
    transform: translateY(-60px);
    transition: transform 0.3s ease;
}