body {
    --sb-track-color: #232E33;
    --sb-thumb-color: #44f99f;
    --sb-size: 5px;
}

body::-webkit-scrollbar {
    width: var(--sb-size)
}

body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;

}

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}


body {
    scroll-behavior: smooth;
}

nav {
    font-family:
        IBM Plex Mono;
}

header nav ul li a {
    transition: .4s;
}

header nav ul li a:hover {
    color: white !important;
}


.icon-sc .fa-twitter,
.icon-sc .fa-behance,
.icon-sc .fa-linkedin-in {
    transition: .4s;
}

.icon-sc .fa-linkedin-in:hover {
    color: rgb(7, 152, 249);
}

.icon-sc .fa-behance:hover {
    color: rgb(207, 78, 78);
}

.icon-sc .fa-twitter:hover {
    color: rgb(7, 152, 249);
}

/* start icon worked with */
.fa-square-upwork,
.fa-dropbox,
.fa-cc-amazon-pay,
.fa-shoelace,
.fa-stripe {
    transition: .4s;
}

.fa-square-upwork:hover {
    color: #108a00;
}

.fa-dropbox:hover {
    color: #4083ef;
}

.fa-cc-amazon-pay:hover {
    color: #febd69;
}

.fa-shoelace:hover {
    color: #0ea5e9;
}

.fa-stripe:hover {
    color: #e18238;
}


.img-hd {
    border-radius: 100%;
    height: 350px;
    object-fit: cover;
}

img {
    object-fit: cover;
}

.bod {
    background: radial-gradient(circle at 100% 100%, #000000 0, #000000 7px, transparent 7px) 0% 0%/8px 8px no-repeat,
        radial-gradient(circle at 0 100%, #000000 0, #000000 7px, transparent 7px) 100% 0%/8px 8px no-repeat,
        radial-gradient(circle at 100% 0, #000000 0, #000000 7px, transparent 7px) 0% 100%/8px 8px no-repeat,
        radial-gradient(circle at 0 0, #000000 0, #000000 7px, transparent 7px) 100% 100%/8px 8px no-repeat,
        linear-gradient(#000000, #000000) 50% 50%/calc(100% - 2px) calc(100% - 16px) no-repeat,
        linear-gradient(#000000, #000000) 50% 50%/calc(100% - 16px) calc(100% - 2px) no-repeat,
        linear-gradient(241deg, transparent 27%, #d5d5d5 100%, #d5d5d5 100%);
    border-radius: 8px;
}