/* resets */


:root{
    --primary-color:aquamarine;
    --secondary-color:azure;
    --terciary-text-color:rgba(146, 146, 146, 0.868);
    --card-background-color: ;
    --card-background-color-secondary:rgb(34, 34, 34);
    --header-font-size: ;
    --menu-background-color:rgba(20, 20, 20, 0.51);
    
}

* {
    box-sizing: border-box;
    a,p {
        color:azure;
        margin:0px;
        font-size:16px;
        text-align:justify;
    }
    h2,h4{
        color:aliceblue;
    }
}

body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    background-color:black;
}

#top-bar {
    box-sizing: border-box;
    display:flex;
    height:32px;
    gap:100px;
    justify-content:center;
    align-items:center;
    position:sticky;
    top:5px;
    background-color:var(--menu-background-color);
    z-index:10;

    >a {color:var(--terciary-text-color);
    text-decoration:none;
    font-size: 1rem;
    }

    .menu-toggle {
    display: none;
    }
}


/* Hero Assets */

#hero {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    flex:0 1 750px;
    background-color:black;
    width:100%;
    position:relative;
        background-image:
                linear-gradient(
            to right,
            rgba(0, 0, 0, 1) 10%,
            rgba(0, 0, 0, 0.95) 40%,
            rgba(0, 0, 0, 0.5) 70%,
            transparent 90%),
        url('../img/IMG_0080.jpeg');
        background-size:1500px;
        background-position:right;
        background-repeat:no-rerpeat;
}

#hero .content{
    width: 100%;
    flex:1 1 500px;
    display:flex;
    margin-top:24px;

    h1 {
    flex:0 1 auto;
    color:var(--primary-color);
    font-size: clamp(4rem, 4vw, 8rem);
    margin:0px;
    padding-left:1rem;
    }

    .text-container {
    flex:0 1 50%;
    justify-content:center;
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    padding-left:6rem;
        >p{
            font-size:1.5rem;
            padding:0 0 0 1rem;
        }
        
        .hero-text {
        display:flex;
        flex-direction:column;
        gap:0.5rem;
        padding:1rem 0 0 1rem;
        
        }
    }
}

/* explore my worlds section assets */

#explore-my-worlds{
    flex:1 1 450px;
    display:flex;
    flex-direction:column;
    margin-top:50px;
    
}

#explore-my-worlds .header{
    padding-left:32px;
    h2{
        font-size:32px;
        margin:0;
        color:aquamarine;
    }
    p{
        margin-bottom:48px;
    }
}

#explore-my-worlds .container {
    flex:1 1 400px;
    display:flex;   
    margin:16px;
    gap:24px;
    justify-content:center;
    p{
        font-size:14px;
        text-align: justify;
    }
}

#explore-my-worlds .container article{
    display:flex;
    flex-direction:column;
    height: 250px;
    flex:0 1 300px;
    background-color:rgba(11, 11, 47, 0.566);
    padding:24px;
    border-radius:16px;
    box-shadow: 5px 5px 5px  rgba(127, 255, 212, 0.592) ;

    header{
        
        margin-top:16px;
        h4{
            margin:0px;
            font-size:24px;
        }
        }
}

#explore-my-worlds .container article .content{
    margin-top:24px;

}

/* selected-work section assets */



#selected-work {
    flex:1 1 400px;
    display:flex;
    flex-direction: column;
    background-color:black;
    color:aliceblue; 
    header{
    padding-left:32px;
    h2{
        font-size:32px;
        margin:0;
        color:aquamarine;
    }
    p{
        margin-bottom:48px;
    }
    }
}

#selected-work .container {
    flex:1 1 450px;
    display:flex;
    padding:50px;
    gap:2rem;
    overflow-x: scroll;
}

#selected-work .container article{
    flex:1 1 400px;
    width:400px;
    display:flex;
    flex-direction:column;

    h4{
        font-size:18px;
        color:rgb(175, 171, 171);
    }
}


#selected-work article .image-placeholder {
    flex:1 1 auto;
    height:250px;
    
  
}

#selected-work article .image-placeholder  img{
    flex:1 1 auto;
    height:200px;
    border-radius: 30px;;
  
}

.container::-webkit-scrollbar {
  display: none;
}


/* about-me section assets */


#about-me{
    flex:1 1 500px;
    color:aliceblue;
    background-color:#4e4e4e;
}






/* Footer section assets */

footer {
    display:flex;
    flex-direction:column;   
    padding:24px;
}

footer .info{
    display:flex;
    h4{
        color:rgba(148, 148, 148, 0.741);
        font-size:16px;
    }
    p{
        font-size:14px;
        color:rgba(148, 148, 148, 0.741);        
    }
    gap:32px;
}



footer .info .overview{
    flex:0 1 50%;
}

footer .info .disciplines{
    flex:1 1 20%;
    display:flex;
    flex-direction:column;
    
    div{
        display:flex;
        gap:5px;

    }
}

footer .info .contact{
    flex:1 1 20%;
    display:flex;
    flex-direction:column;
}






/* MEDIA DEVICES ASSETS */

@media (max-width:768px) {

body{
    width:100%;
}    

#top-bar {
    position:fixed;
    flex-direction:column;
    height:300px;
    width: 150px;
    background-color:rgba(20, 20, 20, 0.808);    
    gap: clamp(1rem, 5vw, 2rem);
    padding:16px;
    align-items:flex-start;

    display:none;

    button{
        background-color:rgba(255, 255, 255, 0);
        color:rgba(203, 203, 203, 0.934);
        border-style:none;
        
    }
        .menu-toggle {
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
}


#hero{
        flex:0 1 500px;
        flex-direction:column;
        background-image: 
                     linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.90) 0%,
                rgba(0, 0, 0, 0.85) 50%,
                rgba(0, 0, 0, 0.5) 70%,
                transparent 90%),
                                 linear-gradient(
                to top,
                rgba(0, 0, 0, 0.90) 0%,
                rgba(0, 0, 0, 0.30) 40%,
                rgba(0, 0, 0, 0.0) 50%,
                transparent 90%),
            url('../img/IMG_0080.jpeg');    
            background-size:1500px;
            background-position:right;
            background-repeat:no-repeat; 
}

#hero .content {
    flex-direction:column;
    height:80vh;
    margin:0;
    padding-top:100px;

        .text-container{
            flex:1 1 auto;
            height:500px;
            margin:0px;
            padding:2rem;

            .quote{
                font-size:24px;
                font-width:30px;
            }
            .hero-text{
                padding: 0 3rem 0 1rem;

                .description{
                    margin-top:3rem;
                }
            }

        }
        
        .img{   
            flex:1 1 auto;
            height:50px;
        }    
}


/* explore-my-worlds mobile assets */


    #explore-my-worlds{
        margin-bottom:12rem;
    }

    #explore-my-worlds .container{
    flex-direction:column;
    gap:150px;
    


}

    #explore-my-worlds .container article{
    /* background-color:var(--card-background-color-secondary); */
    padding:24px;
    border-radius:5px;
    box-shadow:none ;

        header{
            p {
                color:var(--primary-color); 
            }
            
        }
        .content{
            display:flex;
            overflow:visible;
            flex-direction:column;
            align-items: center;
            
            p{
                color:#cfcece;
                font-size:1rem;

            }
        }

        .content >svg { 
            height:250px;
            width:250px;
        }
    }

footer .info {
    flex-direction:column;
}
}