@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;700;800&display=swap');
@import url('masonry.css');
@import url('colors.css');
@import url('text.css');

body {
    background-color: var(--bg-custom-dark-alternate) !important;
    color: var(--text-custom-tertiary) !important;
    font-family: 'Poppins', sans-serif;
}

.pancake {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100vh;
}

.linkedin-btn {
    background-color: #0072b1;
}

.custom-icon-button {
    background-color: transparent;
    border: none;
    transition:ease-in;
    transition-duration: 0.25s;
}

.custom-icon-button:hover {
    color: var(--text-custom-light-complementary) !important;
}

.vertical-text {
    writing-mode: vertical-lr;
    text-orientation: sideways;
}

a.custom-link {
    transition-duration: 0.25s;
}

a.custom-link:hover {
    color: var(--text-custom-light-complementary) !important;
}

.experience-card {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transform-origin: center;
}

.experience-card:hover {
    /* padding: 1rem; */
    background-color: var(--trans-cherry);
    border: 1px solid var(--cherry);
    border-radius: 0.5rem;
    cursor: pointer;
}

.active {
    font-weight: bold;
    color: var(--mint-jelly) !important;
}

.fixed-nav-item a {
    color: var(--text-custom-white);
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transform-origin: center;
    text-decoration: none !important;
}

.fixed-nav-item a:hover {
    color: var(--text-custom-light-complementary) !important;
}

.custom-steel-teal-pill {
    background-color: var(--text-custom-primary) !important;
}

.custom-cherry-pill {
    background-color: var(--cherry) !important;
}

#content-bar-container:last-child {
    margin-bottom: 5rem;
}