style.css

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

*{
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    transition: 0.1s all ease-in-out;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
      cursor: url(./img/cursorImg.png), auto;
}

a{
    text-decoration: none;
}

li{
    list-style-type: none;
}

section{
    min-height: 100vh;
    padding: 0 50px;
    margin-bottom: 50px;
}

.intro{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 1000vh;
    background-color: black;
    color: white;
    transition: 1s;
}

.logoHeader{
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    z-index: 2;
    font-size: 50px;
}

.logo{
    position: relative;
    display: inline-block;
    opacity: 0;
    color: white;
    bottom: -20px !important;
    /* bottom: -20%;
    opacity: 0; */
}

.logo.active{
    bottom: 0 !important;

    opacity: 1;
    transition: ease-in-out .5s;
}

.logo.fade{
    bottom: 20px !important;
    opacity: 0;
    transition: ease-in-out .5s;
}

.mainSec{
    width: 100vw;
    height: 100vh;
}

.mainCont{
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 20px;
}

.mainTitle{
    font-size: 54px;
    font-weight: 700;
}

.mainTitleLogo{
    background-color: black;
    color: white;
}

.mainAbout{
    font-size: 45px;
    color: #4F4F4F;
    font-weight: 300;
    margin-top: 23px;
}

.buttons button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    color: black;
    font-size: 20px;
    font-weight: 500;
    padding: 9px 14px;
    background-color: white;
    border: solid;
    border-width: 2px;
    padding: 16px 52px 16px 52px;
    cursor: pointer;
    transition: 0.1s all ease-in-out;
}

.buttons button:hover{
    background-color: black;
    color: white;
}

.subTitle{
    color: #e76385;
    font-size: 20px;
    font-weight: 700;
}

.title{
    color: black;
    font-size: 50px;
}




















































.aboutCont{
    display: flex;
    flex-direction: row;
    margin: 50px;
}

.aboutFlex{
    padding: 50px 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.aboutFlex h1{
    font-size: 70px;
}

.aboutFlex p{
    margin-top: 20px;
    font-size: 20px;
}

.aboutSkills{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.aboutDots {
  margin: 100px 0;
  border: 0;
  text-align: center;
}
.aboutDots:before {
    content: "\2022 \2022 \2022";
    font-size: 50px;
    color: black;
}
















































.exMain{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.exTxt{
    flex:6;
}

.exImg{
    flex:4;
}

.exTxt h1{
    font-size: 100px;
    margin-bottom: 30px;
}

.exLi{
    margin-top: 20px;
    margin-bottom: 50px;
    margin-right: 50px;
    font-size: 25px;
}

.exLinks{
    text-decoration: underline;
}

.exLinks:hover{
    cursor: pointer;
    background-color: black;
    color: white;
}





















































/* .projectMain{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 50px;
}

.projectFlex{
    flex: 5;
    padding: 50px;
}

.projectFlex h1{
    font-size: 50px;
} */

.projectSec h6{
    color: #e76385;
    font-size: 20px;
    font-weight: 700;
}

.projectSecTitle{
    font-size: 50px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;   
}


.projects{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 100px;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; */
    /* margin-top: 100px; */
}


.projectContainer{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3,minmax(10rem,30rem));
}


.projectCard{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding:50px;
    border: black;
    border-style: dashed;
}


.projectCard h1{
    font-size: 32px;
    font-weight: 700;
}

.projectTags{
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 15px;
    /* background-color: black; */
    color: black;
    border-radius: 10px;
    word-spacing: 50px;
    line-height: 2;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    flex-direction: row;
}

.projectLinks{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.projectLinks a{
    text-decoration: none;
    color: black;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 42px 10px 42px;
    border: solid;
    border-width: 2px;
    margin: 5px;
}

.projectLinks a:hover{
    background-color: black;
    color: white;
}

.moreProjects{
    margin-top: 100px;
}

.moreProjects a{
    color: black;
    font-size: 20px;
    text-decoration: none;
    padding: 20px;
    border: black;
    border-style: solid;
    border-width: 2px;
    font-weight: 500;
}

.moreProjects a:hover{
    color: white;
    background-color: black;
}

































































.contactSec{
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact{
    width: 40vw;
    /* margin-right: 100px; */
}

.contact h1{
    margin-top: 30px;
    font-size: 55px;
    font-weight: 700;
}

.contact p{
    margin-top: 30px;
    color: #4F4F4F;
    font-size: 25px;
    font-weight: 400;
}

.contact  a{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    color: black;
    font-size: 20px;
    font-weight: 500;
    padding: 9px 14px;
    background-color: white;
    border: solid;
    border-width: 2px;
    padding: 16px 52px 16px 52px;
    cursor: pointer;
    transition: 0.1s all ease-in-out;
}

.contact  a:hover{
    color: white;
    background-color: black;
}




































































footer{
    width: 100%;
    background-color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px;
}

footer p{
    color: white;
}

.footerLink{
    text-decoration: none;
    font-size: 20px;
    color: white;
    font-weight: 400;
}

.footerList{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footerItem{
    margin-top: 30px;
    margin-left: 20px;
}



















@media only screen and (max-width: 1250px) {

    .aboutFlex h1{
        font-size: 60px;
    }
}



@media only screen and (max-width: 1080px) {

    .mainTitle{
        font-size: 40px;
    }

    .mainAbout{
        font-size: 35px;
    }
    
    .devPic img{
        height: 400px;
    }

    .aboutFlex h1{
        font-size: 50px;
    }

    .aboutFlex p{
        font-size: 15px;
    }

    .aboutFlex{
        padding: 50px 5px;
    }

    .projectContainer{
        grid-template-columns: repeat(2,minmax(10rem,30rem));
    }
}

@media only screen and (max-width: 950px) {
    .aboutFlex h1{
        font-size: 50px;
    }

    .aboutFlex p{
        font-size: 15px;
    }

    .exImg{
        display: none;
    }
}

@media only screen and (max-width: 900px) {

    .mainTitle{
        font-size: 30px;
    }

    .mainAbout{
        font-size: 25px;
    }

}

@media only screen and (max-width: 750px) {
    .aboutCont{
        flex-direction: column;
    }

    .aboutDots{
        display: none;
    }

    .exTxt h1{
        font-size: 70px;
    }

    .projectContainer{
        grid-template-columns: repeat(1,minmax(10rem,30rem));
    }
}

@media only screen and (max-width: 700px) {

    .devPic img{
        height: 300px;
    }

}

@media only screen and (max-width: 600px) {


    .aboutFlex h1{
        font-size: 40px;
    }

    .tags{
        font-size: 15px !important;
    }


    .mainCont{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .devPic img{
        height: 400px;
    }
}

@media only screen and (max-width: 400px) {
    .projectLinks{
    display: flex;
    flex-direction: column;
    align-items: center;
}
}

@media only screen and (max-width: 400px) {

    .mainTitle{
        font-size: 25px;
    }

    .mainAbout{
        font-size: 20px;
    }

    .devPic img{
        height: 300px;
    }

    .buttons button{
        font-size: 20px;
    }

}