@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

html{
    scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

/* variables */
:root {
    --pblue: #1fb2e5;
    --pyellow: #ffd524;
    --pgrey: #1e1e1e;
    --pwhite: #ffffff;
    --pblack: #141414;
    
}

/* my custom cursor */
.cursorMu{
    position: fixed;
    pointer-events: none;
    z-index: -10000;
    /* color: var(--pyellow); */
    /* background-color: var(--pyellow); */
    /* height: 100vh; */
    /* width: 100vw; */
}
.m2{
    fill: var(--pwhite);
    transition: all 0.3s ease;
}
.fillyellow{
    fill: var(--pyellow);
    transform: scale(0.8);
}

body {
    /* overflow-y: scroll; */
    scroll-behavior: smooth;
    background-color: var(--pgrey);
    color: var(--pwhite);
    font-family: 'Inter', sans-serif;
}


/* part1- header */
.heading {
    z-index: 200;
    position: fixed;
    background-color: var(--pblack);
    display: flex;
    width: 100vw;
    justify-content: space-around;
    /* box-shadow: 0px 10px 80px black; */
}

.navbar {
    padding: 10px;
}
.head-logo {
    height: 30px;
    width: 30px;
}
.head-text {
    padding: 10px;
    letter-spacing: .2rem;

}
/* links to other pages */
ul {
    list-style: none;
}
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.list-item {
    padding: .8rem;

}


/* part2- about section */
.about-me{
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-cont {
    display: grid;
    width: 80vw;
    height: 100vh;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: minmax(300px, auto);
    align-items: center;
    justify-content: center;
    grid-template-areas: 
    "aboutmetxt aboutmetxt funkylogo";
}

.grid-item1 {
    grid-area: aboutmetxt;
    justify-self: center;
}
.grid-item2 {
    grid-area: funkylogo;
    justify-self: center;
}

#description {
    display: inline;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--pyellow);
    color: var(--pgrey);
    padding: 10px;
    border-radius: 8px;
    transition: all .3s ease-in-out;
}
.greet-head1,
.greet-head2,
.greet-head {
    font-size: 3rem;
    transition: all .5s ease;
    /* cursor: default; */
}
.greet-head2:hover {
    color: var(--pblue);
    transform: scale(1.2) translateX(40px) ;
}
.funky-large {
    height: 400px;
    width: 400px;
    transition: all .5s ease;
}
.funky-large:hover {
    transform: scale(.7) rotate(8deg);
    
}

.b-funky-img{
    position: relative;
    top: 7px;
    height: 65px;
    width: 45px;
}
.a-funky-img{
    position: relative;
    top: 19px;
    height: 70px;
    width: 50px;
}
#description:hover{
    background-color: var(--pblue);
    color: var(--pwhite);
}




/* project section */
.project-section {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--pblue);
    align-items: center;
    /* justify-content: center; */
}

.gridx3-p{
    display: grid;
    width: 70vw;
    height: 90vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr 3fr 1fr;
    grid-auto-columns: 20vw;
    /* align-items: center; */
    /* justify-content: center; */
    /* grid-auto-rows: 200px; */
    grid-gap: 20px;
    grid-template-areas:
    "headingproject headingproject headingproject"
    "linebreak linebreak linebreak"
    "proj1 proj2 proj3"
    "proj1 proj2 viewall"
    ;
}
.gridx3-items{
    background-color: var(--pgrey);
    color: var(--pwhite);
    display: flex;
    align-items: top;
    justify-content: center;
    transition: all 0.45s ease ;
}
.gridx3-items:hover{
    background-color: var(--pblack);
    background-color: rgba(0, 0, 0, 0.87);
    transform: scale(1.05);
    z-index: 3;
    box-shadow:  rgba(255, 255, 255, 0.603) 5px 5px 0px;
}


.rect{
    height: 8px;
    width: 20%;
    background-color: var(--pyellow);
    border-radius: 1rem;
    
}
.left-rect{
    position: relative;
    top: 20%;
    right: 6%;
    
}
.right-rect{
    position: relative;
    top: 20%;
    left: 6%;
    
}
.cent-circle{
    height: 100px;
    width: 100px;
    /* background-color: var(--pwhite); */
    border-radius: 50%;
    position: relative;
    top: 8.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.projhead{
    /* cursor: pointer; */
    position: absolute;
    /* top: 2rem; */
    transform: translateY(200px);
    font-size: 1.1rem;
    
}
.projspace{
    width: 10rem;
    height: 4px;
    border-radius: 8px;
    background-color: var(--pwhite);
    position: absolute;
    transform: translateY(175px);

}
.projimg{
    z-index: 3;
    transition: all 0.45s ease;
    /* height: 150px;
    width: 150px; */
}
.projimg:hover{
    transform:  scale(1.2) ;
    /* border-radius: 50%; */

}
.projdesc{
    position: absolute;
    transform: translateY(230px);
    /* padding: 1rem; */
    padding: 10px;
    /* border: 3px solid red; */
    font-weight: lighter;
    color: var(--pwhite);
    text-align: justify;
    width: 20vw;
    font-size: 1rem;

}
.backkk{
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 200px;
    transform:  rotate(90deg) scale(1.5);
    animation: rotator 20s infinite linear; 
}
.extension-github{
    position: relative;
    transform: scale(1.5) translate(45px, 280px);
    transition: all 0.3s ease;
    color: var(--pblue);
    /* cursor: pointer; */

}
.extension-github:hover{
    color: var(--pyellow);
}


@keyframes rotator {
   0%{
       transform: rotate(0deg);
       opacity: 1;
    }
 
    50%{
        opacity: 0.5;
        /* transform: rotate(180deg), scale(1.3); */
       
    }
  
    100%{
        transform: rotate(360deg);
        opacity: 1;
   }
}




.gridx3-1{
    grid-area: headingproject;
}
.gridx3-2{
    grid-area: linebreak;
    justify-self: center;
}
.gridx3-3{
    grid-area: proj1;
    
}
.gridx3-4{
    grid-area: proj2;
}
.gridx3-5{
    grid-area: proj3;
}
.gridx3-6{
    display: block;
    grid-area: viewall;
}


.gridx3-3,.gridx3-4,.gridx3-5{
    height: 60vh;
    width: 22vw;
    background-color: var(--pgrey);
    border-radius: 8px;
}


.proj-header, .blog-header {
    text-align: center;
    padding-top: 3rem;
    font-size: 3rem;
}

.line-break {

    height: .4rem;
    background-color: var(--pgrey);
    width: 10vw;
    border-radius: 5px;
    /* margin-top: 1rem; */
    margin-bottom: 1rem;
    align-items: center;
}



/* blog section  */
.blog-section{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--pyellow);
    align-items: center;
}


/* footer  */
.footer{
    padding: 20px;
}
.imgfooter {
    height: 100px;
    width: 100px;
    /* width: 80px; */
    /* height: 80px; */
    /* border-right: 2px solid var(--pwhite); */
    /* padding-right: 40px; */
    margin-right: 30px;
}
.divider{
    height: 10vh;
    width: 4px;
    background-color: var(--pyellow);
    margin-right: 30px;
    border-radius: 8px;
}
.lightt {
    font-style: lighter;
    font-size: 1.3rem;
}






/* utilities */
.border {
    border: 3px solid rebeccapurple;
}

.spacer {
    padding-bottom: 20px;
}

.light {
    letter-spacing: 2px;
    /* font-weight: inherit; */
    /* font-style: italic; */
}

.large {
    /* transform: scale(2); */
    font-size: 4rem;
}



.links {
    color: var(--pblue);
    text-decoration: none;
    /* cursor: pointer; */
    transition: all .45s ease;

}

.links:hover {
    color: var(--pyellow);
    /* background-color: var(--pblue); */
}

.cursorMu {
    position: absolute;
    z-index: 200;
    height: 30px;
    width: 30px;
}
.grey {
    color: var(--pgrey);
}

.yellow {
    color: var(--pyellow);
}

.blue {
    color: var(--pblue);
}

.white {
    color: var(--pwhite);
}
.bg-yellow{
    background-color: var(--pyellow);
}














/* scroll to top */
.btn {
    background-color: var(--pblue);
    transition: all .3s ease;
}

#scroll-to-top {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    border: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: var(--pblue);
    color: var(--pwhite);
    transition: all .3s ease;
}

#scroll-to-top:hover{
    background-color: var(--pyellow);
}

.svg-arrow {
    position: relative;
    /* left: 0px; */

    /* top: 80px; */
    height: 80px;
    width: 50px;
    z-index: 10;
    transform: translate(47px, 60px) scale(2.5);
}

.btn:active {
    transform: scale(0.90);
}

/* selection of text */

::selection {
    color: var(--pblack);
    background: #fafafa73;
    background: var(--pyellow)
}




/* scrollbar */
::-webkit-scrollbar {
    width: 10px;
    transition: all 1s ease;
    /* background-color: var(--pwhite); */
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px var(--pwhite);
    /* border-radius: 10px; */
    /* background-color: var(--pwhite); */
}

::-webkit-scrollbar-thumb {
    /* background-image: linear-gradient( to left, var(--pblue) , var(--pyellow) ); */
    background: var(--pblue);
    border-radius: 10px;
    transition: all 1s ease-in;

}

/* ::-webkit-scrollbar-thumb:hover {
    background: var(--pyellow);
} */

/* .container {
	overflow: auto;
	color: var(--pblue);
	transition: color 0.3s;

	&:hover {
		color: #666666FF;
	}
} */




/* background image art */
.nodis {
    display: none;
}

.circles {
    z-index: -1;
    position: absolute;
}

.circle {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: var(--pwhite);
    transition: all 1.0s ease;
}

.circle1 {
    background-color: yellow;
    position: absolute;
    left: 640px;
    top: 400px;
    opacity: 0;
    animation: cir5 3.8s infinite;
}
.circle2 {
    position: absolute;
    left: 90px;
    top: 400px;
    opacity: 0;
    animation: cir5 5.1s infinite ease-in-out;
}

.circle3 {
    background-color: yellow;
    position: absolute;
    left: 190px;
    top: 90px;
    opacity: 0;
    animation: cir5 3.3s infinite ease-in-out;
}
.circle4 {
    /* background-color: yellow; */
    position: absolute;
    left: 590px;
    top: 400px;
    opacity: 0;
    animation: cir5 2.6s infinite ease-in-out;
}
.circle5 {
    background-color: yellow;
    position: absolute;
    left: 540px;
    top: 400px;
    opacity: 0;
    animation: cir5 2s infinite ease-in-out;
}
.circle6 {
    /* background-color: yellow; */
    position: absolute;
    left: 490px;
    top: 400px;
    opacity: 0;
    animation: cir5 2.5s infinite;
}
.circle7 {
    background-color: yellow;
    position: absolute;
    left: 440px;
    top: 400px;
    opacity: 0;
    animation: cir5 1.8s infinite;
}
.circle8 {
    /* background-color: yellow; */
    position: absolute;
    left: 390px;
    top: 400px;
    opacity: 0;
    animation: cir5 1.5s infinite;
}
.circle9 {
    background-color: yellow;
    position: absolute;
    left: 340px;
    top: 90px;
    opacity: 0;
    animation: cir5 3.2s infinite;
}
.circle10 {
    /* background-color: yellow; */
    position: absolute;
    left: 290px;
    top: 90px;
    opacity: 0;
    animation: cir5 3.2s infinite;
}

@keyframes cir5 {
    0% {
        /* transform: rotate(0deg); */
        /* transform-origin: 200px 200px; */
        transform: translate(100px);
        opacity: 0;
    }

    25% {

        opacity: 1;
    }

    50% {
        transform: translate(-100px);
        opacity: 0;
        /* transform: rotate(180deg); */

    }

    75% {

        opacity: 1;
    }

    100% {

        transform: translateY(-200px);
        opacity: 0;
        border-radius: 0;
    }
}




/* Responsiveness */

@media only screen and (max-width: 750px) {
    body {
      background-color: lightgreen;
      overflow-x: none;
    }


    .grid-cont {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr;
        grid-template-areas: 
        "funkylogo"
        "aboutmetxt"
        ;
    }
    

    /* project section */
     .gridx3-p{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.5fr 3fr 3fr 3fr 1fr;
        grid-template-areas: 
        "headingproject"
        "linebreak"
        "proj1"
        "proj2"
        "proj3"
        "viewall"
        ;
    }
    .gridx3-3,  .gridx3-4,  .gridx3-5 {
        height: 20vh;
    }
    .navbar{
        display: none;
    }
  }