:root {
    --space1: 4px;
    --space2: 8px;
    --space3: 12px;
    --dark-color: rgb(12, 12, 12);
    --light-color: white;
    --500ms: 500ms;
    --200ms: 200ms;
    --1sec: 1000ms;
    --border-width: 1px;
    --offset-x: 0px;
    --offset-y: 0.5rem;
    --blur-radius: 1rem;
    --spread-radius: -0.25rem;
}

html {
    font-family: 'Roboto', sans-serif;
    scrollbar-color: #2b2b2b var(--dark-color);
    background-color: var(--dark-color);
    color: var(--light-color);
    transition: all var(--500ms) linear;
    scroll-behavior: smooth;
}

button {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

.light-mode {
    background-color: var(--light-color);
    color: var(--dark-color);
    scrollbar-color: initial;

    body {
        .project {
            background: gainsboro;
        }

        footer .copyright {
            background-color: var(--dark-color);
        }
    }
}

@media screen and (min-width: 800px) {
    header {
        padding: var(--space3) 5rem !important;

        .navbar {
            nav {
                display: flex !important;
            }

            .nav-buttons {
                #menu-toggle {
                    display: none;
                }
            }
        }
    }

    section {
        padding: 1rem 5rem !important;
    }
}

@media screen and (max-width:1200px) {
    .intro {
        display: none;
    }

    .home-section {
        display: flex !important;
    }

    .personal {
        display: block !important;

        img {
            max-width: 100% !important;
            margin: 10px 0 5px 0 !important;
        }
    }
}

header {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1;
    backdrop-filter: blur(10px);
    padding: var(--space3);

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            background: linear-gradient(45deg, rgb(0 134 255), rgb(0, 204, 140) 80%);
            background-clip: text;
            color: transparent;
            font-size: 1.5rem;
        }

        .gap {
            display: flex;
            flex-grow: 1;
        }

        nav {
            display: none;
            gap: 1rem;
            margin-right: 1rem;
        }

        .nav-buttons {
            display: flex;
            gap: var(--space3);

            button {
                border: 0px;
                background-color: inherit;
                display: flex;
                align-items: center;
                color: inherit;

                .material-symbols-rounded {
                    color: inherit;
                    transition: opacity var(--500ms);
                }

                .dark {
                    position: absolute;
                }

                .hidden {
                    opacity: 0;
                }
            }

            button:hover {
                cursor: pointer;
            }

            #menu-toggle {
                transition: all var(--200ms) linear;
            }

            .toggle {
                transform: rotate(180deg);
            }
        }
    }

    .menu {
        text-align: center;
        transition: all var(--200ms) linear;
        transform: scaleY(0);
        transform-origin: top;
        height: 0px;

        a {
            padding: var(--space3);
        }
    }

    .visible {
        transform: scaleY(1);
        height: 100%;
    }
}

section {
    padding: 1em;
}

.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20vh);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out, visibility 1s linear;
}

.fade-in {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@keyframes fade-in {
    to {
        scale: 1;
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

.home-section {
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;

    .salutation {
        font-size: clamp(2rem, 8vw, 3rem);

        .glow {
            background-image: linear-gradient(90deg, #ff5861 0%, #ff52d9 9%, #7480ff 47%, #00cdb8 100%);
            color: transparent;
            background-clip: text;
            white-space: nowrap;
        }

        .glow::before {
            content: attr(data-content);
            position: absolute;
            background-image: inherit;
            color: inherit;
            background-clip: inherit;
            white-space: inherit;
            filter: blur(1.5rem);
        }
    }

    .dynamic-text {
        height: 2.5rem;
        overflow: hidden;
        margin-top: 4rem;
    }

    .words {
        text-align: center;
        animation: spin infinite 6s;

        div {
            font-size: 2rem;
            background: linear-gradient(45deg, red, blue);
            background-clip: text;
            color: transparent;
        }
    }

    .socials {
        position: absolute;
        bottom: 1rem;
        display: flex;
        gap: 1rem;

        .material-symbols-rounded {
            font-size: 2rem;
            margin-top: 2px;
        }

        i {
            font-size: 1.5rem;
        }
    }
}

@keyframes spin {
    25% {
        transform: translateY(-20%);
    }

    50% {
        transform: translateY(-40%);
    }

    75% {
        transform: translateY(-60%);
    }

    100% {
        transform: translateY(-80%);
    }
}

.about-section {
    h2 {
        margin-bottom: 0.7rem;
        background: linear-gradient(40deg, #00ffe7, #ff00e3);
        width: fit-content;
        background-clip: text;
        color: transparent;
    }
}

.projects {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    .project {
        .heading {
            font-weight: bold;
        }

        transition: background var(--500ms) linear;
        background: #151515;
        padding: 11px 1rem;
        border-radius: 10px;

        ul {
            margin-left: 1rem;
        }

        a {
            text-decoration: underline;
        }

    }
}

.personal {
    display: flex;

    img {
        max-width: 50%;
        border-radius: 5px;
        margin: 5px 0 5px 10px;
    }
}

.experience-section {
    .content {
        margin-top: 3rem;

        h2 {
            background: linear-gradient(90deg, #ff52d9, #7480ff);
            color: transparent;
            background-clip: text;
            width: fit-content;
        }

        .firms {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            .firm {
                width: 100%;

                .firm-details {
                    display: flex;
                    justify-content: space-between;
                    padding: .5rem;
                    border-radius: 5px;
                }

                .project {
                    flex-grow: 1;
                }
            }
        }
    }
}

.projects-section {
    .content {
        margin-top: 3rem;

        h2 {
            margin-bottom: 0.7rem;
            background: linear-gradient(40deg, blue, red);
            color: transparent;
            background-clip: text;
            width: fit-content;
        }
    }
}

.skills-section {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .scroller {
        width: clamp(100px, 100vw, 800px);
        overflow: hidden;
        mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);

        .scroller-inner {
            list-style: none;
            display: flex;
            gap: 1rem;
            padding-block: 1.5rem;
            width: max-content;

            li {
                padding: 1rem;
                border-radius: 0.5rem;
                white-space: nowrap;
                animation: color-change 10s linear infinite;
            }
        }

        .animate-left {
            animation: scroll 40s linear infinite;
        }

        .animate-right {
            animation: scroll 40s linear infinite reverse;
        }
    }
}

@keyframes color-change {
    0% {
        border: var(--border-width) solid violet;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) violet;
    }

    16% {
        border: var(--border-width) solid rgb(0, 85, 255);
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) rgb(0, 85, 255);
    }

    32% {
        border: var(--border-width) solid green;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) green;
    }

    48% {
        border: var(--border-width) solid lightgreen;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) lightgreen;
    }

    64% {
        border: var(--border-width) solid orange;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) orange;
    }

    80% {
        border: var(--border-width) solid red;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) red;
    }

    100% {
        border: var(--border-width) solid violet;
        box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) var(--spread-radius) violet;
    }
}

@keyframes scroll {
    to {
        translate: calc(-50% - 0.5rem);
    }
}

footer {
    padding: 2rem 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    span {
        display: flex;
        align-items: center;
    }

    .icon {
        height: 20px;
        width: 20px;
    }

    .copyright {
        height: 1.5rem;
        width: 1.5rem;
        transition: background-color var(--500ms) linear;
        background-color: var(--light-color);
        mask-image: url(svgs/copyright.svg);
    }

    .html {
        background-image: url(svgs/html.svg);
    }

    .css {
        background-image: url(svgs/css.svg);
    }

    .js {
        background-image: url(svgs/js.svg);
    }
}

.intro {
    height: 100vh;

    .absolute {
        left: 0;
        right: 0;
        position: absolute;
        margin-top: 40vh;
        margin-inline: auto;
        max-width: 50%;
        text-align: center;
        transition: all 0.5s ease;

        .salutation {
            font-size: clamp(2rem, 8vw, 3rem);

            .glow {
                background-image: linear-gradient(90deg, #ff5861 0%, #ff52d9 9%, #7480ff 47%, #00cdb8 100%);
                color: transparent;
                background-clip: text;
                white-space: nowrap;
            }

            .glow::before {
                content: attr(data-content);
                position: absolute;
                background-image: inherit;
                color: inherit;
                background-clip: inherit;
                white-space: inherit;
                filter: blur(1.5rem);
            }
        }

        .dynamic-text {
            height: 2.5rem;
            overflow: hidden;
            margin-top: 4rem;
        }

        .words {
            text-align: center;
            animation: spin infinite 6s;

            div {
                font-size: 2rem;
                background: linear-gradient(45deg, red, blue);
                background-clip: text;
                color: transparent;
            }
        }
    }

    .snap-con {
        height: inherit;
        overflow: scroll;
        scrollbar-width: none;
        scroll-snap-type: y mandatory;

        .content {
            height: inherit;
            scroll-snap-align: start;
        }

        .bio {
            width: 50%;
            margin-left: 50%;
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 1s linear;

            .text {
                margin: 10%;
                border-radius: 20px;
                padding: 5%;
                border: 2px solid fuchsia;

                h2 {
                    margin-bottom: 0.7rem;
                    background: linear-gradient(40deg, #00ffe7, #ff00e3);
                    color: transparent;
                    background-clip: text;
                    width: fit-content;
                }

            }
        }
    }
}

.socials {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;

    .material-symbols-rounded {
        font-size: 2rem;
        margin-top: 1.5px;
    }

    i {
        font-size: 1.5rem;
    }
}