/* Reset Styles */
* {
    -webkit-tap-highlight-color: transparent !important;
    padding: 0;
    margin: 0;
}

/* Selection Style */
::selection {
    background-color: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
}

/* Base Element Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    margin-block: 10%;
    margin-block-end: 200px;
    padding: 0;
    font-family: "Lato", sans-serif;
    background-color: var(--md-sys-color-surface);
    background-image: linear-gradient(var(--graph) 2px, transparent 2px),
        linear-gradient(90deg, var(--graph) 2px, transparent 2px),
        linear-gradient(var(--graph) 1px, transparent 1px),
        linear-gradient(90deg, var(--graph) 1px, var(--md-sys-color-surface) 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    color: var(--md-sys-color-on-surface);
    text-align: start;
}

/* Typography */
a {
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
}

h1 {
    font-size: 3.5rem;
    margin: 0;
    margin-block-end: 20px;
}

h2 {
    font-size: 2.33rem;
    margin: 0;
    margin-block-end: 35px;
}

h3 {
    font-size: 1.85rem;
    margin: 0;
    margin-block-end: 20px;
}

:is(h1, h2, h3, h4, h5, h5) {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    filter: drop-shadow(4px 4px 4px rgba(255, 255, 255, 0.2));
}

/* Layout Components */
body>section {
    width: 70%;
    margin: 0;
    margin-inline: auto;
}

section>h1 {
    margin-inline-end: 25px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

/* UI Components */
/* Button Styles */
.md-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 2000px;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.md-btn:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

/* Chip Component */
.chip {
    width: fit-content;
    background-color: var(--md-sys-color-surface-container);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--md-sys-color-outline);
    transition: all 0.3s ease;
    cursor: pointer;
}

.chip .chip-icon {
    width: 30px;
    aspect-ratio: 1;
    color: var(--md-sys-color-on-surface-container);
    display: flex;
    justify-items: center;
    align-items: center;
    font-size: 20px;
}

.chip i.chip-icon {
    width: auto;
    padding: 4px;
}

.chip:not(#myStack .chip, .card .chip):hover {
    background-color: var(--md-sys-color-primary-container);
    border: 1px solid var(--md-sys-color-primary-container);
}

/* Accent Colors */
.accent-swatch.purple {
    background-color: rgb(129 76 119);
}

.accent-swatch.red {
    background-color: rgb(144 74 74);
}

.accent-swatch.yellow {
    background-color: rgb(129 85 18);
}

/* Divider Component */
.divider {
    width: 70%;
    margin-block: 40px;
    margin-inline: auto;
    background-color: var(--md-sys-color-surface-variant);
    --mask: radial-gradient(13.5px at 50% calc(100% + 7.5px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 20px) calc(50% - 6px + .5px)/40px 12px repeat-x,
        radial-gradient(13.5px at 50% -7.5px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 6px)/40px 12px repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    z-index: -1;
}

/* Section Specific Styles */
/* About Section */
#about {
    margin: 0;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}

#about>#details {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

#about #details .about-content {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

#about #details img {
    display: flex;
    width: 30%;
    aspect-ratio: 1;
    padding: 8px;
    border: 3px dashed var(--md-sys-color-primary);
    border-radius: 50%;
    transition: all 0.3s ease;
}

#about #details .name {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#about #details .title span {
    font-size: 1.2rem;
}

#about #details h1 {
    margin: 0;
}

#about #details .location {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#about #details .location .material-symbols-rounded {
    transform-origin: bottom center;
}

#about #details .location .material-symbols-rounded:hover {
    animation: juicyBounce 1s ease-in-out;
}

#about #details .about-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
}

/* Stack and Contact Sections */
#myStack>.grid,
#contact .grid {
    gap: 10px;
}

/* Project List Component */
.pill-wrapper {
    width: auto;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 2000px;
    margin-block-end: 40px;
}

.pill-wrapper::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, and Edge */
}

.project-list {
    --padding: 24px;
    position: relative;
    width: fit-content;
    height: 50px;
    padding: 0 var(--padding);
    list-style-type: none;
    display: flex;
    justify-content: start;
    gap: 40px;
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-container);
    border-radius: 2000px;
    white-space: nowrap;
}

.project-list li {
    height: 100%;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s ease;
    white-space: nowrap;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
}

.project-list::before {
    content: '';
    background-color: var(--md-sys-color-primary);
    position: absolute;
    top: 50%;
    left: var(--indicator-left);
    width: var(--indicator-width);
    transform: translateY(-50%);
    height: 100%;
    border-radius: 2000px;
    transition: left 0.3s ease, width 0.3s ease;
}

.project-list li.active {
    color: var(--md-sys-color-on-primary);
    font-weight: 700;
}

/* Hidden Sections */
#codes,
#ui-designs {
    display: none;
}

/* Footer */
footer {
    width: 70%;
    margin-block: 0;
    margin-inline: auto;
}

section>.divider,
footer>.divider {
    width: 100%;
}

/* Mobiles */
/* Media Queries */
@media (width < 768px) {
    #about,
    body>section,
    body>footer {
        width: 80%;
        height: auto;
    }

    body {
        margin-block-start: 60px;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    #projects .grid {
        justify-content: center;
    }

    #about #details {
        flex-direction: column;
        gap: 40px;
        align-items: start;
    }

    #about #details img {
        width: 260px;
    }

    .divider {
        width: 80%;
    }
}