/* @import url('https://fonts.googleapis.com/css2?family=Abel&family=Exo:wght@100;400;500;600;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Exo:wght@100;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&family=Inconsolata:wght@400;500;600;700;800;900&display=swap');
/* rxbxykdislvbwscn */
:root {
    --background-black: #151515;
    --main-theme-color: #F95959;
    /* --main-theme-color: rgb(49, 130, 206); */
    --white : #FFFFFF
    /* --main-theme-color: #7971EA; kolam */ 
    /* --main-theme-color: #610094;  original*/
  }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Abel', sans-serif;
    font-family: 'Exo', sans-serif;
    font-family: 'Fira Code', monospace;
    font-family: 'Inconsolata', monospace;
}


a {
    text-decoration: none;
    color: #000000;
}
li {
    list-style: none;
}

html {
    overflow: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; 
}
/* ::-webkit-scrollbar-thumb {
    background: rgba(102, 51, 153,.8); 
  } */
  

/* nav {
    background-color: #171414;
} */
section {
    width: 100vw;
    height: 100vh;
}
.mainContainer {
    width:100vw;
    height: 100vh;
    /* overflow-y: scroll; */

}

/* =========navbar styles============  */
.overlay-links{
    color: var(--white);
    display: block;
    text-align: right;
    margin: auto;
    font-size: 1.5rem;
    font-weight: 800;
}
#overlaybtn {
    /* width: 180px; */
    padding: .8rem 2rem;
    float: right;
    background-color: black;
}

nav {
    /* border: 1px solid red; */
    position: fixed;
    width: 100%;
    /* height: 10vh; */
    top: 0%;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 1.5rem 0;
    margin-top: 0;
    background-color: white;
    z-index: 1;
}
#nav-inner-container {
    width: 80%;
    margin: auto;
    display: flex;
    /* border: 1px solid red; */
}

#navlinks {
    width: 70%;
}

#brand {
    width: 30%;
    font-size: 1.6rem;
}
#brand a:hover {
    color: var(--main-theme-color);
}

#navlinks li {
    float: right;
    display: block;
    padding: 0 1.5rem;
    /* background-color: grey; */
}
#navlinks li:not(:first-child) a:hover {
    color: var(--main-theme-color);
}


.toggleTheme {
    color: var(--white);
    background-color: var(--background-black);
    padding: .5rem 1.5rem;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: .1rem;
    border: 1px solid var(--background-black);
    cursor: pointer;
}
.toggleTheme:hover {
    color: var(--background-black);
    background-color: var(--white);
}

#toggleButton {
    width: 70%;
    display: none;
    /* visibility: hidden; */
}
#toggleButton button {
    float: right;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: 800;
}
#overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    background: rgba(0, 0, 0, 0.9);
    /* display: none; */
    visibility: hidden;
}

#closeNav {
    /* border: 1px solid red; */
    width: 80%;
    padding: 1.5rem 0;
    margin: auto;
}
#closeNav button {
    float: right;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
}
.scroll {
    box-shadow: 1px 1px 3px #b6b5b5;
}
#overlayNav {
    position: fixed;
    bottom: 5%;
    width: 90%;
}
#overlayNav li {
    margin: 3rem 0;
}


#overlayNav li a:hover {
    color: var(--main-theme-color);
}
#NavtoggleTheme {
    display: block;
    padding: .4rem .6rem;
    max-width: 200px;
    float: right;
    letter-spacing: .1rem;
    cursor: pointer;
    border: .5px solid var(--white);
}

@media screen and (max-width: 1290px) {
    #navlinks {
        display: none;
    }
    #toggleButton {
        display: block;
    }
}

/* ==============header styles =============== */

.one {
    /* background-color: #F0F5F9; */
    /* background-color: #ffffff; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
}
#resume {
    padding: .8rem 3rem;
    border: 1px solid transparent;
    color: var(--white);
    background-color: var(--main-theme-color);
    outline: none;
    margin: 1rem 0;
    font-weight: 700;
    letter-spacing: .2rem;
    text-decoration: none;
    display: inline-block;
    visibility: hidden;
}
#resume:hover {
    cursor: pointer;
    /* padding: .8rem 4rem; */
    background-color: var(--white);
    color: var(--main-theme-color);
    border: 1px solid var(--main-theme-color);
}
header p {
    /* color: red; */
    font-weight: 500;
    font-size: .5rem;
    /* line-height: 2rem; */
}
#name {
    color: var(--main-theme-color);
    font-weight: 800;
    font-size: 4.5rem;
}
header {
    width: 80%;
    margin: auto;
    position: relative;
}

header > div {
    /* border: 1px solid green;  */
    margin-top: 5rem;
    /* padding-right: 10%; */
}
header p:nth-child(1) {
    font-size: 4rem;
    font-weight: 400;
    /* color: red; */
}
#typingText {
    font-size: 1.7rem;
    margin: 1rem 0;
    font-weight: 400;
    line-height: 2rem;
}
#arrowContainer {
    margin: 8rem 1rem;
}
#arrow {
    animation: MoveUpDown 1s linear infinite;
    position: relative;
    visibility: hidden;
}
/* .fa-chevron-down {
    color: var(--background-black);
} */
.arrowToggle {
    color: var(--white);
}
@keyframes MoveUpDown {
    0%, 100% {
      bottom: 0;
    }
    50% {
      bottom: 15px;
    }
  }
@media screen and (max-width:897px) {
    header div {
        margin-top: 8rem;
    }
}
@media screen and (max-width:800px) {
    #typingText {
        font-size: 1.2rem;
    }
}
@media screen and (max-width:565px) {
    header {
        width: 90%;
        /* padding: 20px 0; */
    }
    #nav-inner-container {
        width: 90%;
    }
    * {
        font-size: 14px;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
    header p:nth-child(1) {
        line-height: 3rem;
        font-size: 3rem;
    }
    #name {
        font-size: 3rem;
    }
    header div p {
        text-align: left;
        /* padding: 1rem; */
    }
    #resume {
        float: left;
        margin: 1rem 0;
        padding: .6rem 2rem;
    }
    #arrowContainer {
        margin: 10rem 0;
    }
}



/* projects styles */
.wrapper-container {
    /* background-color: yellow; */
    width: 90%;
    max-width: 1700px;
    margin: 7rem auto;
}

#wrapper {
    color: var(--main-theme-color);
    font-weight: 700;
    font-size: 2.5rem;
    /* letter-spacing: .5rem; */
}

.project {
    display: flex;
    flex-wrap: wrap;
    /* margin: 8% 2%; */
    width: 95%;
    margin: 8% auto;
}
.project-img {
    width: 50%;
    max-width: 700px;
    background-size: cover;
    height: 400px;
}
.project-img-one {
    background-image: url('Images/corona.jpg');

}
.project-texts {
    width: 50%;
    /* border: 1px solid rebeccapurple; */
    padding:  1rem;
}
.project-texts h1, .project-texts a {
    padding: .5rem;
}

.tech-stacks {
    display: flex;
    flex-wrap: wrap;
}
.tech-stacks div{
    padding: .5rem;
    /* background-color: grey; */

}
.tech-stack {
    background-color: var(--background-black);
    color: var(--white);
    padding: .5rem .7rem;
    min-width: 80px;
    text-align: center;
}
.tech-stack-toggle {
    background-color: #F1F6F9;
    color: var(--background-black);
    padding: .4rem .7rem;
}


.comments {
    color: grey;
    line-height: 2rem;
    padding: .5rem;
}
.project-links {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid red; */
}
.project-texts a {
    font-weight: 700;
    font-size: 1.2rem;
    min-width: 100px;
}
.project-texts a:hover {
    color: var(--main-theme-color);
}
.project-description {
    padding: .5rem;
    line-height: 1.5rem;
}
.project-img-two {
    background-image: url('Images/babyfeet.jpg');
}
.project-img-four {
    background-image: url('Images/TI.jpg');
}
.project-img-three {
    background-image: url('Images/portblack.png');
}
.project-img-five {
    background-image: url('Images/ota.jpg');
}
@media screen and (max-width:1125px) {
    .project-img {
        width: 100%;
        max-width: 100%;
    }
    .project-texts {
        width: 100%;
        padding: 0;
    }
    .project-texts h1 {
        margin: 1% 0;
    }
    
}


/* about */
#about {
    /* border: 1px solid red; */
    width: 95%;
    margin: auto;
    /* margin: % 2%; */

}
.about-text {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.8rem;
    /* letter-spacing: .1%; */
    /* margin: 1rem; */
    padding: .5rem;
    color: rgb(59, 59, 59);
}

.experience {
    margin: 5% 0;
    /* padding: .5rem; */
}
.experience h1,.experience h3 {
    margin: .3rem 0;
    padding: .5rem;
}
.experience h2 {
    color: var(--main-theme-color);
    font-weight: 900;
    padding: .5rem;
    /* border: 1px solid red; */
}

/* tools */

#tools-outer-container {
    /* border: 1px solid red; */
    padding: .5rem;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: spc; */
}
.tool-container {
    /* margin: 1.5rem 0; */
    margin-bottom: 2rem;
    padding: 0rem 7rem 2rem 0;
    /* border: 1px solid red; */
    min-width: 300px;
}
.tool-container ul li {
    font-size: 1.4rem;
    font-weight: 600;
    padding: .5rem 0;
}
.techs {
    color: rgb(59, 59, 59);
}
.tool-container ul li:nth-child(1) {
    color: var(--main-theme-color);
    font-weight: 700;
}
#tools-comment {
    padding: 1rem 2.5rem;
}
@media screen and (max-width:909px) {
    #tools-outer-container {
        /* border: 1px solid red; */
        display: block;
    }
    .tool-container {
        padding: 1rem 7rem 2rem 0;
    }
    #tools-comment {
        padding: .5rem 1.5rem;
    }
    .wrapper-container {
        width: 90%;
    }
}

@media screen and (max-width:350px) {
    .tool-container {
        padding: 0rem 0rem 2rem 0;
    }
}

/* contact */

#contacts-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 95%;
    margin: 2rem auto;
    padding: .5rem;
    /* border: 1px solid yellowgreen; */
}
#contacts-text {
    width: 50%;
    color: rgb(50, 50, 50);
}
#contacts-text, .contact-form {
    min-width: 400px;
}
#contacts-text h1 {
    margin: 2rem 0;
    font-size: 2.4rem;
    font-weight: 900;
}
#contacts-text h1, #contacts-text p, #contacts-text div {
    padding: .5rem;
}
#contacts-text div {
    margin: 2rem 0;
}

.contact-para {
    /* margin: 1.5rem 0; */
    font-size: 1.3rem;
    font-weight: 500;
}

#contacts-text div i {
    margin-right: 1rem;
    font-size: 1.8rem;
}
#contacts-text div i:hover {
    color: var(--main-theme-color);
    cursor: pointer;
}

.contact-form {
    border: 1px solid var(--background-black);
    margin: 0 auto;
    padding: 4rem 0;
    width: 35%;
    max-width: 500px;
}
.form-border {
    border: 1px solid var(--white);
    
}
#contacts-inner-container {
    width: 90%;
    margin: auto;
    /* border: 1px solid red; */
}
input{
    padding: .5rem;
    width: 100%;
    margin: 1rem 0;
    outline: none;
}
textarea {
    width: 100%;
    resize: none;
    outline: none;
    margin: 1rem 0;
    padding: .5rem;
}
.submit {
    width: 100%;
    margin: .5rem 0;
    padding: .6rem 0;
    font-weight: 700;
    color: var(--white);
    background-color: var(--background-black);
    letter-spacing: .2rem;
    cursor: pointer;
    border: none;
    border: 1px solid black;
}
.submit:hover {
    background-color: var(--white);
    color: var(--background-black);
}

@media screen and (max-width:1000px) {
    #contacts-text, .contact-form {
        min-width: 0;
        width: 100%;
    }
}

/* foooter */
footer {
    position:relative;  
    bottom:0;
    width:100%;
    margin-top: 10rem;
    margin-bottom: 4rem;
    /* background:#6cf; */
}

footer div {
    width: 70%;
    margin: auto;
    /* border: 1px solid red; */
    text-align: center;
    min-width: 300px;
    font-size: 1.3rem;
}
.fa-heart {
    color: red;
}

footer p {
    margin: 1.8rem 0;
}

footer p, footer span {
    font-weight: 500;
}

/* =================dark/light theme============== */
.blackBackground {
    background-color: var(--background-black);
}
.whiteBackground {
    background-color: var(--white);
}
.TextColorSwitch {
    color: var(--white);
}
.whiteTextToggle {
    color: var(--background-black);
}

.toggleBtn {
    background-color: var(--white);
    color: var(--background-black);
}
.toggleBtn:hover {
    color: var(--white);
    background-color: var(--background-black);
    border: 1px solid var(--white);
}

