#intro {
    display: grid;
    align-items: center;
    margin: var(--spacing-regular) 0;
    grid-template-columns: 1fr auto 1fr;
}

#intro * {
    justify-self: center;
    margin: 0;
}

#tech-stack-div {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-regular);
}

#tech-stack-div > * {
    margin: 0;
    width: 50%;
    justify-content: center;
}

#languages-grid, #tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    justify-content: center;
}

.logo-icon, .logo-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 0;
}

.logo-icon img {
    filter: drop-shadow(0 0 2px var(--shadow));
    transition: transform 200ms ease;
    will-change: transform;
}

.logo-icon:hover img {
    transform: translateY(-6px);
}

.profiles {
    display: flex;
    gap: var(--spacing-small);
    justify-content: center;
    align-items: center;
    justify-self: center;
}

.profiles * {
    justify-self: center;
}

#contact-tile {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
}

#contact-text > :last-child {
    margin-bottom: 0;
}

.icon-button {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-small);
    border-radius: var(--radius-regular);
    background: var(--primary);
    color: var(--on-primary);
}

.icon-button:hover {
    background: color-mix(in srgb, var(--surface) 10%, var(--primary) 90%);;
}

.icon-button:active {
    background: color-mix(in srgb, var(--surface) 20%, var(--primary) 80%);;
}

.icon-button.primary svg {
    fill: var(--on-primary);
}

#pubkey-div {
    display: flex;
    gap: var(--spacing-small);
}

#pubkey-div > div {
    width: 100%;
}

#pubkey-div > div > pre > div > code {
    text-wrap: wrap;
}

#pubkey-div > button {
    display: inline-block;
    white-space: nowrap;
    padding: var(--spacing-regular);
}

#pubkey-div > div > pre {
    margin-top: 0;
}

#interests-div {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-large);
    justify-content: center;
}

#interests-div > *, #interests-div > div > div > h3 {
    margin: 0;
}

.interests-list {
    display: grid;
    gap: var(--spacing-large);
    padding: var(--spacing-large);
    padding-bottom: var(--spacing-regular);
    grid-template-columns: repeat(2, 1fr);
}

.interests-list > a {
    display: flex;
    gap: calc(var(--spacing-small) / 2);
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.interests-list > a:hover > img {
    transform: translateY(-6px);
}

.interests-list > a > img {
    object-fit: cover;
    border-radius: var(--radius-small);
    filter: drop-shadow(0 0 2px var(--shadow));
    transition: transform 200ms ease;
    will-change: transform;
}

/* Main max width + regular spacing */
@media (max-width: 848px) {
    #intro {
        grid-template-columns: initial;
    }
    
    #tech-stack-div {
        flex-direction: column;
    }

    #tech-stack-div > * {
        width: 100%;
    }

    #pubkey-div {
        flex-direction: column-reverse;
        align-items: flex-start;
        align-items: center;
    }
}