* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
:root {
    --bg-color:#282C33;
    --text-primary: #ABB2BF;
    --text-seconday: #C778DD;
    --white: #fff;

}
/* utility classes */
.container {
    max-width: 1024px;
    width: 90%;
    margin: 0 auto;
}
.relative {
    position: relative;
}
.d-block {
    display: block;
}
.d-inline {
    display: inline;
}
.d-inline-block {
    display: inline-block;
}
/* flex */
.d-flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}
.flex-column {
    flex-direction: column;
}
.align-self-end {
    align-self: flex-end;
}
.flex-wrap {
    flex-wrap: wrap;
}
/* colors */
.c-primary {
    color: var(--text-primary);
}
.c-secondary {
    color: var(--text-seconday);
}
.active-link {
    font-weight: bold;
    color: var(--white) !important;
}
.my-border {
    border: 1px solid var(--text-primary);
}
/* ============================= */
/* Custom Scrollbar Utility      */
/* ============================= */
.scroll-primary::-webkit-scrollbar {
    width: 4px;
}
.scroll-primary::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: var(--text-primary);
    border: 1px solid var(--text-primary);
}
.scroll-primary::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--text-seconday);
}
.my-btn {
    background-color: transparent;
    color: var(--white);
    padding: 8px 16px;
    cursor: pointer;
    transition-duration: .3s;
    &:hover {
        transform: scale(1.1);
    }
}
.cube {
    width: 16px;
    height: 16px;
    background-color: var(--text-seconday);
    margin-right: 10px;
}
.square {
    position: absolute;
    top: 672px;
    right: -9px;
    width: 91px;
    height: 91px;
}
.square-large {
    position: absolute;
    top: 1160px;
    right: -87px;
    width: 155px;
    height: 155px;
}
.dots-global {
    position: absolute;
    top: 816px;
    left: 9px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 11px;
    width: 67px;
    height: 67px;
    & .dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: var(--text-primary);
    }
}
body {
    font-family: "Fira Code", monospace;
    background-color: var(--bg-color);
    overflow-x: hidden;
}
.floating-social-links {
    position: fixed;
    top: 0;
    left: 17px;
    & .vertical-line {
        width: 1px;
        height: 191px;
        background-color: var(--text-primary);
        margin-inline: auto;
    }
    & .social-icons {
        margin-top: 8px;
        gap: 8px;
    }
}
 & .logo {
    gap: 8px;
    & .author-name {
        color: var(--white);
        font-weight: bold;
        text-transform: capitalize;
    }
}
header {
    padding-block: 32px 8px;
    & .navigation {
        & .nav-wrapper {
            gap: 32px;
            & a {
                color: var(--text-primary);
                display: inline-block;
                transition-duration: .3s;
                &:hover {
                    transform: scale(1.1);
                }
                & span {
                    &:first-child {
                        color: var(--text-seconday);
                    }
                }   
            }
        }
    }
}
section {
    margin-bottom: 100px;
    & .section-header {
        color: var(--white);
        margin-bottom: 48px;
        & h2 {
            font-size: 32px;
            font-weight: 500;
            &::before {
                content: '#';
                color: var(--text-seconday);
            }
            &::after {
                content: '';
                display: block;
                width: 511px;
                height: 1px;
                background-color: var(--text-seconday);
                margin-left: 16px;
            }
        }
        & a {
            color: inherit;
        }
    }
}
section.hero {
    margin-top: 60px;
    & .text-content {
        color: var(--white);
        margin-right: 18px;
        & h1 {
            margin-bottom: 32px;
        }
        & p {
            margin-bottom: 24px;
        }
    }
    & .img-content {
        position: relative;
        & .logo {
            position: absolute;
            top: 84px;
            left: -12px;
            z-index: -1;
        }
        & .working-status {
            position: absolute;
            left: 18px;
            bottom: -33px;
            z-index: 10;
            width: 400px;
            padding: 8px;
            & .project-name {
                color: var(--white);
            }
        }
        & .dots {
            position: absolute;
            right: 16px;
            bottom: 56px;
            z-index: 10;
        }
    }
    & .developer-slogan {
        --padding: 16px;
        max-width: 714px;
        margin-inline: auto;
        margin-top: 112px;
        color: var(--white);
        & .slogan {
            padding: calc(var(--padding) * 2);
            font-weight: 500;
            font-size: 24px;
        }
        & .slogan-author {
            padding: var(--padding);
            border-top: none;
        }
        & .quotes-start {
            position: absolute;
            left: 16px;
            top: 0;
            transform: translateY(-50%);
            z-index: 1;
            & svg {
                & rect {
                    fill: var(--bg-color);
                }
            }
        }
        & .quotes-end {
            position: absolute;
            right: 16px;
            bottom: 0;
            transform: translateY(50%);
            z-index: 1;
            & svg {
                & rect {
                    fill: var(--bg-color);
                }
            }
        }
    }
}
section.projects {
    & .projects-wrapper {
        gap: 16px;
        & .card {
            width: 330px;
            & .card-header {
                height: 35%;
                & img {
                    width: 100%;
                    display: block;
                }
            }
            & .card-body {
                height: 65%;
                & .technology-stack {
                    border-left: none;
                    border-right: none;
                    gap: .5rem;
                    padding: .5rem;
                }
                & .project-info {
                    padding: 1rem;
                    padding-bottom: 0;
                    & h3 {
                        font-size: 24px;
                        font-weight: 500;
                        color: var(--white);
                        text-transform: capitalize;
                    }
                    & p {
                        margin-block: 1rem;
                        max-height: 200px;
                        overflow-y: auto;
                    }
                }
                & .buttons-wrapper {
                    margin-top: auto;
                    margin-left: 1rem;
                    margin-bottom: 1rem;
                }
            }
        }
    }
}
section.skills {
     & h2 {
            &::after {
                width: 230px;
            }
        }
    & .skills-wrapper {
        & .shapes {
            min-width: 350px;
            & img {
                display: block;
                width: 100%;
            }
        }
        .small-w {
            width: 178px;
        }
        .large-w {
            width: 196px;
        }
        & .skills-list {
            max-width: 584px;
            gap: 1rem;
            & .skill-card {
                margin-bottom: 1rem;
                & .title {
                    color: var(--white);
                    border-bottom: 1px solid var(--text-primary);
                    padding: 0.5rem;
                }
                & .body {
                    color: var(--text-primary);
                    padding: 0.5rem;
                    & ul {
                        gap: 6px;
                    }
                }
            }
        }
    }
    
}
section.about-me {
    & h2 {
        &::after {
            width: 326px;
        }
    }
    & .about-me-wrapper {
        & .text-content {
            color: var(--text-primary);
            & p {
                max-width: 515px;
                margin-bottom: 16px;
                line-height: 26px;
            }
            & button {
                margin-top: 10px;
                border-color: var(--text-seconday);
            }
        }
    }
}
section.contacts {
    & h2 {
        &::after {
            width: 280px;
        }
    }
    & .contacts-wrapper {
        & .text-content {
            max-width: 505px;
        }
        & .contact-info {
            padding: 1rem;
            & h4 {
                color: var(--white);
                font-weight: 600;
                margin-bottom: 1rem;
            }
            & ul {
                & li {
                    gap: 5px;
                    margin-bottom: 8px;
                }
            }
        }
    }
}
footer {
    padding-block: 2rem;
    color: var(--white);
    border-top: 1px solid var(--text-primary);
    & .logo-role-wrapper {
        & .address {
            margin-left: 24px;
        }
        & .role {
            margin-top: 1rem;
        }
    }
    & .social-media-wrapper  {
        & h5 {
            font-size: 24px;
            text-transform: capitalize;
            margin-bottom: 12px;
        }
        & a {
            display: inline-block;
            transition-duration: .3s;
            &:hover {
                transform: scale(1.1);
            }
        }
    }
    & .copy {
        text-align: center;
        margin-top: 3rem;
    }
}