html {
    font-size: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    color: var(--color-dark-body);
    background-color: var(--color-bg-light-body);
    font-family: var(--font-mos);
    font-weight: 600;
}

main {
    position: relative;
    z-index: 1;
}

p {
    line-height: 1.5;
    margin-bottom: 36px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

a,
a:visited,
a:hover {
    text-decoration: none;
}

ul {
    list-style: none;
}

.container-fluid {
    padding: 0;
    margin: 0;
}

.container--pall {
    padding-right: 25px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 40em) {
    .container--pall {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (min-width: 64em) {
    .container--pall {
        padding-left: 120px;
        padding-right: 120px;
    }
}

.container--py {
    padding-top: 100px;
    padding-bottom: 100px;
}

.container--px {
    padding-right: 24px;
    padding-left: 24px;
}

.container--pt {
    padding-top: 70px;
}

.container--pr {
    padding-right: 24px;
}

.container--pb {
    padding-bottom: 70px;
}

.container--pl {
    padding-left: 24px;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-jc-c {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-jc-sa {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-jc-sb {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-ai-c {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-fd-c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    border-radius: 20px;
}

::-moz-selection {
    background-color: var(--color-selection);
    color: var(--color-bg-selection);
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-bg-selection);
}

::-webkit-selection {
    background-color: var(--color-selection);
    color: var(--color-bg-selection);
}

:root,
.day {
    /* font */
    --font-jen: Jenthill, sans-serif;
    --font-mos: Mosk, sans-serif;
    --scrollbar: #ffdaa6;
    --color-dark-body: #404040;
    --color-bg-light-body: #f9f9f9;
    --color-selection: #343f52;
    --color-bg-selection: #FFF6DB;
    --color-logo: #343f52;
    --color-title-nav: #343f52;
    --hovernav: #F69E7B;
    --color-bg-mob-navbar: #fff8ef;
    --color-bg-mob-nav: #f9f9f9;
    --color-border-mob-nav: #29272a;
    --color-bg-light-hero: #ffffff;
    --light: transparent;
    --color-g-light-hero: transparent;
    --color-light-lmp-hero: transparent;
    --color-bg-hero: #FFF6DB;
    --color-title-hero: #343f52;
    --color-bgtop-mob-hero: #fff8ef;
    --color-bgbotom-mob-hero: rgba(255, 255, 255, 1);
    --color-bg-info: #f9f9f9;
    --color-title-info: #343f52;
    --color-dark-info: #404040;
    --color-bg-light-info: #f9f9f9;
    --cls3-4: #F69E7B;
    --cls-2: #383E56;
    --cls-5-8: #c2c68e;
    --markorang-6-cls-7: #F69E7B;
    --cls-0: #fff;
    --cls-9: #c97e67;
    --cls-1: #33353b;
    --markorang-markorang-5: #FFE3BB;
    --color-bg-serv: #FFF6DB;
    --color-title-serv: #343f52;
    --color-one: #FF7751;
    --color-two: #3DD0C4;
    --color-three: #FDD08E;
    --color-four: #c2c68e;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.164);
    --color-dark-serv: #404040;
    --color-light-serv: #f6f4f6dc;
    --color-p-serv: #303030;
    --color-bg-box: #ffffff;
    --color-bg-blog: #ffffff;
    --color-title-blog: #343f52;
    --color-dark-blog: #404040;
    --color-bg-light-blog: #fff;
    --color-btn-viewsite: #3DD0C4;
    --color-bg-footer: #ffdaa6;
    --color-bg-light-footer: #f9f9f9;
    --color-dark-footer: #404040;
    --hoverfooter: #F69E7B;
    --headtphone: #3DD0C4;
    --color-bg-about: #f7f7f7;
    --bg-img-about: #F69E7B;
    --color-bg-rec-info: #ffdaa6;
    --color-Vector-info: #B8DFD8;
    --color-light-info: #D0AF84;
    --color-border-info: transparent;
    --color-bg-skills: #f7f7f7;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.164);
    --color-one: #FF7751;
    --color-two: #3DD0C4;
    --color-three: #FDD08E;
    --color-dark-mywork: #404040;
    --color-bg-light-mywork: #f9f9f9;
    --color-bg-blogs: #ffeac0;
    --bg-img-blogs: #F69E7B;
    --color-bg-contact: #f7f7f7;
    --color-contact: #FFCD94;
    --color-light-contact: #f9f9f9;
    --color-dark-contact: #404040;
    --contact-b: #D2D2D2;
    --contact-t: #404040;
    --contact-c: #D2D2D2;
    --contact-c2: #E4E4E4;
    --contact-s: #F69E7B;
    --contact-s2: #da8564;
    --contact-o: #fdc981;
    --contact-o2: #fcd6ac;
    --contact-y: #c2c68e;
    --contact-y2: #fdb959;
}

.night {
    /* font */
    --font-jen: Jenthill, sans-serif;
    --font-mos: Mosk, sans-serif;
    --scrollbar: #4D4C7D;
    --color-dark-body: #f9f9f9;
    --color-bg-light-body: #29272a;
    --color-selection: #f9f9f9;
    --color-bg-selection: #363062;
    --color-logo: #827397;
    --color-title-nav: #f9f9f9;
    --hovernav: #774069;
    --color-bg-mob-navbar: #29272a;
    --color-bg-mob-nav: #29272a;
    --color-border-mob-nav: #f9f9f9;
    --color-bg-light-hero: #29272a;
    --light: #f5e9b5bb;
    --color-g-light-hero: #FBD178;
    --color-light-lmp-hero: #FBD178;
    --color-bg-hero: #363062;
    --color-title-hero: #f9f9f9;
    --color-bgtop-mob-hero: #29272a;
    --color-bgbotom-mob-hero: rgba(41, 39, 42, 1);
    --color-glow-lmp-hero: text-flicker-in-glow 1000ms linear both;
    --color-bg-info: #29272a;
    --color-title-info: #f9f9f9;
    --color-dark-info: #f9f9f9;
    --color-bg-light-info: #29272a;
    --cls3-4: #774069;
    --cls-2: #535A96;
    --cls-5-8: #4c3a69;
    --markorang-6-cls-7: #F69E7B;
    --cls-0: #fff;
    --cls-9: #c97e67;
    --cls-1: #33353b;
    --markorang-markorang-5: #FFE3BB;
    --color-bg-serv: #363062;
    --color-title-serv: #f9f9f9;
    --color-one: #774069;
    --color-two: #535A96;
    --color-three: #4c3a69;
    --color-four: #1E5F74;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.493);
    --color-dark-serv: #f9f9f9;
    --color-light-serv: #29272a;
    --color-p-serv: #cfcccc;
    --color-bg-box: #363062;
    --color-bg-blog: #29272a;
    --color-title-blog: #f9f9f9;
    --color-dark-blog: #f9f9f9;
    --color-bg-light-blog: #29272a;
    --color-btn-viewsite: #774069;
    --color-bg-footer: #4D4C7D;
    --color-bg-light-footer: #29272a;
    --color-dark-footer: #f9f9f9;
    --color-cray: #cfcccc;
    --hoverfooter: #774069;
    --headtphone: #1E5F74;
    --color-bg-about: #252525;
    --bg-img-about: #774069;
    --color-bg-rec-info: #535A96;
    --color-Vector-info: #FFD28F;
    --color-light-info: #413C69;
    --color-border-info: transparent;
    --color-bg-skills: #252525;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.40);
    --color-one: #774069;
    --color-two: #535A96;
    --color-three: #4c3a69;
    --color-dark-mywork: #f9f9f9;
    --color-bg-light-mywork: #29272a;
    --color-bg-blogs: #252525;
    --bg-img-blogs: #4D4C7D;
    --color-bg-contact: #252525;
    --color-contact: #774069;
    --color-light-contact: #29272a;
    --color-dark-contact: #f9f9f9;
    --contact-b: #404040;
    --contact-t: #f9f9f9;
    --contact-c: #333;
    --contact-c2: #404040;
    --contact-s: #5f4c81;
    --contact-s2: #473464;
    --contact-o: #535A96;
    --contact-o2: #5d65a8ec;
    --contact-y: #774069;
    --contact-y2: #8d4e7d;
}

.ani-txt-hello {
    -webkit-animation: ani-txt-hello 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    animation: ani-txt-hello 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@-webkit-keyframes ani-txt-hello {
    0%,
    100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes ani-txt-hello {
    0%,
    100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

.ani-serv-box {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.ani-mywork-card {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

#navigation {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    padding: 20px 0;
}

@media (min-width: 64em) {
    #navigation {
        background-color: transparent;
    }
}

#navigation .nav__logo-nav .logos {
    width: 52%;
    margin-top: 10px;
}

#navigation .nav__logo-nav .logos path {
    stroke: var(--color-logo);
}

#navigation .nav__navbar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--color-bg-mob-nav);
    border-top: 3px solid var(--color-border-mob-nav);
}

@media (min-width: 64em) {
    #navigation .nav__navbar {
        position: relative;
        border: none;
        padding-right: 28px;
        background-color: transparent;
    }
}

#navigation .nav__navbar .list-nav {
    padding: 0;
}

#navigation .nav__navbar .list-nav .item-nav {
    margin: 0 12px;
}

#navigation .nav__navbar .list-nav .item-nav .link-nav {
    color: var(--color-title-nav);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: lowercase;
}

@media (min-width: 64em) {
    #navigation .nav__navbar .list-nav .item-nav .link-nav {
        font-size: 18px;
    }
}

#navigation .nav__navbar .list-nav .item-nav .link-nav .icon-nav {
    display: block;
    text-align: center;
}

@media (min-width: 64em) {
    #navigation .nav__navbar .list-nav .item-nav .link-nav .icon-nav {
        display: none;
    }
}

#navigation .nav__navbar .list-nav .item-nav .link-nav:hover {
    color: var(--hovernav);
}

#navigation .nav__btn-dark-light .chk {
    display: none;
}

#navigation .nav__btn-dark-light .btn-dark-light {
    padding: 0;
}

#navigation .nav__btn-dark-light .btn-dark-light input {
    position: absolute;
    left: -99em;
}

#navigation .nav__btn-dark-light .toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 52px;
    height: 29px;
    background-color: #83d8ff;
    border: 5px solid;
    border-radius: 84px;
    -webkit-transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border: 3px solid #2a9df4;
    -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.015s, border-bottom-color 0.15s linear 0.03s, border-left-color 0.15s linear 0.045s;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.015s, border-bottom-color 0.15s linear 0.03s, border-left-color 0.15s linear 0.045s;
}

#navigation .nav__btn-dark-light .toggle:before {
    position: absolute;
    left: -50px;
    top: 15px;
    font-size: 18px;
}

#navigation .nav__btn-dark-light .toggle:after {
    position: absolute;
    right: -48px;
    top: 15px;
    font-size: 18px;
}

#navigation .nav__btn-dark-light .handler {
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 2px;
    left: 4px;
    width: 19px;
    height: 19px;
    background-color: #ffcf96;
    border-radius: 50px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 400ms cubic-bezier(0.68, -1.55, 0.265, 2.55);
    transition: all 400ms cubic-bezier(0.68, -1.55, 0.265, 2.55);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#navigation .nav__btn-dark-light .handler .crater {
    position: absolute;
    background-color: #e8cda5;
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    border-radius: 100%;
}

#navigation .nav__btn-dark-light .handler .crater1 {
    top: 8px;
    left: 4px;
    width: 3px;
    height: 3px;
}

#navigation .nav__btn-dark-light .handler .crater2 {
    top: 3px;
    left: 10px;
    width: 4px;
    height: 4px;
}

#navigation .nav__btn-dark-light .handler .crater3 {
    top: 11px;
    left: 8px;
    width: 6px;
    height: 6px;
}

#navigation .nav__btn-dark-light .star {
    position: absolute;
    background-color: #ffffff;
    -webkit-transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border-radius: 50%;
}

#navigation .nav__btn-dark-light .star1 {
    top: 4px;
    left: 13px;
    z-index: 0;
    width: 13px;
    height: 2px;
}

#navigation .nav__btn-dark-light .star2 {
    top: 9px;
    left: 14px;
    z-index: 1;
    width: 18px;
    height: 2px;
}

#navigation .nav__btn-dark-light .star3 {
    top: 14px;
    left: 21px;
    z-index: 0;
    width: 14px;
    height: 2px;
}

#navigation .nav__btn-dark-light .star4,
#navigation .nav__btn-dark-light .star5,
#navigation .nav__btn-dark-light .star6 {
    opacity: 0;
    -webkit-transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#navigation .nav__btn-dark-light .star4 {
    top: 5px;
    left: 5px;
    z-index: 0;
    width: 2px;
    height: 2px;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
}

#navigation .nav__btn-dark-light .star5 {
    top: 13px;
    left: 4px;
    z-index: 0;
    width: 2px;
    height: 2px;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
}

#navigation .nav__btn-dark-light .star6 {
    top: 18px;
    left: 10px;
    z-index: 0;
    width: 2px;
    height: 2px;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
}

#navigation .nav__btn-dark-light input:checked+.toggle {
    background-color: #749dd6;
    border-top-color: #605885;
    border-right-color: #605885;
    border-bottom-color: #605885;
    border-left-color: #605885;
    -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.015s, border-bottom-color 0.15s linear 0.03s, border-left-color 0.15s linear 0.045s;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.015s, border-bottom-color 0.15s linear 0.03s, border-left-color 0.15s linear 0.045s;
}

#navigation .nav__btn-dark-light input:checked+.toggle .handler {
    background-color: #ffe5b5;
    -webkit-transform: translate3d(20px, 0, 0) rotate(0);
    transform: translate3d(20px, 0, 0) rotate(0);
}

#navigation .nav__btn-dark-light input:checked+.toggle .handler .crater {
    opacity: 1;
}

#navigation .nav__btn-dark-light input:checked+.toggle .star1 {
    width: 2px;
    height: 2px;
}

#navigation .nav__btn-dark-light input:checked+.toggle .star2 {
    width: 3px;
    height: 3px;
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
}

#navigation .nav__btn-dark-light input:checked+.toggle .star3 {
    width: 2px;
    height: 2px;
    -webkit-transform: translate3d(-7px, 0, 0);
    transform: translate3d(-7px, 0, 0);
}

#navigation .nav__btn-dark-light input:checked+.toggle .star4,
#navigation .nav__btn-dark-light input:checked+.toggle .star5,
#navigation .nav__btn-dark-light input:checked+.toggle .star6 {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#navigation .nav__btn-dark-light input:checked+.toggle .star4 {
    -webkit-transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#navigation .nav__btn-dark-light input:checked+.toggle .star5 {
    -webkit-transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#navigation .nav__btn-dark-light input:checked+.toggle .star6 {
    -webkit-transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#Footer {
    min-height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: var(--color-bg-footer);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (min-width: 64em) {
    #Footer {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

@media (min-width: 87.5em) {
    #Footer {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

#Footer .footer__content {
    background-color: var(--color-bg-light-footer);
    width: 365px;
    height: 440px;
    margin: 0 4%;
    position: relative;
    top: -25px;
}

@media (min-width: 40em) {
    #Footer .footer__content {
        width: 440px;
        height: 500px;
        padding: 2% 3%;
    }
}

@media (min-width: 64em) {
    #Footer .footer__content {
        width: 93vw;
        height: 550px;
        margin: 0;
    }
}

#Footer .footer__content .footer__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding-top: 25px;
    }
}

#Footer .footer__content .footer__top .footer__text {
    padding-left: 20px;
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__text {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        padding: 25px 0 0 60px;
    }
}

#Footer .footer__content .footer__top .footer__text .text-top h1 {
    margin: 50px 0 13px 0;
    font-size: 140%;
    font-weight: 600;
    color: var(--color-dark-footer);
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__text .text-top h1 {
        font-size: 165%;
    }
}

#Footer .footer__content .footer__top .footer__text .text-top p {
    margin: 7px 15px 20px 0;
    font-size: 90%;
    font-weight: 400;
    color: var(--color-dark-footer);
}

#Footer .footer__content .footer__top .footer__text .text-top p a {
    font-family: var(--font-mos);
    font-weight: 600;
    color: var(--color-dark-footer);
    border-bottom: 2px solid var(--color-bg-footer);
    line-height: 1.8;
}

#Footer .footer__content .footer__top .footer__text .text-top p a:hover {
    background-color: var(--color-bg-footer);
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__text .text-top p {
        margin: 15px 15px 20px 0;
        max-width: 85%;
        font-size: 120%;
    }
}

#Footer .footer__content .footer__top .footer__text .text-top p:last-child {
    line-height: 1;
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__text .text-top p:last-child {
        margin-top: 30px;
    }
}

#Footer .footer__content .footer__top .footer__text .sochial-media ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: flex-start;
    margin: 20px 0 0 0px;
    padding: 0;
}

#Footer .footer__content .footer__top .footer__text .sochial-media ul li {
    margin-right: 30px;
}

#Footer .footer__content .footer__top .footer__text .sochial-media ul li a {
    font-size: 120%;
    color: var(--color-dark-footer);
    text-shadow: 0 0.7rem 0.5rem rgba(0, 0, 0, 0.3);
}

#Footer .footer__content .footer__top .footer__text .sochial-media ul li a:hover {
    font-size: 180%;
    color: var(--hoverfooter);
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__img {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        padding: 70px 0 25px 50px;
    }
}

#Footer .footer__content .footer__top .footer__img svg {
    max-width: 65%;
    position: relative;
    left: 50%;
    top: 45px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media (min-width: 40em) {
    #Footer .footer__content .footer__top .footer__img svg {
        max-width: 65%;
    }
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__top .footer__img svg {
        max-width: 80%;
    }
}

#Footer .footer__content .footer__top .footer__img svg .t-shirt {
    fill: var(--color-bg-footer);
}

#Footer .footer__content .footer__top .footer__img svg .headtphone {
    fill: var(--headtphone);
}

#Footer .footer__content .footer__top .footer__img .st1 {
    fill: var(--color-bg-footer);
}

#Footer .footer__content .footer__top .footer__img .st0 {
    fill: var(--color-bg-light-blog);
}

#Footer .footer__content .footer__bottom {
    position: absolute;
    bottom: -13%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 15px;
}

@media (min-width: 40em) {
    #Footer .footer__content .footer__bottom {
        bottom: -12%;
    }
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__bottom {
        bottom: -14%;
        margin-left: 70px;
    }
}

#Footer .footer__content .footer__bottom h1 {
    font-size: 260%;
    border-bottom: 8px solid var(--color-bg-footer);
}

@media (min-width: 64em) {
    #Footer .footer__content .footer__bottom h1 {
        font-size: 380%;
    }
}

#Footer .footer__content .btn-up {
    text-align: center;
    font-size: 25px;
    margin-bottom: 10px;
}

#Footer .footer__content .btn-up a {
    color: var(--color-bg-footer);
    padding: 0 100px;
}

#bg-about {
    background-color: var(--color-bg-about);
}

#sec-hero-about {
    min-height: 100vh;
    overflow: hidden;
}

@media (min-width: 40em) {
    #sec-hero-about {
        padding: 10% 0;
    }
}

@media (min-width: 64em) {
    #sec-hero-about {
        padding: 100px 0 0;
    }
}

#sec-hero-about .about__header {
    position: relative;
    top: -20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (min-width: 64em) {
    #sec-hero-about .about__header {
        top: 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
}

#sec-hero-about .about__header .about__header--title {
    margin-bottom: 20px;
}

#sec-hero-about .about__header .about__header--title h2 {
    font-size: 230%;
    font-weight: 800;
}

@media (min-width: 40em) {
    #sec-hero-about .about__header .about__header--title h2 {
        font-size: 270%;
    }
}

@media (min-width: 64em) {
    #sec-hero-about .about__header .about__header--title h2 {
        font-size: 300%;
        position: relative;
        top: -25px;
    }
}

#sec-hero-about .about__header .about__header--img svg {
    width: 80vw;
}

@media (min-width: 40em) {
    #sec-hero-about .about__header .about__header--img svg {
        width: 60vw;
    }
}

@media (min-width: 64em) {
    #sec-hero-about .about__header .about__header--img svg {
        width: 50vw;
    }
}

#sec-hero-about .about__header .about__header--img svg .fill-accent {
    fill: var(--bg-img-about);
}

#sec-info-about {
    min-height: 100vh;
    padding-bottom: 80px;
}

@media (min-width: 64em) {
    #sec-info-about {
        padding-top: 150px;
        padding-bottom: 80px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

@media (min-width: 64em) {
    #sec-info-about .about__content--info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 40em) {
    #sec-info-about .about__content--info .about__img--info {
        padding-top: 80px;
    }
}

@media (min-width: 64em) {
    #sec-info-about .about__content--info .about__img--info {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
        padding-top: 0;
    }
}

#sec-info-about .about__content--info .about__img--info svg {
    width: 70%;
    margin-bottom: 20px;
}

@media (min-width: 40em) {
    #sec-info-about .about__content--info .about__img--info svg {
        width: 50%;
    }
}

@media (min-width: 64em) {
    #sec-info-about .about__content--info .about__img--info svg {
        width: 80%;
    }
}

#sec-info-about .about__content--info .about__img--info svg #rec-bg-info {
    fill: var(--color-bg-rec-info);
}

#sec-info-about .about__content--info .about__img--info svg #face-info {
    fill: var(--color-Vector-info);
}

#sec-info-about .about__content--info .about__img--info svg #circal-line-info {
    fill: var(--color-light-info);
}

#sec-info-about .about__content--info .about__img--info svg #border-info {
    fill: var(--color-border-info);
}

#sec-info-about .about__content--info .about__text--info {
    line-height: 1.9;
}

@media (min-width: 64em) {
    #sec-info-about .about__content--info .about__text--info {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
}

#sec-info-about .about__content--info .about__text--info h5 {
    margin: 0;
    font-weight: 700;
    font-size: 200%;
}

@media (min-width: 40em) {
    #sec-info-about .about__content--info .about__text--info h5 {
        font-size: 250%;
    }
}

#sec-info-about .about__content--info .about__text--info p {
    font-size: 18px;
    width: 90%;
}

@media (min-width: 40em) {
    #sec-info-about .about__content--info .about__text--info p {
        width: 68%;
        font-size: 20px;
        line-height: 1.8;
    }
}

@media (min-width: 64em) {
    #sec-info-about .about__content--info .about__text--info p {
        line-height: 2;
        width: 90%;
    }
}

#sec-info-about .about__content--info .about__text--info p:hover span {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, var(--color-bg-about)), color-stop(100%, var(--color-bg-rec-info)), color-stop(50%, transparent), to(transparent));
    background-image: linear-gradient(transparent 50%, var(--color-bg-about) 50%, var(--color-bg-rec-info) 100%, transparent 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    -webkit-animation: animatedBackground 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s forwards;
    animation: animatedBackground 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s forwards;
}

@-webkit-keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}

@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}

#sec-skills-about {
    min-height: 100vh;
}

#sec-skills-about .skills__title h1 {
    font-size: 190%;
    padding-bottom: 60px;
    font-weight: 800;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

@media (min-width: 40em) {
    #sec-skills-about .skills__title h1 {
        font-size: 240%;
    }
}

@media (min-width: 64em) {
    #sec-skills-about .skills__title h1 {
        font-size: 300%;
    }
}

#sec-skills-about .skills__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

@media (min-width: 40em) {
    #sec-skills-about .skills__card .skills__card--wrapper {
        -webkit-box-flex: 33%;
        -ms-flex: 33%;
        flex: 33%;
    }
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item {
    background-color: var(--color-bg-skills);
    width: 150px;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

@media (min-width: 40em) {
    #sec-skills-about .skills__card .skills__card--wrapper .skills__card--item {
        width: 200px;
        margin-bottom: 100px;
    }
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2 {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

@media (min-width: 40em) {
    #sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2 {
        font-size: 22px;
    }
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2::before {
    content: "";
    width: 60px;
    height: 50px;
    position: absolute;
    left: 26px;
    z-index: -1;
}

@media (min-width: 40em) {
    #sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2::before {
        width: 70px;
    }
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2 i {
    font-size: 26px;
    padding: 0 15px;
}

@media (min-width: 40em) {
    #sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card h2 i {
        font-size: 30px;
    }
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-html h2::before {
    background-color: var(--color-one);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-css h2::before {
    background-color: var(--color-two);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-js h2::before {
    background-color: var(--color-three);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-react h2::before {
    background-color: var(--color-two);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-sass h2::before {
    background-color: var(--color-three);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-botstrap h2::before {
    background-color: var(--color-one);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-photoshop h2::before {
    background-color: var(--color-three);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-figma h2::before {
    background-color: var(--color-one);
}

#sec-skills-about .skills__card .skills__card--wrapper .skills__card--item .card-vs-code h2::before {
    background-color: var(--color-two);
}

#bg-blog {
    background-color: var(--color-bg-blogs);
}

#sec-hero-blog {
    min-height: 100vh;
    padding: 25% 0 10%;
    overflow: hidden;
}

@media (min-width: 40em) {
    #sec-hero-blog {
        padding: 10% 0 10%;
    }
}

@media (min-width: 64em) {
    #sec-hero-blog {
        padding-top: 100px;
    }
}

#sec-hero-blog .blog__header {
    position: relative;
}

#sec-hero-blog .blog__header .blog__header--title {
    position: absolute;
    top: 10%;
    left: 5%;
    z-index: 1;
}

@media (min-width: 64em) {
    #sec-hero-blog .blog__header .blog__header--title {
        top: 5%;
    }
}

#sec-hero-blog .blog__header .blog__header--title h2 {
    font-size: 230%;
    font-weight: 800;
}

@media (min-width: 40em) {
    #sec-hero-blog .blog__header .blog__header--title h2 {
        font-size: 270%;
    }
}

@media (min-width: 64em) {
    #sec-hero-blog .blog__header .blog__header--title h2 {
        font-size: 300%;
    }
}

#sec-hero-blog .blog__header .blog__header--img {
    padding-top: 20%;
}

@media (min-width: 40em) {
    #sec-hero-blog .blog__header .blog__header--img {
        padding-top: 27%;
    }
}

@media (min-width: 64em) {
    #sec-hero-blog .blog__header .blog__header--img {
        padding-top: 15%;
    }
}

#sec-hero-blog .blog__header .blog__header--img svg {
    width: 300%;
}

#sec-hero-blog .blog__header .blog__header--img svg .fill-accent {
    fill: var(--bg-img-blogs);
}

#sec-post-instagram {
    padding-bottom: 80px;
}

#sec-post-instagram .insta__title h1 {
    font-size: 190%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

@media (min-width: 40em) {
    #sec-post-instagram .insta__title h1 {
        font-size: 240%;
    }
}

@media (min-width: 64em) {
    #sec-post-instagram .insta__title h1 {
        font-size: 300%;
    }
}

#sec-post-instagram .insta__posts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: relative;
    left: -15px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 40em) {
    #sec-post-instagram .insta__posts .insta__posts--warpper {
        -webkit-box-flex: 33%;
        -ms-flex: 33%;
        flex: 33%;
    }
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 40px 20px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post:hover .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(34, 34, 34, 0.377);
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .open-post {
    display: none;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post:hover .open-post {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    z-index: 99999;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post img {
    max-width: 300px;
    border-radius: 20px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .clone-icon {
    position: absolute;
    top: 13px;
    right: 13px;
    color: #fff;
    font-size: 16px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .list-icon {
    position: absolute;
    top: 0%;
    right: -38px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .list-icon .item-icon {
    background-color: #f9f9f9;
    width: 28px;
    height: 28px;
    border-radius: 11px;
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .list-icon .item-icon:last-child {
    margin-top: 130px;
}

#sec-post-instagram .insta__posts .insta__posts--warpper .post .list-icon .item-icon i {
    color: #222;
    font-size: 16px;
}

#bg-contact {
    background-color: var(--color-bg-contact);
    min-height: 100vh;
}

#contact-page .content__contact {
    padding: 35% 0;
}

@media (min-width: 40em) {
    #contact-page .content__contact {
        padding: 20% 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

@media (min-width: 64em) {
    #contact-page .content__contact {
        padding: 10% 0;
    }
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
}

@media (min-width: 64em) {
    #contact-page .content__contact .contact__title {
        padding-top: 80px;
    }
}

#contact-page .content__contact .contact__title h1 {
    color: var(--color-contact);
    font-size: 230%;
    text-transform: uppercase;
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title h1 {
        font-size: 270%;
    }
}

#contact-page .content__contact .contact__title p {
    color: var(--color-dark);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title p {
        font-size: 20px;
    }
}

#contact-page .content__contact .contact__title .btn-mail {
    background-color: var(--color-contact);
    padding: 7px 30px;
    border-radius: 8px;
    color: var(--color-dark);
    font-size: 16px;
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title .btn-mail {
        font-size: 18px;
    }
}

#contact-page .content__contact .contact__title .btn-mail:hover {
    color: var(--color-light-contact);
}

#contact-page .content__contact .contact__title h4 {
    padding-top: 25px;
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title h4 {
        font-size: 19px;
    }
}

#contact-page .content__contact .contact__title .sochial-media ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
}

#contact-page .content__contact .contact__title .sochial-media ul li {
    margin-right: 30px;
    font-size: 18px;
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__title .sochial-media ul li {
        font-size: 22px;
    }
}

#contact-page .content__contact .contact__title .sochial-media ul li a i {
    color: var(--color-dark-contact);
}

#contact-page .content__contact .contact__title .sochial-media ul li a i:hover {
    color: var(--color-contact);
}

@media (min-width: 40em) {
    #contact-page .content__contact .contact__svg {
        max-width: 530px;
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
}

@media (min-width: 64em) {
    #contact-page .content__contact .contact__svg {
        max-width: 550px;
    }
}

#contact-page .content__contact .contact__svg svg #contact-b {
    fill: var(--contact-b);
}

#contact-page .content__contact .contact__svg svg #contact-t {
    fill: var(--contact-t);
    font-family: var(--font-mos);
}

#contact-page .content__contact .contact__svg svg #contact-c {
    fill: var(--contact-c);
}

#contact-page .content__contact .contact__svg svg #contact-c2 {
    fill: var(--contact-c2);
}

#contact-page .content__contact .contact__svg svg #contact-s {
    fill: var(--contact-s);
}

#contact-page .content__contact .contact__svg svg #contact-s2 {
    fill: var(--contact-s2);
}

#contact-page .content__contact .contact__svg svg #contact-o {
    fill: var(--contact-o);
}

#contact-page .content__contact .contact__svg svg #contact-o2 {
    fill: var(--contact-o2);
}

#contact-page .content__contact .contact__svg svg #contact-y {
    fill: var(--contact-y);
}

#contact-page .content__contact .contact__svg svg #contact-y2 {
    fill: var(--contact-y2);
}

#Hero {
    background-color: var(--color-bg-light-hero);
    overflow: hidden;
}

#Hero .hero__content {
    padding-top: 100px;
}

@media (min-width: 64em) {
    #Hero .hero__content {
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

#Hero .hero__content .left-svg,
#Hero .hero__content .right-content {
    min-height: 100vh;
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__left-svg {
        -webkit-box-flex: 33%;
        -ms-flex: 33%;
        flex: 33%;
    }
}

#Hero .hero__content .hero__left-svg svg {
    width: 500px;
    padding-bottom: 20px;
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__left-svg svg {
        width: 48%;
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 4;
    }
}

#Hero .hero__content .hero__left-svg svg #light-lmp {
    fill: var(--color-light-lmp-hero);
    cursor: pointer;
    -webkit-animation: var(--color-glow-lmp-hero);
    animation: var(--color-glow-lmp-hero);
}

#Hero .hero__content .hero__left-svg svg #g-light {
    fill: var(--color-g-light-hero);
    -webkit-animation: var(--color-glow-lmp-hero);
    animation: var(--color-glow-lmp-hero);
}

@-webkit-keyframes text-flicker-in-glow {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
        text-shadow: none;
    }
    10.1% {
        opacity: 1;
        text-shadow: none;
    }
    10.2% {
        opacity: 0;
        text-shadow: none;
    }
    20% {
        opacity: 0;
        text-shadow: none;
    }
    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
    }
    20.6% {
        opacity: 0;
        text-shadow: none;
    }
    30% {
        opacity: 0;
        text-shadow: none;
    }
    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.6% {
        opacity: 0;
        text-shadow: none;
    }
    45% {
        opacity: 0;
        text-shadow: none;
    }
    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55.1% {
        opacity: 0;
        text-shadow: none;
    }
    57% {
        opacity: 0;
        text-shadow: none;
    }
    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60.1% {
        opacity: 0;
        text-shadow: none;
    }
    65% {
        opacity: 0;
        text-shadow: none;
    }
    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75.1% {
        opacity: 0;
        text-shadow: none;
    }
    77% {
        opacity: 0;
        text-shadow: none;
    }
    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85.1% {
        opacity: 0;
        text-shadow: none;
    }
    86% {
        opacity: 0;
        text-shadow: none;
    }
    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
}

@keyframes text-flicker-in-glow {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
        text-shadow: none;
    }
    10.1% {
        opacity: 1;
        text-shadow: none;
    }
    10.2% {
        opacity: 0;
        text-shadow: none;
    }
    20% {
        opacity: 0;
        text-shadow: none;
    }
    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
    }
    20.6% {
        opacity: 0;
        text-shadow: none;
    }
    30% {
        opacity: 0;
        text-shadow: none;
    }
    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.6% {
        opacity: 0;
        text-shadow: none;
    }
    45% {
        opacity: 0;
        text-shadow: none;
    }
    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55.1% {
        opacity: 0;
        text-shadow: none;
    }
    57% {
        opacity: 0;
        text-shadow: none;
    }
    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60.1% {
        opacity: 0;
        text-shadow: none;
    }
    65% {
        opacity: 0;
        text-shadow: none;
    }
    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75.1% {
        opacity: 0;
        text-shadow: none;
    }
    77% {
        opacity: 0;
        text-shadow: none;
    }
    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85.1% {
        opacity: 0;
        text-shadow: none;
    }
    86% {
        opacity: 0;
        text-shadow: none;
    }
    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
}

#Hero .hero__content .hero__right-content {
    padding-top: 15px;
    background-color: var(--color-bg-hero);
    min-height: 90vh;
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__right-content {
        min-height: 100vh;
        width: 67%;
        padding: 35px 10px 8px 120px;
        -webkit-box-flex: 67%;
        -ms-flex: 67%;
        flex: 67%;
    }
}

#Hero .hero__content .hero__right-content .hero-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 80px;
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__right-content .hero-content {
        padding: 110px 50px 8px 12%;
    }
}

#Hero .hero__content .hero__right-content .hero-content h1 {
    width: 90%;
    font-size: 10vw;
    line-height: 1.4;
    color: var(--color-title-hero);
}

@media (min-width: 40em) {
    #Hero .hero__content .hero__right-content .hero-content h1 {
        font-size: 6vw;
        width: 70%;
        line-height: 1.3;
    }
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__right-content .hero-content h1 {
        font-size: 340%;
        font-weight: 900;
        margin-top: 0;
        width: 90%;
    }
}

#Hero .hero__content .hero__right-content .hero-content h1 span {
    font-size: 35px;
}

#Hero .hero__content .hero__right-content .hero-content p {
    font-size: 6vw;
    font-weight: 400;
    font-family: var(--font-jen);
    color: var(--color-title-hero);
    margin: 0;
    opacity: 1;
}

@media (min-width: 40em) {
    #Hero .hero__content .hero__right-content .hero-content p {
        font-size: 4vw;
    }
}

@media (min-width: 64em) {
    #Hero .hero__content .hero__right-content .hero-content p {
        font-size: 25px;
        margin-bottom: 5px;
    }
}

#Info {
    position: relative;
    min-height: 80vh;
    padding: 50px 0;
    background-color: var(--color-bg-info);
}

#Info .info__title-head h1 {
    font-size: 190%;
    position: relative;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    color: var(--color-title-info);
}

@media (min-width: 40em) {
    #Info .info__title-head h1 {
        font-size: 240%;
    }
}

@media (min-width: 64em) {
    #Info .info__title-head h1 {
        font-size: 300%;
        top: 45px;
    }
}

@media (min-width: 64em) {
    #Info .info__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        top: -70px;
    }
}

@media (min-width: 64em) {
    #Info .info__content .info__text {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
}

#Info .info__content .info__text p {
    font-size: 17px;
    max-width: 80%;
    line-height: 1.7em;
    padding-bottom: 25px;
}

@media (min-width: 40em) {
    #Info .info__content .info__text p {
        font-size: 20px;
        max-width: 70%;
    }
}

#Info .info__content .info__text .title-bottom {
    -webkit-box-shadow: 4px 4px 0 0 var(--color-dark-info);
    box-shadow: 4px 4px 0 0 var(--color-dark-info);
    padding: 8px 0px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    bottom: 0;
}

@media (min-width: 40em) {
    #Info .info__content .info__text .title-bottom {
        padding: 12px 0px;
    }
}

#Info .info__content .info__text .title-bottom a {
    font-size: 110%;
    color: var(--color-dark);
    background-color: var(--color-bg-light-info);
    border: 2px solid var(--color-dark-info);
    padding: 6px 14px;
}

@media (min-width: 40em) {
    #Info .info__content .info__text .title-bottom a {
        padding: 10px 20px;
    }
}

#Info .info__content .info__text .title-bottom a:hover {
    position: relative;
    bottom: -4px;
    right: -4px;
}

@media (min-width: 64em) {
    #Info .info__content .info__svg {
        -webkit-box-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
}

#Info .info__content .info__svg svg {
    max-width: 90%;
    text-align: center;
    padding: 80px 0;
    -webkit-transform: translatex(5%);
    transform: translatex(5%);
}

@media (min-width: 40em) {
    #Info .info__content .info__svg svg {
        max-width: 70%;
        -webkit-transform: translatex(20%);
        transform: translatex(20%);
    }
}

@media (min-width: 64em) {
    #Info .info__content .info__svg svg {
        float: right;
        margin-right: 120px;
    }
}

#Info .info__content .info__svg svg .cls-4,
#Info .info__content .info__svg svg .cls-3 {
    fill: var(--cls3-4);
}

#Info .info__content .info__svg svg .cls-2 {
    fill: var(--cls-2);
}

#Info .info__content .info__svg svg #markorang-7,
#Info .info__content .info__svg svg .cls-5,
#Info .info__content .info__svg svg .cls-8 {
    fill: var(--cls-5-8);
}

#Info .info__content .info__svg svg #markorang-6,
#Info .info__content .info__svg svg .cls-7 {
    fill: var(--markorang-6-cls-7);
}

#Info .info__content .info__svg svg .cls-0 {
    fill: var(--cls-0);
}

#Info .info__content .info__svg svg .cls-9 {
    fill: var(--cls-9);
}

#Info .info__content .info__svg svg .cls-1 {
    fill: var(--cls-1);
}

#Info .info__content .info__svg svg #markorang,
#Info .info__content .info__svg svg #markorang-5 {
    fill: var(--markorang-markorang-5);
}

#Services {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--color-bg-serv);
    padding: 50px 0;
}

#Services .serv__title-head h1 {
    font-size: 190%;
    position: relative;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    color: var(--color-title-serv);
}

@media (min-width: 40em) {
    #Services .serv__title-head h1 {
        font-size: 240%;
    }
}

@media (min-width: 64em) {
    #Services .serv__title-head h1 {
        margin-bottom: 90px;
        font-size: 300%;
    }
}

#Services .serv__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

#Services .serv__content .line-number {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 53px 15px 53px 0;
}

@media (min-width: 64em) {
    #Services .serv__content .line-number {
        display: inline-block;
    }
}

#Services .serv__content .line-number .line-dotted {
    border-left: 2px dotted var(--color-dark-serv);
    height: 100%;
}

@media (min-width: 64em) {
    #Services .serv__content .line-number .line-dotted {
        display: none;
    }
}

#Services .serv__content .line-card {
    position: relative;
    margin-left: 18px;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

#Services .serv__content .line-card .serv-card {
    position: relative;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card {
        margin: 0 40px;
    }
}

#Services .serv__content .line-card .serv-card .num1 {
    position: absolute;
    top: 0px;
    left: -50px;
    width: 34px;
    height: 34px;
    background-color: var(--color-one);
    border-radius: 40% 60% 36% 64% / 40% 13% 87% 60%;
    text-align: center;
    padding-top: 5px;
}

#Services .serv__content .line-card .serv-card .num1 span {
    padding: 5px 11px;
    background-color: var(--color-three);
    border-radius: 36% 64% 39% 61% / 87% 38% 62% 13%;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .num1 {
        top: 50px;
    }
}

#Services .serv__content .line-card .serv-card .num2 {
    position: absolute;
    top: 0px;
    left: -50px;
    width: 34px;
    height: 34px;
    background-color: var(--color-four);
    border-radius: 58% 42% 37% 63% / 70% 28% 72% 30%;
    text-align: center;
    padding-top: 5px;
}

#Services .serv__content .line-card .serv-card .num2 span {
    padding: 5px 11px;
    background-color: var(--color-two);
    border-radius: 56% 44% 65% 35% / 31% 27% 73% 69%;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .num2 {
        top: 50px;
    }
}

#Services .serv__content .line-card .serv-card .num3 {
    position: absolute;
    top: 0px;
    left: -50px;
    width: 34px;
    height: 34px;
    background-color: var(--color-two);
    border-radius: 20% 80% 37% 63% / 45% 23% 77% 55%;
    text-align: center;
    padding-top: 5px;
}

#Services .serv__content .line-card .serv-card .num3 span {
    padding: 5px 11px;
    background-color: var(--color-one);
    border-radius: 58% 42% 37% 63% / 41% 56% 44% 59%;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .num3 {
        top: 50px;
    }
}

#Services .serv__content .line-card .serv-card .border__back--serv {
    border: 2px solid var(--color-dark-serv);
    border-radius: 30px;
    height: 304px;
    width: 100.2%;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -1%) rotate(-2deg);
    transform: translate(-50%, -1%) rotate(-2deg);
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .border__back--serv {
        left: auto;
        height: 269px;
        width: 269px;
        -webkit-transform: translate(0%, -50%) rotate(-3deg);
        transform: translate(0%, -50%) rotate(-3deg);
        top: 50%;
    }
}

#Services .serv__content .line-card .serv-card .border-box {
    position: relative;
    border: 2px solid var(--color-dark-serv);
    border-radius: 30px;
    padding: 13px;
    max-width: 270px;
    background-color: var(--color-bg-box);
    margin: 50px 0;
    z-index: 1;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .border-box {
        padding: 20px;
    }
}

#Services .serv__content .line-card .serv-card .green {
    background-color: var(--color-four);
}

#Services .serv__content .line-card .serv-card .yallow {
    background-color: var(--color-three);
}

#Services .serv__content .line-card .serv-card .red {
    background-color: var(--color-one);
}

#Services .serv__content .line-card .serv-card .cyin {
    background-color: var(--color-two);
}

#Services .serv__content .line-card .serv-card .icon-serv {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    position: relative;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#Services .serv__content .line-card .serv-card .icon-serv svg {
    position: absolute;
    right: -20px;
    max-width: 60%;
    fill: var(--color-dark-serv);
}

#Services .serv__content .line-card .serv-card .icon-serv svg .svg-fill {
    fill: transparent;
}

#Services .serv__content .line-card .serv-card .body-content span {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-title-serv);
    margin-bottom: 14px !important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .body-content span {
        font-weight: 600;
    }
}

#Services .serv__content .line-card .serv-card .body-content p {
    font-weight: 500;
    line-height: 1.7em;
    max-width: 100%;
    margin: 0 auto;
    color: var(--color-p-serv);
    text-align: center;
}

@media (min-width: 40em) {
    #Services .serv__content .line-card .serv-card .body-content p {
        font-size: 16px;
    }
}

@media (min-width: 64em) {
    #Services .serv__content .line-card .serv-card .body-content p {
        text-align: center;
        font-size: 14px;
        width: 270px;
        padding: 0 15px;
    }
}

#Services .serv__content .line-card .serv-card .linehover:hover span {
    background-repeat: no-repeat;
    background-size: 0% 100%;
    -webkit-animation: animatedBackground 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s forwards;
    animation: animatedBackground 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s forwards;
}

@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}

#Services .serv__content .line-card .serv-card .linegreen:hover span {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(50%, var(--color-light-serv)), color-stop(100%, var(--color-four)), color-stop(50%, transparent), to(transparent));
    background-image: linear-gradient(transparent 40%, var(--color-light-serv) 50%, var(--color-four) 100%, transparent 50%, transparent 100%);
}

#Services .serv__content .line-card .serv-card .lineyallow:hover span {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(50%, var(--color-light-serv)), color-stop(100%, var(--color-three)), color-stop(50%, transparent), to(transparent));
    background-image: linear-gradient(transparent 40%, var(--color-light-serv) 50%, var(--color-three) 100%, transparent 50%, transparent 100%);
}

#Services .serv__content .line-card .serv-card .linecyin:hover span {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(50%, var(--color-light-serv)), color-stop(100%, var(--color-two)), color-stop(50%, transparent), to(transparent));
    background-image: linear-gradient(transparent 40%, var(--color-light-serv) 50%, var(--color-two) 100%, transparent 50%, transparent 100%);
}

#Services .serv__content .line-card .serv-card .linered:hover span {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(50%, var(--color-light-serv)), color-stop(100%, var(--color-one)), color-stop(50%, transparent), to(transparent));
    background-image: linear-gradient(transparent 40%, var(--color-light-serv) 50%, var(--color-one) 100%, transparent 50%, transparent 100%);
}

#Mywork {
    min-height: 100vh;
    background-color: var(--color-bg-blog);
    position: relative;
    padding: 50px 0 130px 0;
}

#Mywork .mywork__title-head h1 {
    font-size: 190%;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--color-title-blog);
}

@media (min-width: 40em) {
    #Mywork .mywork__title-head h1 {
        font-size: 240%;
    }
}

@media (min-width: 64em) {
    #Mywork .mywork__title-head h1 {
        font-size: 300%;
    }
}

#Mywork .mywork__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 50px auto 0;
}

@media (min-width: 40em) {
    #Mywork .mywork__content {
        margin: 150px 0 0;
    }
}

@media (min-width: 64em) {
    #Mywork .mywork__content {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

#Mywork .mywork__content .mywork__content--card {
    margin: 50px 15px;
}

#Mywork .mywork__content .mywork__content--card:first-child {
    margin-top: 100px;
}

#Mywork .mywork__content .mywork__content--card:last-child {
    margin-bottom: 0px;
}

@media (min-width: 40em) {
    #Mywork .mywork__content .mywork__content--card:first-child {
        margin-top: 50px;
    }
    #Mywork .mywork__content .mywork__content--card:last-child {
        margin-bottom: 50px;
    }
}

@media (min-width: 64em) {
    #Mywork .mywork__content .mywork__content--card {
        margin: 30px 30px;
    }
    #Mywork .mywork__content .mywork__content--card:first-child {
        margin-top: 30px;
    }
    #Mywork .mywork__content .mywork__content--card:last-child {
        margin-bottom: 30px;
    }
}

#Mywork .mywork__content .mywork__content--card .border__back--mywork {
    height: 80px;
    width: 237px;
    background-color: var(--color-bg-blog);
    border: 2px solid var(--color-dark-serv);
    border-top: none;
    border-radius: 35px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#Mywork .mywork__content .mywork__content--card .border__back--mywork2 {
    height: 80px;
    width: 188px;
    border: 2px solid var(--color-dark-serv);
    border-top: none;
    border-radius: 35px;
    position: absolute;
    bottom: -19px;
    left: 50%;
    z-index: -2;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#Mywork .mywork__content .mywork__content--card .main-card {
    position: relative;
    background-color: var(--color-bg-blog);
    border: 2px solid var(--color-dark-serv);
    border-radius: 35px;
    padding: 25px 13px 0;
    max-width: 280px;
}

#Mywork .mywork__content .mywork__content--card .main-card span {
    text-align: center;
    padding-bottom: 20px;
    font-size: 18px;
}

#Mywork .mywork__content .mywork__content--card .main-card img {
    max-width: 250px;
    height: 142.38px;
    border-radius: 15px;
    border: 2px solid var(--color-dark-serv);
    position: relative;
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
}

#Mywork .mywork__content .mywork__content--card .main-card p {
    text-align: center;
    margin: 15px 0;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    height: 70px;
    overflow-y: hidden;
}

#Mywork .mywork__content .mywork__content--card .main-card p::after {
    content: " [...]";
}

#Mywork .mywork__content .mywork__content--card .main-card .linedashed {
    border-bottom: 2px dashed var(--color-dark-serv);
    margin: 15px 0 18px;
}

#Mywork .mywork__content .mywork__content--card .main-card .btn-card {
    padding: 0px 0 15px;
}

#Mywork .mywork__content .mywork__content--card .main-card .btn-card .readmore {
    color: var(--color-dark-serv);
    font-size: 15px;
    font-weight: 400;
    border: 2px dotted var(--color-dark-serv);
    padding: 5px 8px;
    border-radius: 25px;
}

#Mywork .mywork__content .mywork__content--card .main-card .btn-card .viewsite {
    background-color: var(--color-btn-viewsite);
    color: var(--color-dark-serv);
    font-size: 15px;
    padding: 5px 8px;
    border-radius: 25px;
    border: 2px solid var(--color-dark-serv);
    font-weight: 600;
}

#Mywork .mywork__title-bottom {
    -webkit-box-shadow: 4px 4px 0 0 var(--color-dark-blog);
    box-shadow: 4px 4px 0 0 var(--color-dark-blog);
    padding: 11px 0px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    bottom: 10%;
}

@media (min-width: 40em) {
    #Mywork .mywork__title-bottom {
        padding: 14px 0px;
        position: absolute;
        left: 40%;
        bottom: 5%;
    }
}

@media (min-width: 64em) {
    #Mywork .mywork__title-bottom {
        position: absolute;
        left: 13%;
        bottom: 15%;
    }
}

#Mywork .mywork__title-bottom a {
    font-size: 110%;
    color: var(--color-dark-blog);
    background-color: var(--color-bg-light-blog);
    border: 2px solid var(--color-dark-blog);
    padding: 9px 20px;
}

@media (min-width: 40em) {
    #Mywork .mywork__title-bottom a {
        padding: 12px 30px;
    }
}

#Mywork .mywork__title-bottom a:hover {
    position: relative;
    bottom: -4px;
    right: -4px;
}


/*# sourceMappingURL=style.css.map */