@import url('base.css');
@import url('components/lander.css');
@import url('components/articles.css');
@import url('components/nav.css');
@import url('components/skills-card.css');
@import url('components/contact.css');
@import url('components/forms.css');
@import url('components/admin_panel.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); /** Bootstrap Icons **/
@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"); /** Devicon Icons **/

.back-button {
    display: inline-flex;
    background-color: var(--beige-main);
    align-items: center;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    border-radius: 1.5rem;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    transition: 0.25s ease;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
}
.back-button:hover {
    background-color: var(--accent-blue);
    color: var(--text-light);
    box-shadow: var(--shadow-md);
}

.title {
    text-align: center;
    margin-bottom: 1rem;
}

section {
    background-color: var(--beige-main);
    padding: clamp(0.5rem, 2vw, 1rem);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

div.post-header {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
}
div.post-header .right p {
    text-align: right;
    color: var(--text-muted);
}

div.post-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
    gap: 2rem;
}

div.post-card {
    background-color: var(--beige-light);
    padding: clamp(0.5rem, 2vw, 1rem);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-sm);
}
div.post-card a {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-blue);
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
    margin: 0;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    text-decoration: none;
    border-radius: 1.5rem;
    transition: 0.25s ease;
    letter-spacing: var(--letter-spacing-wide);
}
div.post-card a:hover {
    background-color: var(--accent-green);
    color: var(--text-dark);
    box-shadow: var(--shadow-md);
}

div.work-experience {
    display: grid;
    gap: 1.5rem;
}
div.experience-card {
    background-color: var(--beige-light);
    padding: clamp(0.5rem, 2vw, 1rem);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

hr {
    border: none;
    border-top: 1px solid var(--text-dark);
}

a.button {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-blue);
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
    margin: 0;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    text-decoration: none;
    border-radius: 1.5rem;
    transition: 0.25s ease;
    letter-spacing: var(--letter-spacing-wide);
}
a.button:hover {
    background-color: var(--accent-green);
    color: var(--text-dark);
    box-shadow: var(--shadow-md);
}


/** View Transition Styles */
/** May not work n all browsers */
@view-transition {
    navigation: auto;
}
/** Eases wrapper over in case scroll bar shifts page, temporary */
.wrapper {
    view-transition-name: wrapper-transition;
}