.section-web-projects {

    --proj-def-color: #999; /* under selectd projectse p color*/

    h1{
        color: white;
        font-weight: 600;

    }



    h2{
        color: white;
        font-size: 20px;
        font-weight: 600;

    }

    a{
        text-decoration: none;
        transition: all 0.34s;
        margin-bottom: 10px;
    }  a:hover{
        opacity: 0.5
    }
}

/* play buttons */
#projects button{
height: 30px;
width: 30px;
background: #333;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
color: white;
font-size: 20px;
transition: all 0.34s;
cursor: pointer;
font-weight: 900;
font-family: arial;
padding:20px;
}

#projects button:hover{
    transform: scale(1.1);
}

#projects button:active{
    transform: scale(0.9);

}   


.section-web-projects, .section-dj{
padding-bottom: clamp(20px, 10vh, 100px);
padding-top: clamp(20px, 5vh, 100px);

}

.section-web-projects{
background: radial-gradient(circle at 40%, #002c41, black 60%) #222;
margin-top: -1px; /* hide the space that appears due to the fractional calc of clamp vh */

.section-intro-p {
    width: clamp(320px, 50%, 600px);
    margin: 20px auto;
    text-align: center;
    color: var(--proj-def-color);
    margin-bottom: 10vh;
    line-height: 35px;

}

.project-description-container{
    display: flex;
    flex-direction: row;

}

}



.section-web-projects:nth-child(even){
background: radial-gradient(circle at 60%, #3e002f, black 50%) #111;

}




.project-description{
padding: 30px 10px;
line-height: 40px;
max-width: 600px;
font-size: calc(var(--default-font-size) + 5px);
font-weight: 600;
color: rgba(255,255,255,0.6);

}

.project {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
padding: 0;
position:relative;
margin-top: 40px;

}

.video-container{
background: black;
margin-top: 10px;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
height: auto;
width: 100%;

}




.view-more{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: fit-content;
display: flex;
flex-direction: rows;
text-align: center;
padding: 7px;
justify-content: end;
align-items: center;
gap: 15px;
border-radius:10px;

button {
    
    border-radius: 50px;

} 


}


.tech-stack-container {

    display: flex;
    background: black;
    border-radius: 3px;
    gap: 3px;
    padding: 4px;

    
span{
    font-size: 12px;
    font-weight: 600;
    }
}


/* give each tec/language color similar to their logo*/
.tech-html{
    color:  white;
}

.tech-css{
   color: #3068f2;;
}

.tech-js {
color: yellow
}

.tech-php{
    color: #a7adfe;
}

.tech-sql{
    color: #add2f4;
}

.project video{
object-fit: cover;
min-height: 250px;
height: auto;
width: 100%;
transition: all 0.8s;
opacity: 0.2;

}




/* dj section */

.section-dj{
--color1: gray;
background: radial-gradient(circle at 62% 55%, #334, black 49%) #111


}
.dj-video-container{
height: auto;
width: 100%;
aspect-ratio: 16 / 9; 
border: 1px solid var(--color1);
background: #111;
border-radius: 10px;
overflow: hidden;
animation: loading-video 1s infinite linear;
    video{
        object-fit: cover;
        min-height: 250px;
        height: auto;
        width: 100%;
    }
}


@keyframes loading-video{

    50%{
    background: #222;
    }
}


.dj-video-controls{
height: fit-content;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 20px;
div {
    
    padding: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    display: flex;
    gap: 10px;

    

    button{
        border-radius: 50%;
        font-weight: bold;
    }
}
}


@media screen and (max-width: 550px) {
    #projects .project-description-container svg{
        display: none;
        /* remove the svg arrow on small devices */
    }
    
}