.resume-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 25%; /* Adjust the second value as needed */
}

.jobs {
    flex: 2;
    order: 1;
}

.blurb {
    flex: 1;
    order: 2;
    text-align: right;
}

.years, .position, .company {
    margin: 0px 0; /* Adjust the first value as needed. */
}

.job {
    margin-bottom: 30px;
}

.position {
    margin-bottom: 3px;
}

.years {
    font-size: 0.9em;
    color: gray;
    margin-bottom: 0px;
}

.company {
    font-size: 0.9em;
}

.blurb h2 {
    font-size: 1.2em;
    margin-bottom: 20px; /* Add some space below the header */
}

.blurb p {
    font-size: 1em;
    margin-bottom: 7px;
}

.resume-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.details {
    display: none;
}

.detail-button:hover .arrow {
    border-color: #267723;
}

.arrow {
    border: solid #27a822;
    border-width: 0 1.75px 1.75px 0;
    display: inline-block;
    padding: 3px;
    vertical-align: middle;
    transition: all 0.3s ease;
    margin-left: 2px;
}

.right {
    transform: rotate(-45deg) translateY(0);
}

.down {
    transform: rotate(45deg) translateY(-3px); /* shift the arrow slightly upwards */
}


@media (max-width: 768px) {
    .resume-container {
        flex-direction: column;
        padding: 10px 25px;
    }
    .jobs {
        order: 2;
    }
    .blurb {
        order: 1;
        text-align: left;
        margin-bottom: 50px;
    }
}