* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: young;
}
body {
    background-color: #fff;
    color: #000;
    padding: 0;
    margin: 0;
}

.dark {
    background-color: #000;
    color: #fff;
}

header {
    background-color: #fff;
    color: #000;
    width: 100%;
    position: fixed;
    z-index: 1;
}

.dark header {
    background-color: #000;
    color: #fff;
}

li {
    list-style: none;
}

a {
    color: #000;
    text-decoration: none;
}

.dark a {
    color: #fff;
}

.navbar {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.nav-branding {
    font-size: 2rem;
}

.nav-link {
    transition: 0.7s ease;
}

.nav-link:hover {
    color: dodgerblue;
}

/* .active{
    color: dodgerblue;
}
.active .nav-link{
    color: dodgerblue;
} */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #000;
}

.dark .bar {
    background-color: #fff;
}

@media(max-width: 768px) {
    header {
        position: fixed;
        z-index: 2;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        transition: 0.3s;
        text-align: center;
    }

    .dark .nav-menu {
        background-color: #000;
    }

    /* ul.nav-menu{
        background: transparent;
    }
    .dark ul.nav-menu{
        background: transparent;
    } */
    .nav-item {
        margin: 16px 0;
    }

    .nav-menu.active {
        left: 0;
    }
}
section{
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
}
.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all  ease-in-out 3s;
}
.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
#me {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.socials {
    display: block;
    padding-right: 65px;
}

.socials a {
    margin-top: 10px;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: whitesmoke;
    box-shadow: 2px 2px 4px #777;
}

.dark .socials a {
    background: #020202;
    box-shadow: inset 2px 2px 4px #777;
}

.socials a:hover {
    background: dodgerblue;
    transition: all ease-in-out 1s;
}

.dark .socials a:hover {
    background: linear-gradient(45deg, purple, crimson, #ffbaba);
}

.describe {
    width: 50%;
}

.headdie {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    /* background: url(jump.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 65%; */
}

.headdie h1 {
    font-size: 65px;
    padding-right: 40px;
    animation: colos 10s ease-in-out infinite;
    background: url(jump.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100%;
}

@keyframes colos {
    30% {
        color: orangered;
    }

    80% {
        color: green;
    }
}

.headdie h1:hover {
    -webkit-text-stroke: 0.5px #000;
    color: transparent;
}

/* .headdie h1::after{
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: red;
    position: absolute;
    z-index: -1;
} */
.dark .headdie h1:hover {
    -webkit-text-stroke: 0.5px #fff;
    color: transparent;
}

.devy {
    font-size: 16px;
    font-weight: 100;
    width: 88%;
}

.btn {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.btn a {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    color: #fff;
}

.btn a:first-child {
    background: orangered;
}

.btn a:first-child:hover {
    background-color: rgb(248, 110, 56);
    color: dodgerblue;
}

.btn a:last-child {
    background: green;
    color: dodgerblue;
}

.btn a:last-child:hover {
    background: rgb(4, 82, 4);
    color: #fff;
}

.mark {
    display: none;
}

.mark a {
    padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: whitesmoke;
    box-shadow: 2px 2px 4px #777;
}

.dark .mark a {
    background: #020202;
    box-shadow: inset 2px 2px 4px #777;
}

.mark a:hover {
    background: rgb(255, 156, 75);
    transition: all ease-in-out 2s;
}

.dark .mark a:hover {
    background: linear-gradient(45deg, purple, crimson, #ffbaba);
}

.tobi {
    border: 2px solid #000;
    width: fit-content;
    padding: 16.8px;
    border-radius: 50%;
    position: relative;
}

.dark .tobi {
    border: 2px solid #fff;
}

.tobi::before {
    position: absolute;
    content: '';
    z-index: 0;
    top: 150px;
    left: 145px;
    right: 0;
    bottom: 0;
    height: 20px;
    width: 20px;
    background: linear-gradient(45deg, green, dodgerblue, #fff);
    box-shadow: 1px 1px 6px #000;
    border-radius: 50%;
    transition: ease-in-out;
    animation: moi 10s infinite linear;
}

.dark .tobi::before {
    box-shadow: 1px 1px 6px #777;
}

@keyframes moi {
    from {
        transform: rotate(0deg) translateX(156.795px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(156.795px) rotate(-360deg);
    }
}

.tobi::after {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(45deg, purple, crimson, burlywood);
    top: 0;
    right: 0;
    box-shadow: 1px 1px 4px #000;
}

.dark .tobi::after {
    box-shadow: 1px 1px 6px #777;
}

#skier {
    height: 280px;
    width: 280px;
    background-image: url(me.png);
    background-size: contain;
    background-position: center;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-color: orangered;
    position: relative;
    /* -webkit-box-reflect: below -70px linear-gradient(transparent 35%, rgba(0, 0, 0, 0.4)); */
}

#skier::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 69, 0, 0.5);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    top: 0;
    left: -20px;
    border-radius: 50%;
}

#skier::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 128, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    bottom: 0;
    right: -20px;
    border-radius: 50%;
}

/* .dark #skier{
     -webkit-box-reflect: below -70px linear-gradient(transparent 50%, rgba(255, 255, 255, 0.4));}
*/
@media (min-width:800px) and (max-width:855px) {
    #skier {
        height: 200px;
        width: 200px;
    }

    #skier::after {
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
    }

    .tobi {
        padding: 6px;
    }

    .tobi::before {
        top: 99.5px;
        left: 98px;
        width: 15px;
        height: 15px;
    }

    @keyframes moi {
        from {
            transform: rotate(0deg) translateX(108px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(108px) rotate(-360deg);
        }
    }
}
@media (min-width:855px) and (max-width:940px) {
    #skier {
        height: 238px;
        width: 238px;
    }

    #skier::after {
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
    }

    .tobi {
        padding: 6px;
    }

    .tobi::before {
        top: 118px;
        left: 115px;
        width: 15px;
        height: 15px;
    }

    @keyframes moi {
        from {
            transform: rotate(0deg) translateX(128px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(128px) rotate(-360deg);
        }
    }
}

#stack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-bottom: 150px;
}

.akk {
    word-spacing: 20px;
}

.akk img {
    -webkit-box-reflect: below 0px linear-gradient(transparent 35%, rgba(255, 255, 255, 0.4));
}

#about {
    font-size: 25px;
    gap: 40px;
    background: url(mi.png);
    background-repeat: no-repeat;
}

.blackk {
    padding: 70px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    gap: 40px;
    background: rgba(255, 255, 255, 0.8);
}

.dark .blackk {
    background: rgba(0, 0, 0, 0.8);
}

.mee {
    width: 50%;
}

.hedd h1 {
    display: grid;
}

.hedd h1:hover {
    -webkit-text-stroke: 0.5px #000;
    color: transparent;
}

.mee p {
    text-align: justify;
    font-size: 16px;
}

.hobs button {
    background: transparent;
    padding: 8px 12px;
    border: 0.5px dotted #000;
    color: inherit;
    margin-top: 10px;
    font-size: 17px;
}

.dark .hobs button {
    border: 0.5px dotted #fff;
}

.hobs button:hover {
    background: dodgerblue;
    transition: all 0.5s ease-in;
    cursor: auto;
    color: dodgerblue;
}

.hobs button:first-child {
    background: dodgerblue;
    position: relative;
}

.hobs button:first-child::before {
    content: '';
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 0, 0.8);
    box-shadow: 1px 1px 2px yellow;
    position: absolute;
    top: -20px;
    left: -20px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    z-index: -1;
}

.hobs button:last-child {
    position: relative;
}

.hobs button:last-child::after {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: rgba(220, 20, 60, 0.8);
    position: absolute;
    bottom: -20px;
    right: -20px;
    backdrop-filter: blur(5px);
}

.pickk {
    display: grid;
    grid-template-columns: auto auto;
    position: relative;
    gap: 5px;
}

.pickk::before {
    content: 'm';
    font-size: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: green;
    top: 30px;
    left: 30px;
}

.pickk::after {
    content: 'e.';
    font-size: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: green;
    right: 30px;
    bottom: 30px;
}

.pickk div {
    width: 150px;
    height: 150px;
}

.game {
    background: url(game.jpg);
    background-size: cover;
    position: relative;
}

.game::before {
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    background: url(me2.png);
    background-color: orangered;
    background-size: contain;
    background-position: center;
    bottom: -70px;
    left: -70px;
    border-radius: 75px;
}

.game::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    background: yellow;
    background-size: contain;
    background-position: center;
    top: 0;
    left: -30px;
    border-radius: 25px;
    z-index: -1;
}

.chess {
    background: url(chess1.jpg);
    background-size: cover;
}

.ball {
    background: url(ball.jpg);
    background-size: cover;
    background-position: center;
}

.meek {
    background: url(reading.jpg);
    background-size: cover;
    background-position: center;
}

.meek::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 40px solid crimson;
    bottom: 0;
    right: 0;
    border-radius: 25px;
}

#what {
    padding: 80px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* background-color: #f8f8fa; */
}

.griidy {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    width: 80%;
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven {
    /* padding: 20px ; */
    background-color: #fff;
}

.one,
.three,
.four,
.five,
.six,
.seven {
    height: 240px;
    box-shadow: 1px 1px 1px #777;
    width: 100%;
    display: block;
}

.dark+.one,
.three,
.four,
.five,
.six,
.seven {
    box-shadow: 0.5px 0.5px 1px #777;
}

.one {
    /* grid-column-start: 4;
    grid-column-end: 2; */
    grid-row-start: 1;
    grid-row-end: 3;
    height: 323px;
}

.two {
    grid-column-start: 4;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    background-color: transparent;
    height: 74px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.two h1 {
    font-size: 68px;
}

/* .five{
    width: 280px;
} */
.six {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 3;
}

.seven {
    grid-column-start: 3;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
}

.a,
.c,
.e,
.g,
.i,
.k {
    height: 60%;
}

.a {
    background: url('five.png');
    background-size: cover;
}

.a:hover {
    background-size: auto;
}

.c {
    background: url('four.png');
    background-size: cover;
}

.c:hover {
    background-size: auto;
}

.e {
    background: url('three.png');
    background-size: cover;
}

.e:hover {
    background-size: auto;
}

.g {
    background: url('one.png');
    background-size: cover;
}

.g:hover {
    background-size: auto;
}

.k {
    background: url('seven.png');
    background-size: cover;
}

.k:hover {
    background-size: auto;
}

.i {
    background: url('six.png');
    background-size: cover;
}

.i:hover {
    background-size: auto;
}

.b,
.d,
.f,
.h,
.j,
.l {
    height: 40%;
    background: #fff;
    color: #000;
}

.b:hover,
.d:hover,
.f:hover,
.h:hover,
.j:hover,
.l:hover {
    background: #000;
    color: #fff;
}

.griidy a {
    color: #000;
}

.servo {
    padding-left: 15px;
    border-left: #000 solid 2px;
    text-align: right;
    font-size: 22px;
    position: relative;
    background: url('solution-unscreen.gif');
    background-repeat: no-repeat;
}

.dark .servo {
    border-left: #fff solid 2px;
    background: url('programmer-unscreen.gif');
}
.dark .luckky{
    background: rgba(0, 0, 0, 0.8);
}
.servo h1 {
    font-size: 33.3px;
}

.servo::before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #000, inset 1px 1px 3px #777;
    top: 0;
    left: -10px;
    animation: uppy 5s ease-in-out infinite;
}

@keyframes uppy {
    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
        box-shadow: 3px 3px 6px red, inset -1px -1px 1px red;
        background-color: yellow;
    }
}

#contact {
    padding: 80px 0;
    width: 100%;
    text-align: center;
    background-image: url('workk.PNG'), url('sitee-unscreen.gif');
    background-repeat: no-repeat;
    background-position: right bottom, left bottom;
}

.hecon {
    text-align: center;
    padding-right: 80px;
}

.hecon h1 {
    font-size: 68px;
}

.sempre {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 55%;
    gap: 20px;
}

.groupie ul {
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
}

.groupie ul li {
    padding: 10px 15px;
    background: rgba(245, 245, 245, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0.5px 0.5px 1.5px #777;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* .groupie ul:before{
    content: 'hey';
    position: absolute;
    height: 20px;
    width: 20px;
    top: -10px;
    left: -10px;
    border-radius: 15px;
    background: linear-gradient(45deg, red,crimson,purple);
    z-index: --1;
}
/* .groupie ul li a:first-child::after {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    bottom: -10px;
    right: -10px;
    border-radius: 15px;
    background: linear-gradient(45deg, red, crimson, purple);
    z-index: -1;
} */
.dark .groupie ul li {
    background: rgba(15, 15, 15, 0.4);
}

.groupie a img {
    width: 35px;
    height: 35px;
}
.groupie ul li:first-child{
    background: purple;
}
.groupie ul li:first-child::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: crimson;
    top: -20px;
    left: -20px;
}

.groupie ul li:hover{
    background: purple;
}
#contact form {
    background: rgba(245, 245, 245, 0.8);
    box-shadow: 0.5px 0.5px 1.5px #777;
    width: fit-content;
    padding: 20px 30px;
    border-radius: 4px;
    margin: auto;
    position: relative;
}

.dark #contact form {
    background: rgba(15, 15, 15, 0.8);
}

#contact form::before {
    content: '';
    width: 80px;
    height: 80px;
    background: url('gi.gif');
    background-color: #fff;
    background-size: cover;
    border-bottom: 0.5px #777 solid;
    border-radius: 40px;
    position: absolute;
    top: -42px;
    right: 20px;
}

.dark #contact form::before {
    background-color: #000;
}

#contact form::after {
    content: '';
    width: 80px;
    height: 80px;
    background: url('coder-unscreen.gif');
    background-color: #fff;
    background-size: cover;
    border-top: 0.5px solid #777;
    border-radius: 40px;
    position: absolute;
    bottom: -30px;
    left: 20px;
}

.dark #contact form::after {
    background-color: #000;
}

form #imp {
    padding: 10px 20px;
    font-size: 16px;
    width: 100%;
    background: #fff;
    margin-top: 10px;
    border: solid 0.5px #777;
    border-radius: 3px;
}

.dark form #imp {
    background: #000;
    color: #fff;
}

form textarea {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    padding: 10px 20px;
    border: solid 0.5px #777;
    border-radius: 3px;
    background: #fff;
}

.dark form textarea {
    background: #000;
    color: #fff;
}

form #clicko {
    padding: 10px 15px;
    background: orangered;
    color: #fff;
    border-radius: 3px;
    border: none;
}

footer {
    padding: 30px 0;
    text-align: center;
    color: #777;
    font-size: 15px;
    font-weight: 100;
}

@media(max-width: 800px) {
    header {
        z-index: 2;
    }

    #me {
        display: block;
        padding-top: 100px;
    }

    .describe,
    #skier {
        margin: auto;
    }

    .describe {
        width: 90%;
    }

    .headdie {
        font-size: 18px;
        /* background-position: 80%; */
    }

    .headdie h1 {
        font-size: 40px;
    }

    .mark {
        margin-top: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 5px;
        /* grid-template-columns: auto auto auto auto auto; */
    }

    .tobi {
        margin: auto;
        margin-top: 60px;
        padding: 10px;
    }

    .tobi::before {
        top: 125px;
        left: 120px;
    }

    @keyframes moi {
        from {
            transform: rotate(0deg) translateX(134px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(134px) rotate(-360deg);
        }
    }

    #skier {
        height: 248px;
        width: 248px;
    }

    #skier::before {
        height: 70px;
        width: 70px;
        left: 0;
    }

    #skier::after {
        height: 70px;
        width: 70px;
        right: 0;
    }

    .socials {
        display: none;
    }

    #stack {
        display: block;
        text-align: center;
        padding: 0;
        transform: translateY(-40px);
        /* padding-bottom: px; */
    }

    .akk {
        word-spacing: 5px;
    }

    .blackk {
        display: block;
        text-align: center;
    }

    .hedd h1 {
        display: inline-block;
    }

    .mee {
        width: 90%;
        margin: auto;
    }

    .pickk {
        margin: 20px auto;
        text-align: center;
        height: 350px;
        width: 230px;
    }

    .pickk div {
        height: 120px;
        width: 120px;
    }

    .pickk::before {
        width: 80px;
        height: 80px;
    }

    .pickk::after {
        width: 80px;
        height: 80px;
        right: 10px;
        bottom: 10px;
    }

    .game::after {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        left: -15px;
    }

    .meek::after {
        bottom: -15px;
        right: -15px;
    }

    #what {
        display: block;
        width: 90%;
    }

    .griidy {
        display: block;
        width: 100%;
        text-align: center;
    }

    .one,
    .two,
    .three,
    .four,
    .five,
    .six,
    .seven {
        margin: auto;
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .one,
    .three,
    .four,
    .five,
    .six,
    .seven {
        height: 200px;
    }

    .four,
    .five,
    .six,
    .seven {
        margin-top: 10px;
    }

    .a,
    .c,
    .e,
    .g,
    .i,
    .k {
        height: 100%;
        width: 60%;
    }

    .b,
    .d,
    .f,
    .h,
    .j,
    .l {
        height: 100%;
        width: 40%;
    }

    .two {
        position: relative;
        z-index: -1;
        /* width: 90%; */
        margin: auto;
        width: fit-content;
        display: block;
    }

    .servo {
        width: 88%;
        margin: auto;
        margin-top: 20px;
    }

    #contact {
        text-align: center;
    }

    .sempre {
        display: block;
        width: 100%;
    }

    .hecon h1 {
        font-size: 40px;
    }

    .groupie ul {
        display: grid;
        grid-template-columns: auto auto auto;
        width: 70%;
        margin: auto;
        margin-bottom: 50px;
    }

    #contact form {
        width: 80%;
    }

}

@media (max-width:1200px) and (min-width: 800px) {
    #what {
        display: block;
        padding: 80px 0;
        width: 90%;
    }

    .griidy {
        margin: auto;
        padding: 0;
        width: 100%;
    }

    .one,
    .three,
    .four,
    .five,
    .six,
    .seven {
        width: 100%;
    }

    .two {
        width: fit-content;
    }

    .two h1 {
        font-size: 40px;
    }

    .servo {
        width: 100%;
        margin: auto;
        padding-top: 20px;
    }

    .sempre {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 70%;
    }

    .hecon h1 {
        font-size: 40px;
    }

    .groupie ul {
        width: 100%;
    }

    .groupie ul {
        display: grid;
        grid-template-columns: auto auto auto;
    }

    form {
        width: 100%;
    }
}

@font-face {
    font-family: young;
    src: url(YoungSerif-Regular.ttf);
}