@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Gruppo&family=Lato&family=Orbitron&family=Righteous&family=Roboto&family=Saira+Stencil+One&family=Titan+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none;

}

body {
    background-color: #1E1E1E;
    scroll-behavior: smooth;
    scroll-behavior: smooth;
}

#all {
    background-color: #ffffff;
    padding: 0;
}

#homeback {
    background-color: #1E1E1E;
    padding: 0;
    margin: 0;
}

/*----------------------------------------------------------------Active part-----------------------------------------------------------------------------*/
.navbarh.active {
    left: 0;

}

.mousePointer.active {
    border: 1.5px dashed rgb(255, 255, 255);
}

#bars.active .line1 {
    transform: translateX(70px);
    background-color: transparent;
}

#bars.active .line2 {
    transform: rotate(-45deg);
    background-color: rgb(255, 255, 255);
}

#bars.active .line3 {
    transform: rotate(45deg);
    background-color: rgb(255, 255, 255);
}

/*----------------------------------------------------------------Active part-----------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------3 Menu bars-------------------------------------------------------------------------------------------*/
#bars {


    font-size: 30px;
    right: 30px;
    top: 30px;
    width: 30px;
    height: 26px;
    position: fixed;
    cursor: pointer;
    z-index: 62;
    animation: bars 1s;


}

@keyframes bars {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

#bars .line1,
.line2,
.line3 {
    margin-top: 10px;
    position: fixed;
    width: 30px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    transition: .5s ease-in-out;
    border-radius: 5px;
}

#bars .line2 {
    transform: translateY(-10px);
}

#bars .line3 {
    transform: translateY(10px);
}




.navbarh ul {

    margin-top: 0;

}

.navbarh ul li {
    list-style: none;
    text-align: left;
    width: 30vw;
}

.navbarh ul li a {
    transition: .5s;

    text-decoration: none;
}

#link {
    font-size: 9vw;

}

#link a {
    color: rgb(255, 255, 255);
    font-family: 'Righteous', cursive;
}

#link:hover a {

    color: #FFD21D;
    padding: 0 20px;
}

.navbarh {

    position: fixed;
    transition: .5s;
    z-index: 32;
    width: 100%;
    height: 100%;
    left: -100%;
    background-color: #1E1E1E;
    /*animation: nav .9s;*/
}

.navbarh .center {

    display: grid;
    place-items: center;
    height: 100%;
    text-align: center;
}

.scrolldown {

    position: absolute;
    writing-mode: vertical-lr;
    /* text-orientation: upright; */
    top: 40%;
    left: 30px;
    color: whitesmoke;

    /* background-color: #7F1DFF; */
    z-index: 30;
}

.scrolldown h4 {
    font-size: 20px;
    font-family: 'Righteous', cursive;
    letter-spacing: 5px;


    /* border-right: 1px solid whitesmoke; */
    cursor: pointer;
}

.scrolldown h4 a {
    text-decoration: none;
    color: white;
}

.scrolldown h4 span {
    animation: scrolldown 1s linear infinite;
    animation-play-state: paused;
}

.scrolldown h4:hover span {
    animation-play-state: running;
}

@keyframes scrolldown {
    0% {}

    50% {
        padding-top: 20px;
    }

    100% {
        padding-top: 0px;
    }
}


/*--------------------------------------------------------------------------3 Menu bars-------------------------------------------------------------------------------------------*/
/* .sideNav {

    top: 60%;
    position: fixed;
    right: 50px;
    z-index: 1;
    transform: rotate(270deg);
    cursor: pointer;
    animation: sidenav 1s;
    display: flex;


}

@keyframes sidenav {
    0% {
        opacity: 0;

    }

    100% {
        opacity: 1;

    }

}

.sideNav h3 {
    font-size: 20px;

    font-family: 'Righteous', cursive;

}

.inW {
    position: absolute;
}

.inW:nth-child(2) {
    transition: .5s;
    transform: translateX(95px);
    opacity: 0;
}

.sideNav:hover .inW:nth-child(2) {

    transform: translateX(100px);
    opacity: 1;
}

.sideNav a {
    text-decoration: none;
    color: #ffffff;
}

.sideNav .inW:hover a {
    color: #ffffff;
} */

/*--------------------------------------------------------------------------HOME -------------------------------------------------------------------------------------------*/

.home {

    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #1E1E1E;
    font-family: 'Righteous', cursive;

    overflow-x: hidden;
    /* perspective: 1000px; */
}



.boxOut {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #1E1E1E;
    z-index: 21;
}

.box {
    /* z-index: -2; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30px;
    height: 30px;
    transform-style: preserve-3d;
    /* transform: translateY(40deg); */
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);


    }

    100% {
        transform: rotateY(360deg);

    }
}

.box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.box div span {
    /* filter: blur(5px);  */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(rgb(161, 50, 252), rgb(248, 79, 212)); */
    border: 2px solid rgb(255, 255, 255);
    transform: rotateY(calc(90deg * var(--i)))translateZ(15px);

    animation: scale 1s linear;
}

/* @keyframes scale {
    0% {
        transform: scale(0) ;


    }

    100% {
        transform: scale(1) ;

    }
} */













.home h1 {
    font-size: 25vw;
    padding: 0;
    margin: 0;

}

.home .social {}

.home .social ul {
    display: flex;

    list-style: none;
}

.home .social ul li {
    margin: 20px 10px;
}

.home .social ul a {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    transition: .5s;
}

.home .social ul a:hover {
    color: #bebdb8;
}

.social ul li #hire {
    width: 100px;
    height: 30px;
    transition: 0.5s;
    font-family: 'Righteous', cursive;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    box-shadow: #FF1D77 2px 2px, #7F1DFF 4px 4px;
    cursor: pointer;

}

.social ul li #hire:hover {
    /* background-image: linear-gradient(to right, #FFD21D ,#FF1D77); */
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    box-shadow: none;
    transform: translateX(3px) translateY(3px);

}

.home .headline {
    z-index: 5;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;

    display: grid;
    justify-content: center;
    grid-template-columns: auto;

    /* font-family: 'Franklin Gothic heavy', 'Arial Narrow', Arial, sans-serif; */
    font-family: 'Franklin Gothic heavy', sans-serif;
}

.headline .row1 {
    /* background-color: #FFD21D; */
    height: 20vh;
    position: relative;

    z-index: -2;
}

.headline .row1 #hello {
    width: 30vw;
    position: absolute;
    /* left: 25vh;*/

    left: 0;

    animation: boy 7s forwards;

    z-index: -1;
}
.go{
    animation: go 3s forwards;
}
@keyframes go {
0%{

}
100%{
    opacity: 0;
} 

}
.headline .row1 .boy {
    left: 15vw;
    position: relative;
    /* background-color: #7F1DFF; */
    cursor: pointer;
    color: #FFD21D;
    transition: 1.5s ease;
}

@keyframes boy {
    0% {

        transform: translateY(0) translateX(-40vw) rotateZ(-20deg);
    }

    25% {
        transform: translateY(-30px) translateX(0px);
    }

    50% {

        transform: translateY(30px) translateX(0px);
    }

    100% {

        transform: translateY(0) translateX(0px);
    }

}

@keyframes boyup {
    0% {

        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }
}

.headline .row1 #boytalk {
    font-size: 30px;
    text-align: left;
    padding-left: 4vw;
    /* font-family: 'Roboto Mono', monospace; */
    font-family: 'Fuzzy Bubbles', cursive;
    animation: talk 6s linear;

    animation-delay: 2s;
    opacity: 0;
}

@keyframes talk {
    0% {
        transform: translate(30px, 30px);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }
}

/* @keyframes boyup {
from{
    transform:translateY(0px)
}
to{
    transform:translateY(-30px)
}


} */

.headline .row1 .cloud {

    position: absolute;
    z-index: -2;
    width: 10vw;
}

.headline .row1 #Cone {
    width: 10vw;
    left: 10%;
    animation: Cone 5s linear infinite;
}

@keyframes Cone {
    0% {

        transform: translateX(0px);
    }

    50% {

        transform: translateX(60px);
    }

    100% {

        transform: translateX(0px);
    }

}

.headline .row1 #Ctwo {
    width: 8vw;
    position: relative;

    animation: Ctwo 5s linear infinite;
}

.headline .row1 .ctwo {

    margin-left: 25vw;

}

@keyframes Ctwo {
    0% {

        transform: translateX(0px);
    }

    50% {

        transform: translateX(-60px);
    }

    100% {

        transform: translateX(0px);
    }

}

.headline .row1 #Cthree {
    position: relative;
    width: 6vw;
    animation: Cthree 5s linear infinite;
    top: 5vh;
}

.headline .row1 .cthree {



    margin-right: 10vw;

}

@keyframes Cthree {
    0% {

        transform: translateX(0px);
    }

    50% {

        transform: translateX(90px);
    }

    100% {

        transform: translateX(0px);
    }

}

.home .headline h1 {}



.home .headline .one {
    font-size: 8vw;
    color: #7F1DFF;
    grid-row: 1;
    animation: one 1s;

    position: relative;

}

@keyframes one {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }

}



.home .headline .row1 {}

.home .headline .row2 {
    display: flex;
    margin-top: -8vh;

    justify-content: center;
    width: 100%;
    text-align: center;
}

.home .headline .row3 {

    margin-top: -9vh;
}



.home .headline .two {

    color: #FF1D77;
    font-size: 18vw;
    animation: two 2s;

    position: relative;
}

@keyframes two {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}


.home .headline .three {
    font-size: 10vw;
    text-align: left;
    display: grid;
    justify-content: center;
    align-content: center;
    padding-left: 20px;

    color: transparent;
    -webkit-text-stroke-width: .9px;
    -webkit-text-stroke-color: rgb(255, 255, 255);

    animation: three 1.5s;

    position: relative;
}

@keyframes three {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }

}

/* .home .headline .three:hover+.three {
    background-color: #7F1DFF;
} */

.home .headline .four {
    font-size: 10vw;

    /* animation: color 3s linear infinite; */
    animation: four 2s;
    color: whitesmoke;
    position: relative;
    
    z-index: 12;
}

@keyframes four {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

.home .headline .four #n {
    opacity: 0;
}

.home .headline .four #i {
    opacity: 0;
}

.home .headline .four #l {
    opacity: 0;
}

.home .headline .four #u {
    opacity: 0;
}

.home .headline .four #p {
    opacity: 0;
}

.home .headline .four #u2 {
    opacity: 0;
}

.home .headline .four #l2 {
    opacity: 0;

}

/*@keyframes color {
    0% {

       color: #ffffff;
    }
    50% {

        color: #FFD21D;
     }
    100% {
        color: #ffffff;;
    }

}

 .left {
    width: 50%;
    height: 100vh;
    background-color: rgb(201, 201, 201);
    position: inherit;

}

.left .c {
    position: absolute;
    top: -5vh;
    left: 30vw;
    color: #ffffff;
 transition: .5s;

}

.left .c h1 {
    animation: CC 1s ease-in-out;
}

@keyframes CC {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

.right {
    height: 100vh;
    width: 50%;
    position: inherit;
    background-color: #ffffff;
}

.right .n {
    color: rgb(201, 201, 201);
    position: absolute;
    bottom: -5vh;
    right: 30vw;
    transition: .5s;
}

.right .n h1 {
    animation: NN 1s ease-in-out;
}

@keyframes NN {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

} */

.sign {
    position: absolute;
    top: 20px;
    left: 30px;
    animation: sign 1s;
}

@keyframes sign {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

/* .home .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 1.5s linear infinite;
    animation-play-state:paused
}

.home .circle:hover {
    color: #000000;
    animation-play-state: running;
}

@keyframes rotate {

   to{

        transform: translate(-50%, -50%) rotate(360deg);
    }

}
 */







.html {
    position: absolute;
    right: 45%;
    top: 20%;
    transition: .5s;
    transform: rotate(-25deg);
    animation: html 2s infinite;

}

.html :hover {
    transform: scale(1.2);
}

.css {
    position: absolute;
    right: 5%;
    top: 20%;
    transform: rotate(25deg);
    animation: css 2s infinite;
}

.css :hover {
    transform: scale(1.2);
}

.js {
    position: absolute;
    right: 25%;
    top: 80%;
    transform: rotate(-15deg);
    animation: js 1.5s infinite;
}

.js :hover {
    transform: scale(1.2);
}

@keyframes html {
    0% {
        transform: translateY(0px) rotate(-25deg);
    }

    50% {
        transform: translateY(10px) rotate(-25deg);
    }

    100% {
        transform: translateY(0px) rotate(-25deg);
    }

}

@keyframes css {
    0% {
        transform: translateY(0px) rotate(-25deg);
    }

    50% {
        transform: translateY(-10px) rotate(-25deg);
    }

    100% {
        transform: translateY(0px) rotate(-25deg);
    }

}

@keyframes js {
    0% {
        transform: translateY(0px) rotate(-25deg);
    }

    50% {
        transform: translateY(-10px) rotate(-25deg);
    }

    100% {
        transform: translateY(0px) rotate(-25deg);
    }

}








/*--------------------------------------------------------------------------HOME-------------------------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------WORK-------------------------------------------------------------------------------------------*/
.work {
    height: 100vh;
    position: relative;

}

.sec {
    width: 100%;
    height: 110vh;
    position: relative;
    background-color: #0c0c0c;
    /* overflow-x: hidden; */
    z-index: 4;
}

.sec h5 {
    font-size: 6vw;
    position: absolute;
    font-family: 'Franklin Gothic heavy', sans-serif;
    text-align: right;
    right: 10vw;
    top: 15vh;
    color: #6261615d;
    text-transform: uppercase;
    z-index: -1;
}

.show {
        animation: break 1s linear;
}

@keyframes break {
    from {
        transform: translateX(-50px);
    }

    to {
        transform: translateX(0px);
    }
}

.sec h5 #better {
    color: #5a4775;
}

.sec h5 #fu {
    color: #5a4775;
}

.sec h5 #satis {
    color: #5a4775;
}

.sec .mywork {
    position: absolute;
    top: 50%;
    left: -35%;

    transform: translate(-50%, -50%);
}

.sec .mywork #my {



    color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgb(255, 255, 255);
}

.sec .mywork {
    color: #FFD21D;
    font-size: 8vw;
    font-family: 'Franklin Gothic heavy', sans-serif;
}

.sec #mywork {
    position: relative;
}

.sec #lap {
    color: #FF1D77;
    position: relative;
    width: 30vw;
    top: 10vw;
    cursor: pointer;
    animation: lap 2s linear infinite;
    box-shadow: #ffffff 30px;
}

.sec #lap:hover {
    animation-play-state: paused;

}

@keyframes lap {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(30px)
    }

    100% {
        transform: translateY(0px)
    }

}



.works {
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    z-index: 6;
    padding-top: 5vh;
    background-color: #1E1E1E;
}

.works ul {
    list-style: none;
    display: block;
    text-align: center;
}

/* .works ul li{
    transform: rotate(10deg);
} */
.works ul li a {
    text-decoration: none;
}

.works ul li a {
    text-align: center;
    font-family: 'Franklin Gothic heavy', sans-serif;
    font-size: 8vw;
    color: whitesmoke;
    /* -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgb(255, 255, 255); */
    transition: .5s;
    cursor: pointer;
    width: auto;
}

.works ul li a:hover {
    color: #FFD21D;
    -webkit-text-stroke-width: 0px;
    cursor: none;

}

.thank {
    width: 100%;
    height: 100vh;
    background-color: #FFD21D;
    position: relative;

}

.thank .endlink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-family: 'Franklin Gothic heavy', sans-serif;
}

.thank .endlink h1 {
    position: absolute;

    font-size: 8vw;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.thank .endlink h1::after {
    width: 100%;
    content: 'THANK YOU';
    position: absolute;
    font-size: 12vw;

    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(0, 0, 0);
    z-index: -1;
}

.thank .endlink ul {
    z-index: 7;
    margin-top: 20px;
    list-style: none;
    display: flex;
    justify-content: center;
}

.thank .endlink ul li a {
    margin: 0 10px;
    font-size: 20px;
    color: #000000;
    transition: .5s;
}

.thank .endlink ul li a:hover {

    color: #FF1D77;
}

.endlink .mailme {
    font-size: 3vw;
    margin-top: 5vh;
    text-align: center;
    margin-top: 18vh;
}

.endlink .mailme a {
    font-size: 2vw;
    color: #FF1D77;
    transition: .5s;
}

.endlink .mailme a:hover {
    letter-spacing: 2px;
}

.thank #up {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 30px;
    bottom: 30px;
    border: 2px solid black;
    background-color: transparent;
    font-weight: bolder;
    cursor: pointer;
    box-shadow: #000000 2px 2px, #7F1DFF 4px 4px;
    transition: .5s;
}

.thank #uparrow button {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;

}

.thank #up:hover {
    box-shadow: none;
    background-color: #FF1D77;
    transform: translateX(3px) translateY(3px);

}

.secmobile {
    display: none;
}

/*--------------------------------------------------------------------------WORK-------------------------------------------------------------------------------------------*/


#footer {
    background-color: #FFD21D;
}

.copyright {

    color: #000000;
}

.copyright p {
    margin: 0;
    text-align: center;
    padding-bottom: 15px;
    font-family: 'Franklin Gothic thin', sans-serif;
}

.mousePointer {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    position: fixed;
    border: 1.5px dashed rgb(255, 255, 255);
    border-radius: 50%;
    transition: .2s;
    pointer-events: none;

    transform: translate(-50%, -50%);
    z-index: 63;


    background-repeat: none;
    background-position: cover;
}

/* @media only screen and (max-width: 1400px) {
    .left .c {

        top: 5vh;
        left: 30vw;



    }
    .right .n {


        bottom: 5vh;
        right: 30vw;

    }
    .home .circle {

     width: 60px;
    }


} */
@media only screen and (max-width: 912px) {

    .home {
        perspective: 1000px;
    }

    .home .headline .row2 {

        margin-top: -40px;


    }

    .home .headline .row3 {

        margin-top: -40px;
    }

    .home .headline .one {
        font-size: 11vw;
    }

    .home .headline .two {
        font-size: 21vw;
    }

    .home .headline .throoe {
        font-size: 13vw;
    }

    .home .headline .four {
        font-size: 13vw;
    }

    .mousePointer {
        display: none;
    }

    .thank .endlink ul {
        margin-top: 80px;
    }

    .headline .row1 #hello {
        width: 60vw;
    }

    .headline .row1 .boy {
        left: 10vw;
    }

    .headline .row1 #Cone {
        width: 20vw;
    }

    .headline .row1 #Ctwo {
        width: 25vw;
    }

    .headline .row1 #Cthree {
        width: 10vw;
    }

    .headline .row1 .cthree {



        margin-right: 0vw;

    }




    .sec {
        display: none;

    }

    .secmobile {
        width: 100%;
        height: 90vh;
        display: block;
        justify-content: center;
        align-items: center;
        background-color: #0c0c0c;
    }

    .inmobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .secmobile .myworkmobile {
        width: 100%;
        color: #FFD21D;
        font-size: 12vw;
        font-family: 'Franklin Gothic thin', sans-serif;
    }

    .secmobile #lapmobile {
        width: 30vw;
        margin-top: 10vh;
        animation: lapmobile 2s linear infinite;
    }

    @keyframes lapmobile {
        0% {}

        50% {
            transform: translateY(30px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    .works {
        height: 60vh;
        padding-top: 7vh;
    }

    .work ul li {
        margin-top: 20px;
    }

    .thank {
        height: 70vh;
    }



    .scrolldown {
        display: none;
    }




}

/* @media only screen and (max-width: 750px) {
    .sideNav {
        display: none;
    }



} */

@media only screen and (max-width: 575px) {
    .home .headline .row2 {

        margin-top: -20px;


    }

    .home .headline .row3 {

        margin-top: -20px;
    }

    .home .headline .three {
        -webkit-text-stroke-width: 1.5px;
    }

    .sign img {
        width: 25px;
    }

    #bars .line1,
    .line2,
    .line3 {
        margin-top: 3px;

        width: 25px;
        height: 3px;

        border-radius: 5px;
    }

    .headline .row1 #boytalk {
        font-size: 20px;
        padding-left: 0px;
    }

    .mousePointer {
        display: none;
    }

    .social {
        display: none;
    }

    .copyright p {
        font-size: 10px;
    }

    .thank .endlink h1 {
        font-size: 8vw;
    }

    .thank .endlink ul {
        margin-top: 50px;
    }

    .thank .endlink h1::after {
        -webkit-text-stroke-width: 2px;
    }
}