@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
:root{
    --myColorWhite : #ffff;
    --myColorGray : #B0B0B0;
    --myColorBlueLight : #06B4FF;
    --myColorBlueLighter :#94DCF2;
    --myColorBlueDark : #066AFF;
    --myColorBlack : #000000;
    --myColorBlackLigther : #0000003a;
}


/*======================Body Behaviour======================*/

body{
    font-family: 'Poppins', sans-serif !important;
    width: 100%;
    scroll-behavior: smooth;
    
}

.projects{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}
#project-num{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 450px;
    background-color: #e2e2e2;
}
#projectImage{
    background: url(Assets/ProjectScreenShots/MyPortfolioPic.PNG) center center no-repeat;
    background-size: contain;
    width: 300px;
    height: 400px;
    
    
}
#livSite{
    background-color: var(--myColorBlueDark);
    width: 150px;
    height: 50px;
    border: none;
    border-radius: 30px;
    margin-bottom: 1rem;
    color: var(--myColorWhite);
}
#livSite:hover{
    background-color: transparent;
    border: 1px solid var(--myColorBlueDark);
    color: var(--myColorBlack);
}

#proName{
    color: var(--myColorBlack);
    font-weight: bold;
}

#project-num:hover{
    
    border-radius: 20px;
    
}

/*======================Logo======================*/
#mLogo{
    color: var(--myColorBlueLight);
    font-size: 2rem;
    font-weight: bold;
    
}
.navbar-brand{
    color: var(--myColorBlack);
}

/*======================Nav======================*/
.nav-link{
    color: var(--myColorBlack);
}

nav{
    text-align: center;
    background-color: var(--myColorWhite);
}

.active{
    color: var(--myColorBlueLight) !important;
    font-weight: bold;
    
}

.navbar-toggler{
  
    border: none !important;
}

#btnTogg{
    box-shadow: none;
}

.navbar-toggler:focus{
  
    border: none !important;
}

#subheads{
    color: var(--myColorBlack);
    font-weight: bold;
}

/*======================Home Content======================*/
#scrollspyHeadingHome{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100vh;
    margin-top: 4rem;
}

#introContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}   


#btnCV,#btnProjects{
    
    width: 120px;
    display: block;
    height: 30px;
    border: none;
    border-radius: 30px;
    margin-bottom: 15%;
}
#btnCV{
    background-color: var(--myColorBlueDark);
    color: var(--myColorWhite);
    height: 32px;
}
#btnProjects{
    background-color: transparent;
    border: 1px solid var(--myColorBlueDark);
    color: var(--myColorBlueLight);
}

#btnProjects:hover{
    background-color: var(--myColorBlueDark);
    color: var(--myColorWhite);
    font-weight: bold;
}
#btnCV:hover{
    background-color: transparent;
    border: 2px solid var(--myColorBlueDark);
    color: var(--myColorBlueDark);
    font-weight: bold;
}

#picBox{
    background: url(/Pictures/Thapelo\ Professional1.png) center center no-repeat;
    background-size: cover;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    
    
}

#heading1{
    text-align: center;
}

h1{
    font-weight: bold;
    color: var(--myColorBlueDark);
}
h3{
    color: var(--myColorBlack);
    color: var(--myColorBlueDark);
}
#emphasisColor{
    color: var(--myColorBlueLight);
    
}




/*======================About Content======================*/
#scrollspyAbout, #scrollspyProjectst, #scrollspyContact{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15%;
    
}

#aboutBox{
    
    display: flex;
    flex-direction: column;
    align-items: center;
}


#circle{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--myColorBlueLight);
}

#Aboutpic{
    background: url(/Pictures/IMG-20220427-WA0003-01.jpg) center center no-repeat;
    background-size: cover;
    width: 200px;
    height: 300px;
    border-radius: 40px;
    margin-top: 5%;
    
}
#aboutContent{
    text-align: center;
    width: 80%;
    margin-top: 5%;
}
h5{
    color: var(--myColorBlueLight);
    font-weight: bold;
}


li{
    list-style: none;
    
}



/*======================About Content======================*/


.carousel{
    margin-top: 5%;
}

#carouselSize{
    width: 100% !important;
    height: 50vh;
    
}


#contactMe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 10%;
    gap: 1rem;
}

#icon{
    margin-bottom: 10%;
}

a{
    text-decoration: none;
    color: var(--myColorBlueLight);
}

footer{
    background-color: var(--myColorBlack);
    height: 30vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}




/*======================Responsiveness======================*/


/*laptops, desktops*/
@media (min-width: 1290px) and (max-width: 1380px) {

    

    /*======================Home======================*/
    section{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }

    nav{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }

    #scrollspyHeadingHome{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        
    }

    #introContent{
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }  
    #heading1{
        text-align: left;
    }
    #buttons{
        display: flex;
        gap: 1rem;

    }
    #picBox{
        background: url(/Pictures/Thapelo\ Professional1.png) center center no-repeat;
        background-size: cover;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        
        
    }

    /*======================About======================*/
    
    #aboutContent{
        text-align: center;
        width: 35%;
        margin-top: 5%;
    }
    #aboutBox{
    
        display: flex;
        flex-direction: row;
        gap: 15rem;
        
    }
    #Aboutpic{
        width: 450px;
        height: 550px;
    }

    
    .projects{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 2rem;
        margin-top: 2rem;
    }
    #livSite{
        font-size: 10px;
    }
    
   
    
}

/*Tablets, iPads*/
@media (min-width: 768px) and (max-width: 1050px){

    section{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }
    .navbar-expand-custom{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }

    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .navbarTogglerIcon{
        display: none;
    }
      section{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }

    nav{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }
    #homeBox{
        display: flex;
        flex-direction: row-reverse;
    }
    #heading1{
        text-align: left;
        
    }

    #scrollspyHeadingHome{
        height: 100vh;
    }

    #introContent{
        display: flex;
        align-items: flex-start;
    }
    #buttons{
        display: flex;
        gap: 1rem;
    }
    #picBox{
        background: url(/Pictures/Thapelo\ Professional1.png) center center no-repeat;
        background-size: cover;
        width: 290px;
        height: 290px;
        border-radius: 50%;
        
    }

        /*======================About======================*/
    
        #aboutContent{
            text-align: center;
            width: 70%;

        }
        #scrollspyAbout{
            padding-top: 2rem;
        }
        #aboutBox{
        
            display: flex;
            flex-direction: row;
            gap: 5rem;
            align-items: center;
            justify-content: center;
            
        }
        #Aboutpic{
            width: 350px;
            height: 350px;
        }

        
        #scrollspyProjectst{
            padding-top: 2rem;
        }
    
       
}
@media (min-width: 1080px) and (max-width: 2080px){
    
    #block{
        width: 800px;
        height: 300px;
        background-color: #000000;
    }

    section{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }
    nav{
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    
    }

    #homeBox{
        display: flex;
        flex-direction: row-reverse;
        gap: 20rem;
    }
    #heading1{
        text-align: left;
        
    }

    #scrollspyHeadingHome{
        height: 100vh;
    }

    #introContent{
        display: flex;
        align-items: flex-start;
    }
    #buttons{
        display: flex;
        gap: 1rem;
    }
    #picBox{
        background: url(/Pictures/Thapelo\ Professional1.png) center center no-repeat;
        background-size: cover;
        width: 490px;
        height: 490px;
        border-radius: 50%;
        
    }

        /*======================About======================*/
    
        #aboutContent{
            text-align: center;
            width: 70%;

        }
        #scrollspyAbout{
            padding-top: 2rem;
        }
        #aboutBox{
        
            display: flex;
            flex-direction: row;
            gap: 5rem;
            align-items: center;
            justify-content: center;
            
        }
        #Aboutpic{
            width: 450px;
            height: 550px;
        }

        
        #scrollspyProjectst{
            padding-top: 2rem;
        }

        .projects{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            gap: 2rem;
            margin-top: 2rem;
        }
        #livSite{
            font-size: 10px;
        }
}