:root {
    --c0: #1c1b21;
    --c1: #2d3142;
    --c2: #4f5d75;
    --c3: #bfc0c0;
    --c4: #ffffff;
    --c5: #ef8354;

    --rounded-edges: 0.4rem;
    --page-max-width: 50rem;
    --page-gutter: 2rem;
    --section-gap: clamp(3.125rem, 10svh, 6.25rem);
    --standard-padding: 2rem;
    --intro-gap: 1rem;
    --technology-grid-columns: 5;
    --technology-grid-gap: 2rem;
    --technology-icon-size: 5rem;
    --technology-figure-size: 6rem;
    --font-caption: 1rem;
    --experience-slider-gap: 6.25rem;
    --experience-icon-size: 3.5rem;
    --projects-gap: 3rem;
    --project-gap: 1rem 0.5rem;
    --pfp-size: 8rem;
    --font-h1: 3.2rem;
    --font-h2: 2rem;
    --font-h3: 1.6rem;
    --font-body: 1.2rem;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--c4);
}
html,
body {
    background-color: var(--c0);
}
body {
    font-family: Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
main {
    color: var(--c4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2)));
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
    gap: var(--section-gap);
}
.header-bold {
    color: var(--c5);
    font-weight: bolder;
}
h1 {
    font-size: var(--font-h1);
}
h2 {
    font-size: var(--font-h2);
}
h3 {
    font-size: var(--font-h3);
}
a,
p {
    font-size: var(--font-body);
}

.card {
    padding: var(--standard-padding);
    position: relative;
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-image: linear-gradient(to right, #4a4e69ff, #4a4e6910, #4a4e69ff) 1;
    background-color: color-mix(in srgb, var(--c0) 90%, var(--c1));
}
.card::after {
    position: absolute;
    pointer-events: none;
    content: '';
    width: calc(100% - 2px);
    height: 100%;
    top: 0;
    left: 0;
    border-left: 1px solid;
    border-right: 1px solid;
    border-image: linear-gradient(to bottom, #4a4e69ff, #4a4e6910, #4a4e69ff) 1;
}
.intro {
    display: grid;
    gap: var(--intro-gap);
    grid-template-columns: min-content auto;
    grid-template-areas:
        "pfp name"
        "pfp contact"
        "description description"
        "about about";
}

.about {
    grid-area: about;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-self: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    grid-area: contact;
}
.link-icon {
    font-size: 1.5em;
}
.contact-me {
    border-radius: var(--rounded-edges);
    display: flex;
    gap: 0.5em;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    background-color: var(--c2);
    transition: background-color 150ms ease-in-out;
}
.contact-me:hover {
    background-color: color-mix(in srgb, var(--c2) 80%, black);
}
.github-link {
    transition: opacity 150ms ease-in-out;
}
.github-link:hover {
    opacity: 0.8;
}

.pfp {
    width: var(--pfp-size);
    aspect-ratio: 515 / 592;
    object-fit: cover;
    margin: auto 2rem;
    border-radius: 50%;
    grid-area: pfp;
    place-self: center;
}
.name {
    grid-area: name;
    align-self: end;
}
.location {
    transition: opacity 150ms ease-in-out;
}
.location:hover {
    opacity: 0.8;
}
.location-icon {
    padding-right: 0.3em;
    font-size: 1.2em;
}
.description {
    grid-area: description;
}

.technologies {
    display: flex;
    flex-direction: column;
}
.technologies-icon-grid {
    display: grid;
    width: fit-content;
    margin: auto;
    grid-template-columns: repeat(var(--technology-grid-columns), 1fr);
    gap: var(--technology-grid-gap);
    margin-bottom: 1rem;
}
.technologies-title {
    padding-bottom: 2rem;
}
.technology-icon {
    width: var(--technology-icon-size);
    height: var(--technology-icon-size);
    object-fit: contain;
}
.technology-figure {
    text-align: center;
    width: var(--technology-figure-size);
    min-height: var(--technology-figure-size);
}
figcaption {
    font-size: var(--font-caption);
    color: var(--c3)
}

.experience {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-x: hidden;
}
.radio-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.radio-btn {
    background-color: var(--c2);
    padding: 0.7rem;
    width: 100%;
    border: 1px solid var(--c2);
    font-weight: bold;
    font-size: 1em;
    transition: background-color 150ms ease-in-out;
}
.radio-btn:hover {
    background-color: color-mix(in srgb, var(--c2) 80%, black);
    cursor: pointer;
}
.radio-btn[data-selected="true"] {
    background-color: var(--c1);
}
.radio-left {
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
    border-right: none;
}
.radio-right {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    border-left: none;
}
.experience-item-container {
    display: grid;
    justify-content: start;
    grid-template-columns: min-content auto;
    column-gap: 1rem;
    grid-template-areas:
        "logo title"
        "logo duration"
        "description description";
}
.experience-icon {
    width: var(--experience-icon-size);
    height: var(--experience-icon-size);
    border-radius: 50%;
    object-fit: cover;
    grid-area: logo;
}
.experience-title {
    grid-area: title;
    align-self: end;
}
.experience-duration {
    color: var(--c3);
    grid-area: duration;
    align-self: start;
}
.experience-description {
    grid-area: description;
    padding-top: 0.5rem;
}
.experience-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: calc((100% - var(--experience-slider-gap)) / 2);
}
.experience-slider {
    display: flex;
    left: 0;
    flex-direction: row;
    width: calc(200% + var(--experience-slider-gap));
    column-gap: var(--experience-slider-gap);
    position: relative;
    transition-property: left; 
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}
.experience-slider[data-showing="education"] {
    left: calc(-100% - var(--experience-slider-gap));
}
.projects {
    display: flex;
    flex-direction: column;
    gap: var(--projects-gap);
}
.project {
    display: grid;
    gap: var(--project-gap);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "title img"
        "description img"
        "links technologies";
}
.project-title {
    grid-area: title;
}
.project-img {
    grid-area: img;
    width: 100%;
    height: auto;
}
.project-description {
    grid-area: description;
}
.project-technologies {
    grid-area: technologies;
    display: flex;
    flex-direction: row;
    justify-content: start;
}
.project-technology-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    width: 5rem;
    min-height: unset;
}
.project-technology-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
.project-technology-caption {
    font-size: 0.8rem;
}

.project-links {
    grid-area: links;
    align-self: start;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1rem;
}
.project-link {
    border-radius: var(--rounded-edges);
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    background-color: var(--c2);
    transition: background-color 150ms ease-in-out;
}
.project-link:hover {
    background-color: color-mix(in srgb, var(--c2) 80%, black);
}
.project-link-disabled {
    position: relative;
    overflow: hidden;
    color: var(--c3);
    background-color: color-mix(in srgb, var(--c2) 55%, var(--c0));
}
.project-link-disabled:hover {
    background-color: color-mix(in srgb, var(--c2) 55%, var(--c0));
}
.project-link-disabled::after {
    position: absolute;
    content: '';
    left: 0.25rem;
    right: 0.25rem;
    top: 50%;
    height: 2px;
    background-color: var(--c2);
    transform: rotate(-15deg);
    transform-origin: center;
    pointer-events: none;
}


/* Dot background */

#dot-canvas {
    position: fixed;
    inset: 0;
    display: block;
    background-color: var(--c0);
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#content {
    position: relative;
    z-index: 1;
}

@media (max-width: 47.999rem) {
    :root {
        --page-gutter: 1.5rem;
        --section-gap: clamp(2.5rem, 8svh, 4.5rem);
        --standard-padding: 1.5rem;
        --intro-gap: 0.9rem;
        --technology-grid-columns: 4;
        --technology-grid-gap: 1.5rem;
        --technology-icon-size: 4.5rem;
        --technology-figure-size: 5.5rem;
        --font-caption: 0.9rem;
        --experience-slider-gap: 3rem;
        --experience-icon-size: 3.25rem;
        --projects-gap: 2rem;
        --project-gap: 0.75rem;
        --pfp-size: 6rem;
        --font-h1: 2.7rem;
        --font-h2: 1.75rem;
        --font-h3: 1.4rem;
        --font-body: 1.08rem;
    }

    .intro {
        grid-template-columns: min-content minmax(0, 1fr);
        grid-template-areas:
            "pfp name"
            "contact contact"
            "description description"
            "about about";
    }

    .pfp {
        margin: auto 1rem auto 0;
    }

    .name {
        align-self: center;
    }

    .contact {
        align-self: start;
        gap: 0.75rem;
    }

    .project {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "img"
            "description"
            "technologies"
            "links";
    }

    .project-technologies {
        flex-wrap: wrap;
    }
}

@media (max-width: 39.999rem) {
    :root {
        --page-gutter: 1rem;
        --section-gap: clamp(2rem, 7svh, 3.5rem);
        --standard-padding: 1.15rem;
        --intro-gap: 0.75rem;
        --technology-grid-columns: 3;
        --technology-grid-gap: 1rem;
        --technology-icon-size: 3.5rem;
        --technology-figure-size: 4.5rem;
        --font-caption: 0.8rem;
        --experience-slider-gap: 1.5rem;
        --experience-icon-size: 3rem;
        --project-gap: 0.65rem;
        --font-h1: 2.25rem;
        --font-h2: 1.55rem;
        --font-h3: 1.25rem;
        --font-body: 1rem;
    }

    .intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "description"
            "contact"
            "about";
    }

    .pfp {
        display: none;
    }

    .contact {
        gap: 0.6rem;
    }

    .contact-me {
        padding: 0.25rem 0.55rem;
    }

    .technologies-icon-grid {
        margin-inline: auto;
    }

    .experience-item-container {
        column-gap: 0.75rem;
    }

    .radio-btn {
        padding: 0.6rem;
    }
}