html {
    scroll-behavior: smooth;
}

.skill-list > li {
    margin: 30px 0 0 0;
}

.has-bg-image {
    background-color: #DFDBE5;
    background-image: url("../images/cover.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bulma-image {
    width: 200px;
}

.interests {
    display: flex;
    justify-content: center;
}

.summary-text {
    margin-left: auto;
    margin-right: auto;
    max-width: 36em;
}

.article {
    height: 100%;
}

.skill-card {
    height: 100%;
}

.skill-title {
    font-weight: bold;
}

.skill-icon {
    padding: 20px;
}

.title a {
    text-decoration: none;
    color: inherit;
}

.navbar-item:hover {
    background-color: rgba(0, 0, 0, 0);
}

.navbar-burger {
    color: #ffffff;
}

/* Adjust skill cards layout for tablets */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    .section#skills .columns {
        display: flex;
        flex-wrap: wrap;
    }

    .section#skills .column.is-3 {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

/* Adjust skill cards layout for mobile */
@media screen and (max-width: 768px) {
    .section#skills .columns {
        display: flex;
        flex-wrap: wrap;
    }

    .section#skills .column.is-3 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Only apply dark background to mobile menu */
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        background-color: #011b25;
    }
}

/* Responsive button sizes for mobile */
@media screen and (max-width: 768px) {
    .button.is-responsive.is-small {
        font-size: calc(var(--bulma-size-small) * 0.75);
    }

    .button.is-responsive,
    .button.is-responsive.is-normal {
        font-size: calc(var(--bulma-size-small) * 0.875);
    }

    .button.is-responsive.is-medium {
        font-size: var(--bulma-size-small);
    }

    .button.is-responsive.is-large {
        font-size: var(--bulma-size-normal);
    }
}

/* Timeline adjustments for mobile screens */
@media screen and (max-width: 768px) {
    .timeline.is-centered::before {
        left: 1rem !important;
        right: auto !important;
    }

    .timeline.is-centered .timeline-item {
        padding-bottom: 2rem;
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        padding-left: 1rem;
    }

    .timeline.is-centered .timeline-item::before {
        left: 1rem !important;
        transform: none !important;
        position: absolute;
    }

    .timeline.is-centered .timeline-item .timeline-marker {
        position: absolute !important;
        left: 1rem !important;
        transform: translateX(-50%) !important;
    }

    .timeline.is-centered .timeline-item .timeline-content {
        position: relative;
        width: 100%;
        text-align: left;
        padding-left: 2rem;
        margin: 0;
    }

    .timeline.is-centered .timeline-item:nth-of-type(odd) .timeline-content,
    .timeline.is-centered .timeline-item:nth-of-type(even) .timeline-content {
        margin: 0;
        padding: 1em 0 0 2em;
        width: 100%;
        align-items: start;
        text-align: left;
    }

    .timeline.is-centered .timeline-header {
        width: auto;
        text-align: left;
        padding-left: 0;
        margin: 0;
        position: relative;
        left: 0 !important;
        transform: none !important;
        align-self: start;
    }

    .timeline-header .tag,
    .timeline-item .tag,
    .timeline-content .heading {
        margin-left: 0;
        text-align: left;
    }
}

.heading.has-text-white {
    color: #2E333DFF !important;
}