.a {
    height: 100vh
}

.hrline {
    position: relative;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    border-radius: 10px;
    background-color: #a5a5a5
}


.name {
    font-family: 'Bree Serif', serif;
    margin-block-start: 0;
    font-weight: lighter;
    color: #dfdfdf;
    text-align: center;
    position: relative;
    top: 27%;
    font-size: 20vh
}

.dev {
    font-family: 'Poppins', sans-serif;
    margin-block-start: 0;
    font-weight: bolder;
    letter-spacing:5px;
    color: #dfdfdf;
    text-align: center;
    position: relative;
    top: 0%;
    font-size: 4vh;
}


.hi {
    font-family: 'Bree Serif', serif;
    font-size: 35px;
    color: #dfdfdf;
    font-weight: lighter;
    display: block;
    position: relative;
    margin: 0
}

.describe-p {
    font-family: 'Poppins', sans-serif;

    color: #d6d6d6;
}

.span1 {
    font-family: 'Bree Serif', serif;
    margin-block-start: 0;
    font-weight: bolder;
    color: #dfdfdf;
    text-align: center;
    position: relative;
    top: 25%;
    font-size: 70px
}

p {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    display: block;
    position: relative;
    top: 20%;
    color: #aaa;
    font-size: 18px
}

.rule {
    background-color: transparent;
    border-style: dotted none none none;
    border-width: 8px;
    border-color: #dfdfdf;
    display: inline-block;
    position: absolute;
    top: 90%;
    right: 49%;
    width: 3%
}

hr {
    background-color: transparent;
    border-style: dotted none none none;
    border-width: 8px;
    border-color: #dfdfdf;
    display: block;
    position: relative;
    top: 45%;
    width: 3%
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0px 0px 0px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #656565;
    border-radius: 5px;
}


body {
    margin: 0
}

h1 {
    font-family: 'Baloo 2', sans-serif;
    margin-block-start: 0
}

.b {
    background-color: #121212;
    position: relative;
    height: 120vh;
    text-align: center;
}

.pic1 {
    font-size: 100px;
    display: block;
    color: #DFDFDF;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 18%;

}

h3 {
    font-family: 'Baloo 2', sans-serif;
    margin-block-start: 0;
    text-align: center;
    display: block;
    position: relative;
    top: 23%;
    font-size: 30px
}

.c {
    background-color: #121212;
    height: 850px;
    position: relative
}

.aboutme {
    font-family: 'Bree Serif', serif;
    margin: 0;
    font-weight: lighter;
    color: #dfdfdf;
    text-align: center;
    display: block;
    position: relative;
    top: 0;
    font-size: 50px
}

.game {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #bcbcbc;
    text-align: left;
    position: relative;
    top: 2%;
    margin-left: 40%;
    font-size: 20px
}

.web {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #bcbcbc;
    text-align: right;
    position: relative;
    top: 9%;
    margin-right: 48%;
    font-size: 20px
}

.challange {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #bcbcbc;
    text-align: center;
    position: relative;
    top: 4%;
    font-size: 20px
}

.g {
    text-align: left;
    display: block;
    margin: 0;
    margin-left: 40%;
    position: relative;
    top: 2%;
    font-family: 'Poppins', sans-serif;
    color: #656565;
    font-size: 17px;
}

.w {
    text-align: right;
    display: block;
    margin: 0;
    margin-right: 48%;
    position: relative;
    top: 9%;
    font-family: 'Poppins', sans-serif;
    color: #656565;
    font-size: 17px;
}

.ch {
    text-align: center;
    display: block;
    margin: 0;
    position: relative;
    top: 4%;
    font-family: 'Poppins', sans-serif;
    color: #656565;
    font-size: 17px
}

a {
    color: #aaa
}

.eat {
    display: inline-block;
    color: #dfdfdf;
    font-size: 120px;
    margin-bottom: 1%;
    position: relative;
    left: 46.8%;
    top: 0
}

.gamediv {
    display: block;
    position: relative;
    margin: 0;
    margin-top: 4%;
    margin-right: 6%;
    margin-left: 6%
}

.webdiv {
    display: block;
    position: relative;
    margin: 0;
    margin-top: 5%;
    margin-right: 6%;
    margin-left: 6%
}

.gdev {
    margin: 0;
    color: #dfdfdf;
    font-size: 120px;
    display: block;
    position: absolute;
    float: left;
    top: 2%;
    margin-left: 15%
}

.wdev {
    display: block;
    color: #dfdfdf;
    font-size: 120px;
    top: 5px;
    position: absolute;
    float: right;
    right: 24%;
    margin-left: 15%
}

.eatdev {
    display: block;
    position: relative;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto
}

.skills {
    font-family: 'Bree Serif', serif;
    margin: 0;
    font-weight: lighter;
    color: #dfdfdf;
    text-align: center;
    display: block;
    position: relative;
    top: 10%;
    font-size: 50px
}

.skillssection {
    width: 70%;
    height: 70%;
    top: 10%;
    display: block;
    position: relative;
    margin-left: 13.5%;
    margin-right: auto
}

.extraspace {
    height: 0;
    display: block;
    margin: 0;
    position: relative
}

.cSkills {
    height: 700px;
    display: block;
    margin: 0;
    position: relative
}

.sticker {
    height: 100px;
    width: 100px;
    position: absolute
}

.ue {
    left: 45%;
    top: 35%
}

.react {
    left: 65%;
    top: 63%
}

.nodejs {
    left: 75%;
    top: 42%
}

.mongodb {
    left: 12%;
    top: 45%
}

.git {
    left: 94%;
    top: 63%
}

.maya {
    left: 94%;
    top: 25%
}

.js {
    left: 49.5%;
    top: 80%
}

.html {
    left: 49%;
    top: 10%
}

.firebase {
    left: 34%;
    top: 63%
}

.css {
    left: 65%;
    top: 25%
}

.cpp {
    left: 34%;
    top: 25%
}

.bootstrap {
    left: 15px;
    top: 22%
}

.audacity {
    left: 40px;
    top: 64%
}

.d {
    display: block;
    margin: 0;
    position: relative;
    margin-bottom: 10%
}

.freelance {
    margin: 0;
    margin-top: 8%;
    font-family: 'Satisfy', cursive;
    font-weight: lighter;
    font-size: 2.5em;
    color: #dfdfdf;
    margin-bottom: 3%
}

.freelanceP {
    text-align: center;
    display: block;
    position: relative;
    top: 20%;
    font-family: 'Poppins', sans-serif;
    color: #aaa;
    font-size: 18px
}

.btn {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #121212;
    height: 50px;
    font-weight: bolder;
    transition: all .6s;
    width: 180px;
    background-color: #bcbcbc;
    border-color: #bcbcbc;
    border-style: solid
}

a {
    text-decoration: none
}

.btn:hover {
    background-color: #e1e1e1;
    border-color: #121212;
    border-radius: 50px;
    color: #121212;
    font-size: 18px
}

.btn:active {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    font-family: 'Baloo 2', sans-serif;
    font-size: 15px;
    color: #121212;
    height: 40px;
    width: 150px;
    background-color: #121212;
    border-color: #bcbcbc;
    border-style: solid
}

.e {
    background-color: #0d0d0d;
    margin: 0;
    position: relative;
    height: 100px
}

.instagram {
    font-family: 'Baloo 2', sans-serif;
    color: #aaa;
    display: inline-block;
    position: absolute;
    margin: 0;
    left: 1%;
    bottom: 0;
    transition: all .6s;
    text-decoration: none
}

.instagram:hover {
    color: #fff
}

.linkedin {
    font-family: 'Baloo 2', sans-serif;
    color: #bcbcbc;
    display: inline-block;
    position: absolute;
    margin: 0;
    bottom: 0;
    left: 33%;
    text-decoration: none;
    transition: all .6s
}

.linkedin:hover {
    color: #fff
}

.youtube {
    font-family: 'Baloo 2', sans-serif;
    color: #bcbcbc;
    transition: all .6s;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 27%;
    margin: 0;
    text-decoration: none
}

.youtube:hover {
    color: #fff
}

.hire {
    font-family: 'Baloo 2', sans-serif;
    color: #bcbcbc;
    transition: all .6s;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 2%;
    margin: 0;
    text-decoration: none
}

.hire:hover {
    color: #fff
}

.redirect {
    height: 50px;
    position: relative;
    margin: 0;
    margin-left: 30%;
    margin-right: 30%
}

.copyright {
    display: block;
    position: relative;
    margin: 0;
    color: #bcbcbc;
    margin-left: 10%;
    margin-right: 10%;
    top: 170%
}

.rights {
    font-size: 10px;
    position: relative;
    display: block;
    margin: 0;
    text-decoration: none;
    bottom: 0
}

body {
    background-color: #121212
}

.copy {
    transition: all .6s
}

.copy:hover {
    color: #fff
}

@media(max-width:1000px)and (orientation:portrait) {
    .a {
        height: 100vh
    }

    .hrline {
        position: relative;
        height: 1.5px;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
        border-radius: 10px;
        background-color: #dfdfdf
    }

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0px 0px 0px;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #656565;
        border-radius: 5px;
    }

    .name {
        font-family: 'Bree Serif', serif;
        margin-block-start: 0;
        font-weight: lighter;
        color: #dfdfdf;
        text-align: center;
        position: relative;
        top: 37%;
        font-size: 10vh
    }

    .dev {
        font-family: 'Gentium Book Basic', serif;
        margin-block-start: 0;
        font-weight: lighter;
        color: #dfdfdf;
        text-align: center;
        letter-spacing:0.5vw;
        position: relative;
        top: 25%;
        font-size: 3vh;
    }

    .b {
        background-color: #121212;
        position: relative;
        height: 120vh;
        text-align: center;
    }

    .pic1 {
        font-size: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 20%;
        height: 11%;
    }

    .hi {
        font-size: 5vh;
        top: 25%;
        color: #dfdfdf;
        font-weight: lighter;
        display: block;
        position: relative;
        margin: 0
    }

    .describe-p {
        font-size: 2.6vh;
        top: 23%
    }

    .span1 {

        margin-block-start: 0;
        font-weight: lighter;
        color: #dfdfdf;
        text-align: center;
        position: relative;
        top: 25%;
        font-size: 7vh
    }

    p {
        text-align: center;
        display: block;
        position: relative;
        font-family: Nunito, sans-serif;
        color: #aaa;
        margin-left: 15%;
        margin-right: 15%
    }

    .rule {
        background-color: transparent;
        border-style: dotted none none none;
        border-width: 14px;
        border-color: #dfdfdf;
        display: inline-block;
        position: absolute;
        top: 90%;
        right: 46.5%;
        width: 7%
    }

    hr {
        background-color: transparent;
        border-style: dotted none none none;
        border-width: 14px;
        border-color: #dfdfdf;
        display: inline-block;
        position: absolute;
        top: -50px;
        right: 46.5%;
        width: 7%
    }

    body {
        margin: 0
    }

    h1 {
        font-family: 'Baloo 2', sans-serif;
        margin-block-start: 0
    }

    h3 {
        font-family: 'Baloo 2', sans-serif;
        margin-block-start: 0;
        text-align: center;
        display: block;
        position: relative;
        top: 23%;
        font-size: 30px
    }

    .c {
        background-color: #121212;
        height: 1350px;
        position: relative
    }

    .aboutme {
        margin: 0;
        font-weight: lighter;
        color: #dfdfdf;
        text-align: center;
        display: block;
        position: relative;
        top: -50px;
        font-size: 90px
    }

    a {
        color: #aaa
    }

    .gamediv {
        display: block;
        position: relative;
        margin: 0;
        margin-right: auto;
        margin-left: auto;
        height: 500px
    }

    .gdev {
        color: #dfdfdf;
        font-size: 100px;
        position: absolute;
        left: 43%;
        margin-left: auto;
        margin-right: auto
    }

    .game {
        color: #bcbcbc;
        display: block;
        text-align: center;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        font-size: 34px;
        top: 120px
    }

    .g {
        font-family: 'Baloo 2', sans-serif;
        text-align: center;
        display: block;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        position: relative;
        top: 120px;
        color: #656565;
        font-size: 30px
    }

    .webdiv {
        display: block;
        position: relative;
        margin: 0;
        margin-top: 50px;
        margin-right: auto;
        margin-left: auto;
        height: 370px
    }

    .wdev {
        color: #dfdfdf;
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-size: 100px;
        position: absolute;
        left: 46%
    }

    .web {
        margin: 0;
        color: #bcbcbc;
        text-align: center;
        position: relative;
        top: 120px;
        font-size: 34px
    }

    .w {
        font-family: 'Baloo 2', sans-serif;
        text-align: center;
        display: block;
        margin: 0;
        margin-right: auto;
        margin-left: 5%;
        margin-right: 5%;
        position: relative;
        top: 121px;
        color: #656565;
        font-size: 30px
    }

    .eatdev {
        display: block;
        position: relative;
        margin-top: 100px;
        margin-right: auto;
        margin-left: auto
    }

    .eat {
        display: inline-block;
        color: #dfdfdf;
        font-size: 100px;
        margin-bottom: 1%;
        position: relative;
        left: 47%;
        top: 0
    }

    .challange {
        margin: 0;
        color: #bcbcbc;
        text-align: center;
        position: relative;
        top: 4%;
        font-size: 34px
    }

    .ch {
        font-family: 'Baloo 2', sans-serif;
        text-align: center;
        display: block;
        margin: 0;
        position: relative;
        top: 4%;
        color: #656565;
        font-size: 30px
    }

    .skills {

        margin: 0;
        font-weight: lighter;
        color: #dfdfdf;
        text-align: center;
        display: block;
        position: relative;
        top: 10%;
        font-size: 80px
    }

    .skillssection {
        width: 70%;
        height: 70%;
        top: 10%;
        display: block;
        position: relative;
        margin-left: 130px;
        margin-right: auto
    }

    .extraspace {
        height: 300px;
        display: block;
        margin: 0;
        position: relative
    }

    .cSkills {
        height: 700px;
        display: block;
        margin: 0;
        position: relative
    }

    .sticker {
        height: 100px;
        width: 100px;
        position: absolute
    }

    .d {
        display: block;
        margin: 0;
        position: relative;
        margin-bottom: 10%
    }

    .contact {
        height: 50vh
    }

    .freelance {
        margin: 0;
        margin-top: 100px;
        font-weight: lighter;
        font-size: 70px;
        color: #dfdfdf;
        margin-bottom: 3%
    }

    .freelanceP {
        margin-top: 80px;
        font-size: 30px
    }

    .btn {
        display: block;
        position: relative;
        margin: auto;
        margin-top: 300px;
        font-size: 2vh;
        font-weight: 700;
        border-radius: 100px;
        color: #121212;
        height: 80px;
        width: 300px;
        background-color: #bcbcbc;
        border-color: #bcbcbc;
        border-style: solid
    }

    a {
        text-decoration: none
    }

    .btn:active {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 315px;
        margin-bottom: 5%;
        font-family: 'Baloo 2', sans-serif;
        font-size: 15px;
        color: #121212;
        height: 40px;
        width: 150px;
        background-color: #121212;
        border-color: #bcbcbc;
        border-style: solid
    }

    .e {
        background-color: #0d0d0d;
        margin: 0;
        position: relative;
        height: 170px
    }

    .instagram {
        color: #aaa;
        font-size: 30px;
        display: inline-block;
        position: absolute;
        margin: 0;
        left: 1%;
        bottom: 0;
        text-decoration: none
    }

    .linkedin {
        color: #bcbcbc;
        font-size: 30px;
        display: inline-block;
        position: absolute;
        margin: 0;
        bottom: 0;
        left: 33%;
        text-decoration: none
    }

    .youtube {
        color: #bcbcbc;
        font-size: 30px;
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 27%;
        margin: 0;
        text-decoration: none
    }

    .hire {
        color: #bcbcbc;
        font-size: 30px;
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 2%;
        margin: 0;
        text-decoration: none
    }

    .redirect {
        height: 90px;
        position: relative;
        margin: 0;
        margin-left: 15%;
        margin-right: 15%
    }

    .copyright {
        display: block;
        position: relative;
        margin: 0;
        color: #bcbcbc;
        margin-left: 10%;
        margin-right: 10%;
        top: 140px
    }

    .rights {
        font-size: 20px;
        position: relative;
        display: block;
        margin: 0;
        text-decoration: none;
        bottom: 0
    }

    body {
        background-color: #121212
    }
}

@media(max-width:1000px)and (orientation:landscape) {
    .hrline {
        height: 1.5px;
    }

    .g {
        font-size: 15px
    }

    .w {

        font-size: 15px
    }

    .ch {
        font-size: 15px
    }
}