style.css

*{
    /* color: #8aba79; */
    color: #fff;
    font-family: 'Fira Code', monospace;
    /* font-size: 25px; */
    margin: 0;
    padding: 0;  /* providing default margin and padding to be 0 */
}

/* write css for horizontal scrolling for entire webpage */
html {
    overflow: scroll;
}



body {
    /* background-color: #282828; */
    background-color: #0e0e0e;
}

.homePage{                                      /* selecting div with class "homePage" and adding styling to it */
    /* transition: scale 2s; */
    transition: background-size 2s;
    /* image-resolution: 1920x1080; */
    /* background-image: url(https://gruvbox-wallpapers.onrender.com/wallpapers/minimalistic/gruvbox_minimal_space.png); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: flex;
    justify-content: left;   
    height: 100vh;
    align-items: center;
    /* outline: #fabd2f solid 7px; */
    outline: #8aba79 solid 7px;
    outline-offset: -2em;
    border-radius: 3em;
}

.homePage:hover {
    background-size: 125%;
}

.name{                                         /* selecting div with class "name" and adding styling to it */
    font-size: 5vw; 
    /* animation-name: namme; */
    transition: font-size 1s;
}

.name:hover {
    font-size: 5.5vw; 
}

.intro {
    margin: 70vh 0 0 5vw;
    /* margin-top: 10vh; */
}

.intro p{                                      /* selecting div with class "intro" then navigating to p tag inside it, and adding styling to it */
    font-size: 2.5vw;
    line-height: 3rem;
}

.your_button{                                  /* selecting button with class "your_button" and adding styling to it */
    font-size: 1rem;
    padding: 5px;
    cursor: pointer;
    background-color: rgb(42, 42, 255);
    border-radius: 5px;
    width:100px;
    height:50px;
    border:2px solid white;
    color:white;
    text-transform: capitalize;
}
.your_button:hover{                           /* here we add a special animation to button when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */
   
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
/* about me */
.about{                                       /* selecting div with class "about" and adding styling to it */
    /* margin: 10vh 0 10vh 0; */
    /* min-height: 60vh; */
    height: 100vh;
    outline: #8aba79 solid 7px;
    outline-offset: -2em;
    border-radius: 3em;
}

.about_heading{       
    padding-top: 10vh;                        /* selecting div with class "about_heading" and adding styling to it */
    font-size: 5vw;
    text-align: center;
    text-decoration: underline;
    font-weight:600;
}

/* contact */
.contact_sec{                                /* selecting div with class "contact_sec" and adding styling to it */
    height: 60vh;
    /* width:70vw; */
    height: 100vh;
    margin: 0 auto;
    outline: #8aba79 solid 7px;
    outline-offset: -2em;
    border-radius: 3em;
    /* margin: auto; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.contact_heading{                            /* selecting div with class "contact_heading" and adding styling to it */
    padding-top: 10vh;                        /* selecting div with class "about_heading" and adding styling to it */
    font-weight:600;
    font-size: 5vw;
    text-align: center;
    text-decoration: underline;
}

.contact_info{                               /* selecting div with class "contact_info" and adding styling to it */
    font-size: 2vw;
    font-weight: 600;
    margin-top:10vh;
    margin-left: 40vw;
}
.data{                                       /* selecting div with class "data" and adding styling to it */
    font-weight:initial;
}

.Email,.mobile_no,.linkdin,.github,.others{ /* selecting many divs with the class listed and adding same styling to all of them */
    padding:2vh 0;
}

span a{                                     /* selecting span and then navigating to a tag in it and adding styling to it */
    color:black;
}

span a:hover{                               /* here we add a special animation to anchor tag when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */
    color:blue;
}


.para{                                      /* selecting div with class "para" and adding styling to it */
    width:85vw; 
    margin:8vh auto;
    /* margin: 8vh 0 8vh 0vw; */
    font-size: 2em;
}