*, *::before, *::after{
    box-sizing: border-box;
    margin:0 ;
    padding: 0;
}

:root{ /*1st time using colores like this*/
   --base:#555;
   --base-100:#f1f1f1;
   --base-400:#555;
   --base-800:#000;
   --yellow:#ffda4b;
   --yellow-100:#fffbe6;
   --yellow-400:#ffda4b;
   --yellow-800:#8b6f00;
   --blue:#ae0a93;
   --blue-100:#ffd5fc;
   --blue-400:#ee61fb;
   --blue-800:#900aae;
}

body{
    font-family: "Playwrite GB S", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 20px;
    padding-bottom:1000px;
    background-color:   rgb(35, 35, 60);
}

a{ /*1st time nesting CSS*/
    text-decoration: none;
    color: var(--blue);
    &:hover{
        text-decoration: underline; /*added a hover bc it was removed during removing the default underline*/
    } 
}


/*Since 2023 nesting has been available to all browesers*/

header {
    padding-top: 10px;
    padding-bottom:10px ;
    display: flex;
    justify-content: space-between;
    max-width: 1440px;
    margin: auto;
    border-bottom: 1px solid rgba(0,0,0,0.1);

    .logo-holder{
        display: flex;
        padding: 10px;
        align-items: center;
        font-weight:600 ;
        color: var(--base-800);

    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;/*from align to fontsize helps center the letter*/
        font-size: 32px;
        background-color: var(--base-800) ;
        color:var(--base-100) ;
        height: 64px;
        width:64px ;
        margin-right:20px ;
        border-radius: 50% ;
    }

    .logo-text{
        flex: 1;
        color:var(--base-100) ;
    }


    nav {
        display: flex;
        align-items: center;
        gap: 5px;
        ul{
          display: flex; 
          list-style-type: none;  /*helps remove the list alginment*/
          gap: 5px;

            li  {
                display:inline-block ;
                a {
                    display: inline-block;
                    padding: 10px 20px; /*space between*/
                    color:var(--base) ;
                    &:hover{
                       background-color:var(--base-100) ; 
                       border-radius: 10px; /*gives curvers to hover square*/
                       text-decoration: none;

                    }
                }
            }  
        }
        .mobile-toggle{
            display: none;
            color: var(--base-800);
            padding: 10px;
            @media (max-width:768px){ /*for bars to appear when reduced responsive*/
                display:inline-block;
                position: absolute;
                top: 20px;
                right: 20px;
            }
        }
    }

    @media(max-width: 1024px){ /*for tabelts*/
        flex-direction: column;
        align-items:center ;
    }

    @media(max-width:768px) {
        flex-direction: column;/*when bars are clicked li will appear at the bottom on header*/
        align-items:center ;
        nav{
            margin-left: 10px; 
            width: 100%;
          ul{
            display: none; /*menu to disappear*/
            flex-direction: column; /*stacks the li when responsive*/
            text-align: center;
            width: 100%;
            a{
                width: 100%; /*hover effect is fills row rather than sqaure*/
            }
            &.active{
                display: flex;
            }
          }  
        }
    }
} 

 

.container{
    max-width: 1440px;
    margin: auto;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;

    @media (max-width:1440px) {
        padding-left:30px ;
        padding-right: 30px;
    }
}

.button{
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--pink);
    color: var(--pink-100);
    border-radius: 10px;
    transition: ease 0.3s all;

    &:hover{ /*hover color is black, keep it*/
        text-decoration: none;
        background-color: var(--base-800) ;
    }
    &.black{
        background-color: black;
        color: white;
        &:hover{
            color:var(--base) ;
        }
    }
    &.white{
        background-color: white;
        color: var(--base-800);
        &:hover{
            color:var(--blue-800) ;
        }
    }


}

h1{
    font-size: 64px;
    line-height: 1;
    margin-bottom: 10px;
    small {
        display: block;
        font-weight:100 ;
    }
    @media (max-width:1024px){
        font-size:48px;
    }
        
}

.hero{ /*this allows the photo and SM logos to be next to each other*/
    display: flex;
    @media(max-width:1024px) {
       flex-direction: column; 
    }
    margin-top: 30px;
    .hero-blue{
        flex:1;
        background-color: var(--blue-100);
        border-radius:30px ;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span{
            @media (max-width:768px){
                display:none;
            } /*hide span on smaller screens*/
        }
        .call-to-action{
            margin-top:20px ;
            margin-bottom: 10px ;
            a{
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
        .social-links{
            a{
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
    .hero-yellow{
        flex:1;
        background-color: var(--yellow);
        border-radius:30px;
        padding: 0 30px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        img{
            margin-top: -30px;
             
        }
    }
}

.logos{
    background-color: var(--base-100);
    border-radius:30px ;
    padding: 30px 0px;
    @media(max-width:1440px){
        border-radius:0px ;

    }
    .marquee{
        width: 100vw;
        max-width: 100%;
        height: 128px;
        overflow: hidden;
        position: relative;
        .track{
            position: absolute;
            white-space: nowrap;
            will-change: transform;
            animation: marquee 40s linear infinite;
            display: flex;
            gap:10px ;
        }    
    }
}

@keyframes marquee { /*for animation*/ 
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

h2{
    font-size: 64px;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
    color:var(--base-100) ;
    padding: 30px;
    small{
        display: block;
        font-weight: 100;
        font-style: 0.5em;
        color:var(--base) ;
   } 
   @media (max-width:1024px) {
        font-size: 48px;
   }
}

h3{
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    margin-bottom:20px ;
    color: var(--base-800);
}

.skills{
   .holder-blue{
    background-color: var(--blue-100);
    border-radius: 30px;
    padding: 30px;
    display: flex;

    @media (max-width:1024px) {
        flex-direction: column;
   }
    .left-column{
        flex: 1;
        ul{
            list-style-type: none; 
            gap: 10px;
            margin-right:100px ;
            margin-bottom: 20px;
            li{
                display: inline-block;
                background-color: var(--blue-400);
                padding: 10px 20px;
                border-radius:15px ;
                margin-bottom: 10px;
            }
        }
    }
    .right-column{
        flex: 1;
        p{
            margin-bottom:20px ;
        }
    }
   } 
}

.work-experience{
    .jobs{
        display: flex;
        gap:30px;
        @media (max-width:1024px) {
            flex-direction:column;
        }
        article{
           background-color: var(--yellow-100);
           padding: 30px;
           border-radius: 30px; 
           flex : 1;
           h3{
            margin-top:20px ;
            margin-bottom:10px ;
           }
           div{
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--base-800);
           }
           p{
            margin-bottom:10px ; 
           }
           figure{
                width: 100%;
                padding-top: 56.25%;
                overflow: hidden;
                position: relative;
                border-radius: 15px;
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    height:100% ;
                    object-fit: cover;
                    transition: ease 0.3s all;
                }
                figcaption{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: rgba(0,0,0,0.5);
                    color: var(--base-100);
                    text-align: center;
                    padding: 10px;
                    opacity: 0;
                    visibility: hidden;
                    transition: ease 3s all;
                }

                &:hover{
                    figcaption{
                        opacity: 1;
                        visibility: visible; 
                    }
                    img{
                        transform: scale(1.2);
                    }
                }
           }
        }
    }
}

.bento{
    .bento-grid{
            display: grid;
            grid-gap: 30px;
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(4,1fr);
            height: 960px;

            @media (max-width:1024px) {
                grid-template-rows: repeat(8, 1fr);
            }
            @media (max-width:768px) {
                display: flex;
                flex-direction: column;
                gap: 30px;
                height: auto;
            }

        .bento-item{
            padding: 30px;
            background-color:var(--base-100);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            img{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                object-fit: cover;
                transition: ease 3s all;
            }
            &:hover{
                img  {   
                    transform: scale(1.2); /*change imgs*/
                }  
            }   
            @media (max-width:768px){
                height: 240px;
            }
            &:nth-child(1){
                grid-column: span 2;
                grid-row: span 2;
                @media (max-width:1024px) {
                    grid-column: span 2;
                    grid-row: span 2;
                }
            }
            &:nth-child(2){
                grid-column: span 2;
                grid-row: span 1;
                @media (max-width:1024px) {
                    grid-column: span 3;
                    grid-row: span 2;
                }
            }
            &:nth-child(3){
                grid-column: span 1;
                grid-row: span 1;
                @media (max-width:1024px) {
                    grid-column: span 3;
                    grid-row: span 2;
                }
            }
            &:nth-child(4){
                grid-column: span 1;
                grid-row: span 1;
                @media (max-width:1024px) {
                    grid-column: span 2;
                    grid-row: span 4;
                }
            }
            &:nth-child(5){
                grid-column: span 2;
                grid-row: span 1;
                @media (max-width:1024px) {
                    grid-column: span 3;
                    grid-row: span 2;
                }
            }
            &:nth-child(6){
                grid-column: span 5;
                grid-row: span 3;
                @media (max-width:1024px) {
                    grid-column: span 5;
                    grid-row: span 2;
                }
            }
        }
    }
}

.chatbot{
    .chatbot-blue{
        background-color: var(--blue-100);
        border-radius: 30px;
        padding: 30px;
        gap: 30px;
        display: flex; /*gives it the sidebyside*/
        @media (max-width:1024px) {
            flex-direction: column;
        }
        p {
          margin-bottom: 30px;  
        }
        .chat-info{
            flex: 3;
            padding-right: 30px;
        }
        .chat-box{
            flex: 4;
            background : white;
            border-radius: 15px;
            padding:30px ;
            display: flex; 
            flex-direction: column;
            .scroll-area{
                max-height: 300px;
                height: 300px;
                overflow-y: scroll;
                ul{
                    display:flex;
                    flex-direction: column;
                    justify-content:flex-end ;
                    gap: 15px;
                    li{
                        display:flex; 
                        align-items: center;
                        gap:15px ;

                        &:nth-child(even){
                            text-align: right;
                            justify-content: flex-end;
                            flex-direction: row-reverse;

                            span{
                                background-color: var(--yellow);
                            }
                        }

                        span{
                            background-color: var(--blue-400);
                            width:64px ;
                            height: 64px;
                            border-radius:50% ;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            @media (max-width:768px) {
                                width: 48px;
                                height: 48px;

                            }

                        }
                        div{
                            flex: 1;
                        }
                    }

                }
            }

            .chat-message{
                display: flex;
                margin-top: 15px;
                gap: 15px;

                input{
                    border-radius: 10px;
                    flex: 1;
                    padding: 15px;
                    border: 1 solid transparent;
                    background-color: var(--base-100);
                    &:hover{
                        outline: none;
                        background-color: #fff;
                        border-radius: 1px solid var(--base-100); /*before writing this project. I took for granted to minor detail that UI has to make it interactive, I now know exactly what attracted me to want work with software*/
                    }
                    &:focus{
                        outline: none;
                        background-color: #fff;
                        border-radius: 1px solid var(--base-100);
                    }
                }
                button{
                   border: none;
                   cursor: pointer; 
                }

            }
        }
    }
}