:root {
    --section-header-size : ;
    --section-header-color : rgb(106, 84, 28); 
}
#artist-img-container{
    /* background: url('../img/arwin_studio.webp'); */
    
    width : 100vw;
    height : 50vh;
    position : relative;
    display : flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5vw;
}


#overlay{
    height : 100%;
    width : 100%;
    /* background : url('../img/arwin_studio.webp'); */
    background-image : linear-gradient(to bottom, rgba(0, 0, 0, 0.793),  rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    position : absolute;
    z-index: 2; 
    text-align: center;
    align-content: center;
}
#overlay h1{
    color : rgb(0, 0, 0);
    font-size: clamp(50px, 5vw, 200px);
    /* -webkit-text-stroke: 2px rgb(107, 107, 107); */
    
}
#overlay h2{
    font-size : clamp(25px, 2.5vw, 100px);
    color : rgb(0, 0, 0);
}
.section{
    /* background-color: blue; */
    display : flex;
    flex-direction: column;
    align-items: center;
    margin-bottom : 20px;
}
.section p{
    margin-top : 20px;
    /* background-color: aqua; */
    max-width: 1250px;
    font-size: 1.5em;
    text-align: center;
    color : rgb(73, 58, 19);
    font-weight: 300;
}

.section-header h1{
    color: rgb(106, 84, 28);
    width : 100%;
    text-align: center;
    padding-bottom : 10px;
    border-bottom : 5px solid rgb(85, 64, 32)
}
#artist-img-container img{
    width : 100%;
    height : 100%;
    object-fit : cover;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1),rgba(0,0,0,1), rgba(0,0,0,0));
}

#work-samples{
    
}

#artist-contact-links{
    width : 100vw;
    /* background-color: blue; */
    display : flex;
    justify-content : center;
    gap : 40px;
    margin-top : 20px;
    
}

.socmed-icon{
    
    height : 70px;
    width : 70px;
    /* background-color: blue; */
}
.socmed-icon img{
    height : 100%;
    width : 100;
}


/* FADE IN ANIMATIONS */
#artist-img-container > :not(#overlay){
    animation : fadeIn 1s forwards;
}

#overlay{
    opacity : 0;
}

.audio-player-container{
    opacity : 0;
    animation : fadeIn 1s forwards;
    animation-delay : 1s;
}




@keyframes fadeIn{
    from{
        opacity : 0;
        transform : translateY(-40px);
    }
    to{
        transform : translateY(0);
        opacity : 1;
    }
}