@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    --tcolor: rgb(255, 255, 255);
    --bcolor: rgb(39, 39, 39);
    --blue: #3a3a3a;
    --blue2: #0069d9;
    --purple: rgb(89,17,95);
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
    transition: background-color .5s ease-in-out,color .5s ease-in-out;
}
body.light-theme {
    --tcolor: rgb(50, 50, 50);
    --bcolor: rgb(238, 238, 238);
    --purple: rgb(168, 39, 180);
}
.hide{
    display: none;
}
body{
    background-color: var(--bcolor);
    color: var(--tcolor);
}
a{
    text-decoration: none;
}
#navbar{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--blue);
    justify-content: flex-end;
    align-content: center;
    box-shadow: rgba(var(--tcolor),0.2) 0px 7px 29px 0px;
}
.links-cont{
    display: flex;
    justify-content: center;
    align-items: center;
}
.anchor-link{
    color: white;
    padding: 1rem;
    font-size: 1.8rem;
}
.theme-toggle{
    outline: none;
    border: none;
    cursor: pointer;
    background: unset;
    color: white;
    padding: 1rem;
}
.theme-icon{
    font-size: 1.8rem;
}
.sec{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
#welcome-section{
    background: linear-gradient(0deg,var(--purple),var(--bcolor));
    transition: background .5s ease-in-out;
}
#projects{
    background-color: var(--purple);
    transition: background .5s ease-in-out;
}
#contacts{
    background: linear-gradient(180deg,var(--purple),var(--bcolor));
    transition: background .5s ease-in-out;
    height: auto;
    padding: 20vh 0;
}
.m-heading{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.name-before{
    font-size: 4rem;
    font-weight: 500;
}
.name{
    font-family: 'Lobster', sans-serif;
    font-weight: 600;
    margin-left: 1rem;
    font-size: 4.5rem;
}
.head-desc{
    font-size: 1.8rem;
    font-style: italic;
    margin-top: -2rem;
}
.c-heading,.p-heading{
    font-size: 4rem;
}
#projects{
    justify-content: flex-start;
    height: auto;
}
.p-cont{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 2rem;
    justify-content: center;
    align-items: center;
}
.project-tile{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border-radius: 20px;
    background-color: rgba(200, 210, 218, 0.3);
    box-shadow: rgba(122, 126, 131, 0.2) 0px 8px 24px;
}
.tile-img{
    width: 100%;
    height: 100%;
    max-height: 35rem;
    align-self: center;
}
.tile-heading{
    color: black;
    background-color: rgba(122, 126, 131, 1);
    padding: .8rem .3rem;
}
.social-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
}
.s-links{
    margin: 0 2rem;
    padding: 1rem;
    transition: all .4s ease-in-out;
}
.s-links:hover{
     transform: translateY(1.2rem) scale(1.3);
}
.s-links img{
    width: 60px;
    height: 60px;
}
.p-icon{
    -webkit-mask-image:  url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMy4yNSAyMS41OWMyLjg4IDUuNjYgNy41MSAxMC4yOSAxMy4xOCAxMy4xN2w0LjQtNC40MWMuNTUtLjU1IDEuMzQtLjcxIDIuMDMtLjQ5QzM1LjEgMzAuNiAzNy41MSAzMSA0MCAzMWMxLjExIDAgMiAuODkgMiAydjdjMCAxLjExLS44OSAyLTIgMkMyMS4yMiA0MiA2IDI2Ljc4IDYgOGMwLTEuMTEuOS0yIDItMmg3YzEuMTEgMCAyIC44OSAyIDIgMCAyLjQ5LjQgNC45IDEuMTQgNy4xNC4yMi42OS4wNiAxLjQ4LS40OSAyLjAzbC00LjQgNC40MnoiLz48L3N2Zz4=");
    background: var(--tcolor);
    content-visibility: hidden;
    -webkit-mask-repeat:  no-repeat;
}
.g-icon{
    -webkit-mask-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlFQkFERkU4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlFQkFERkQ4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJFOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJGOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Kk5lQwAABYxJREFUeNrkm29oVXUYx3+7bM3V1FnbqlltrtXWtYRa1nqxooY5E7EhKWGuaTDBagol9SIMDCKICASj+cISw/DPi16ZBakrUBnoC7nNoTMWy6I1c+LmVq6t78N9jpyu555znt855+536IHPi939/jzP95zznN+/kzc1NaUitirwJJgPasF94DZQDG7hMqNgBFwEZ5kU+AH0R+lcXgQCJMBT4EXwLKgM2N7P4FvwJegCk6YKUA5eB23grogu2C/gc7AN/GGKABTsZtAOZqjc2DjYAT5kUfSNBNCkAGwGo1PTZ6PsQ4FuHLp3QD3YDR5QZtgZsAac1ElYokcGbATHDApesS/kUwf7GEkOKAK7wAvKbNsPXgZjYQowG3wNnlDxsONgCbgchgAU/GHwiIqXUT5o8hLBKwfcDA7FMHgrUR/iGLQEoGTyBWhQ8bUGjiFPR4A3QIuKv7VwLKIcQMnue5Dv0fjT/IwtAM3g+RyMBmkU+BXf3qc5Rx3xqDPBE7LjfkaCheCcj1HYKYe6JeBt8GcEo75L3HaJQ7+nfNQ/x7H9p67TFX4L1Pi4EocdfhsGH4BPwVbwqu0xGwI/8vT2N/77Gv+vAJSCO3n6PJ//Vjz72w62cPtORnfAwx7+1nBsW93ugGow7vOKtPkYa9eDl0Clxji9kuvW+yjb5tPncY7xet3MhjoFt2RzgIlU2DQL/O6017W/Be4BawXJqMCgTH+ToOxajvWG1+AmYVBlBglQKrxwmzIFoB9XCzt91CABpL6sti62JcBiXtKS2GMGCSD1pZxjvi7AKmED9PraYJAAG2yvVL+2yi7AImHl90C3QQJ03/B+97ZF1lCYVlN6BBV/BffykNQkoyF4H5grqJOkO6BR2NF2A4O35gifCOs0JjTW9vYaPPPbJ11LJAFqBRVoDf68wQLQI3BBUL424XPiY1lvDOb/ZwRla0iAOYIKv8dAgEFB2VtJgJmCChMxEEAyHigmAQoFFWbFQIDZgrKF0p2hmTEQQOQjCTAmKD8vBgJUCcqOkQBXBBXosEORwcEXKdmBjCskwICgQr5h0+BMW6i8V7LtNkAC9As7WWqwAM8Jy/cnhBMhspVKvq2eC0uwbxLrSWhMa+dpdJQLW6mRpLtpOlyuMcL7CTwErhoSPG2ApjQEuD3BQ0fp0ZJqlT6pZYpt0wieYh60nuWDGp2+At4xIPgt7IvU0jHzBkFdgD27HWDGNGyGFHHfulaXuTN0IkBjZ8EykJeDwKmPFtAXwN8TTltjrVkKfwcawXJW3G3v8DTYCKoiCLwGvAl6QthpbnU6J5jP2f1uh1Wgxbbxwv0qvT/vtZRGA6wuzs50+Pkb8JdgQtPMq1VJld7bnxtSzhjgJD5hzwEW611OZK6xlSvzeYbAsl3Cx4PK7ozodOl6t93hfJByqbzOVnYh+MdHhxfBLI1bnuoMhRx8imPMKgDR5LG/nrSVfddHpx8HeO4/ClmApsw+snXsdk7gYMat+r5Hp0sDCLAkxOA7nfrI1nGxx2tmQUb5x8FuzgvD4Dw4wNm2MIAA1SEF38cx+RaAeBCMZGlwb44GOyUhBD/CsTj24TatpddXq3L+RIVmXnE4QzjJMaSylvBxFdqzKHsVrDD8Dmj36sOvIx0unewHDRENg4MI0BH2FyP0RcZOlzW3Ib7VLvPqDK0z1PEq7bDmLVwCLgnr0AhvnUp/0eJp0k9m6HO4fUp2nGZODgUY5PzUJVlHkxg1TEfnjxqY8I6yb12SSjqLm7T9/Ax4TaW/+JxuIx862KcL4toBk1QFT1omXZLRHQHaL3Npl/r8jH3QjiGsbJ3kGd/fDo6WBWi31KG9a9xXMgzfw35tVfCR9l52dk8Ibe7htnq57YowfY7i4+lYWUL9z+1fAQYACqstE4NCc18AAAAASUVORK5CYII=");
    background: var(--tcolor);
    content-visibility: hidden;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
}
@media(max-width: 800px){
    #navbar{
        justify-content: center;
    }
    .anchor-link{
        padding: 0 .5rem;
    }
    a[href^="#cont"]{
        margin-right: 10px;
    }
  #projects{
    height: 100%;
  }
    .m-heading{
        flex-direction: column;
    }
    .name{
        margin-top: -1.5rem;
    }
    .social-cont{
        margin: 2rem 1rem;
    }
    .s-links{
        margin: 0 .5rem;
        padding: .5rem;
    }
    .s-links img{
        width: 45px;
        height: 45px;
    }
    .p-cont{
        grid-template-columns: 45% 45%;
    }
}